In the previous blog SRM UI Add on 1.0 - Custom fields Demystified, we have seen how data maintained in “Extensions and Field control” is extracted using OData services and translated into custom fields on different UI5 screens. In this blog we will continue our quest and try to understand how the infamous search help created in SAP GUI is translated into UI5 screens. We will first look at the necessary configuration that is needed in SPRO related to search helps.
To begin with select the search help check box and enter search help name. Please note only elementary search helps are supported. As of today collective search helps are not supported.
![image001.png]()
Next step is to maintain Search help field mapping. Here select the field form search help export parameters which gets displayed in the result screen and model field name to which you want to transfer this value (Ideally it should be the binding element to which customer input field is bounded)
![image003.png]()
The field mapping data is stored in table /SRMNXP/D_SH_VMP. We need to keep an eye in entries of this table when we change the field mapping dataJ. The entries in this table do not get deleted if we delete the entry from SPRO. So make sure that you don’t have unnecessary entries in this table. This leads to wrong values getting transferred to input field when user selected a row from the search results. In one of our project, this has caused lot of headache for us ![]()
The result of doing the above said configuration is, we see a input field with value help attached to it on header identification region a shown below
![image005.png]()
We are done with the configuration. Let’s understand how the data is transferred. There are two OData services that we need to consider here. One is GETDEFUSRSET, where we have details of search help name and field mapping data
![image007.png]()
Second OData service is SEARCH_HELP, which gets all the metadata of search help like search help type, import/export parameters etc. This data is used later in UI5 to build the selection screen of search help and also the result table containing the result list.
![image009.jpg]()
IT is good know more about this OData service here. It has two Entitysets called SearchHlpMetadataCollection and SearchHlpDataCollection. First one gives metadata of the search help, whereas second one gives the result list after clicking on search. In this blog we are interested in first Entityset.
The Entity of this Entityset is composed of three sections
INTERFACE – This section has attributes of the search help like name of the search help, Dialog type, search help exit name etc.
![image010.png]()
FIELDDESCR – This section contains details of the each field in the search help, like name of the field, description, input length, output length, data element etc.
![image012.png]()
FIELDPROP – This section contains details about whether a particular field is Import/export, position of the field on the selection screen and position of the field in the result screen.
![image014.png]()
The JS code that creates the value help field is in method createValueHelp() of LayoutGenerator.js. Instead of pasting all the code from /SRMNXP/SHOPPINGCART BSP application, I will mention the important stuff that happens inside this method
- Creation of SAP UI5 control ValueHelpField ValueHelpField - SAPUI5 Demo Kit
- Binding the ‘value’ property to the binding element mentioned in SPRO
- Attaching even handler method customSearchHelpHandler( ) to F4 event
So in Short, we have a valuehelpfield which is bound to some OData service and has an event handler attached to reach to user F4 selection
Next thing to do, click on F4 (obviously![]()
)
As mentioned above event handler method gets triggered and inside the handler system
- Reads the field mapping data
- Call method openCustomSearchHelpDialog( )
Inside openCustomSearchHelpDialog( ) method
- Creation of SAP UI5 control OverlayContainer OverlayContainer - SAPUI5 Demo Kit
- Instantiate view CustomerSearchHelp.view.js
- Instantiate controller CustomerSearchHelp.controller.js
- Calling method onReInit() of controller
- Adding the view CustomerSearchHelp to OverlayContainer control
- Open OverlayContainer
At this point, you might be wondering where the call to OData service SEARCH_HELP is. It happens inside onReInit() method of controller
In onReinit() method, below three lines of code takes create calling OData service SEARCH_HELP with specific search help name and get the required metadata
// Fire the OData service to get the search help metadata
var searchHelpName = this.getSearchHelpName() ? this.getSearchHelpName().replace(/\//g, '|') : null;
var sDataModelKey = "/SEARCH_HELP/SearchHlpMetadataCollection(SHLPNAME='" + searchHelpName + "')?";
Appcc.getModel("SearchHelp", this.oSearchHelpMetadata, sDataModelKey, true, "DISPLAY", null, false);
From getModel() of APPController.js to display of selection screen, there are lot of different calls to different method and it is difficult to explain the whole call stack( It will make this document too large) So below I am giving the important call stack
JS file | Method name | Comment |
CustomerSearchHelp.controller.js | onReInit | Call OData service “SEARCH_HELP” to get the metadata of the search help |
APPController.js | getModel | |
dataManager.js | DataMgmt() | |
APPController.js | onDataModelLoaded | |
CustomerSearchHelp.controller.js | onDataModelLoaded | |
CustomerSearchHelp.controller.js | SearchHelpMetadata. prototype. onDataModelLoaded | Data from the OData service is segregated into different variables and used in designing the selection screen and output table |
CustomerSearchHelp.view.js | Createcontent | Main layout of the search help screen is built here. Buttons “Use selected”, “cancel”, “reset” and “search” buttons are added to the layout along with corresponding action handler methods. Here data from section FIELDDESCR and FIEDLPROP of OData SEARCHHELP is used. |
- CustomerSearchHelp.view.js
| __createFormLayout | Actual creation of selection screen is done here. |
What you see after all this mumbo jumbo is
![image016.jpg]()
Enough for today ![]()
In the next blog, we will see how search results are extracted and displayed on the UI5 screen.
Keep Reading and Keep Sharing....
