logics for F4 input help --- 1

Introduction:

F4 help is a very important function for WebUI input fields. Normally, when clicking ‘F4’ key or clicking on the icon attached to an input field, a dialog will pop up with all help values in an table. Once one of the entry is selected, the dialog will be closed, the selected value will be returned and filled into the input field. Even sometimes the description of the value will also be filled into the description field automatically.

Following are two samples (samples are made in CRM7.0 EHP3 with IE11 environment ):

Sample 1: For search field ‘Sales Org. ID’ in sales order search screen

When clicking the F4 help icon, the dialog pops up with all values for sales orgs:

Select an entry, the value will be filled into the search field:

Here is GET_V method for ‘Sales Org. ID’

Sample 2: For input field ‘Rating’ in ‘corporate account’ creation screen

When clicking the F4 help icon, the dialog pops up with all values for rating:

Select an entry, the rating field and its description field are filled automatically together:

Here is GET_V method for ‘Rating’

Further more:

I make above two samples together because they have three common points (even though there are some differences in the GET_V methods):

1. Seen from httpwatch traces, they both have following requests :
   .../sap/bc/bsp/sap/crm_thtmlb_util/F4Frameset.html...
   .../sap/bc/bsp/sap/crm_thtmlb_util/f4_help2.do...
2. In the pop up dialog, when selecting an entry, the value will be returned and set into input field. But there is no roundtrip event for the ‘select’ and 'set' actions. The selected values are set into input fields by JavaScript only.
   *For fields like 'rating’, when select an entry from the popup dialog, there is request sap/webcuif/uif_callback sent back to server which triggers a roundtrip. But it is not for the ‘select’ and ‘set' actions. It is for ‘Smart Value Help’ function. Please refer to the 'Additional' part for information regarding where this request is sent.
   
3. For the request '.../sap/bc/bsp/sap/crm_thtmlb_util/f4_help2.do...', in the returned content, there are Javascript functions like  ‘function dynshlp_sel_1 () {SetInput….}’. When an entry is selected, the corresponding function will be called to parse parameters and set values.
   

In this blog, logics for this kind of F4 help will be introduced with above samples.

The process regarding how the dialog pops up (use ‘Sales Org. ID’ field as sample):

1. Javascript for ‘onclick’ event for F4 help icon:
   When the input field is being rendered, since value of help_id is assigned, onclick function for clicking F4 icon will be formed in method CL_THTMLB_INPUTFIELD-> GENERATE_HELP_ID_CONTENT.
   
   The value for ME->ONVALUEHELP is:
   'thtmlbF4Help(null,null,null,document.getElementById('C34_W115_V116_V117_btqslsord_parameters[1].VALUE1'),null,'\x28CL_CRM_UIU_ORGSET_SLS_VH\x29','','','','C34_W115_V116_V117','','','')'
   
2. Now let’s see the html source code for this F4 icon:
   The whole codes are:
   <a title="Open Input Help" class="th-ip-h" id="C34_W115_V116_V117_btqslsord_parameters[1].VALUE1-btn" onclick="thtmlb_hideContextMenu(event);thtmlbF4Help(null,null,null,document.getElementById('C34_W115_V116_V117_btqslsord_parameters[1].VALUE1'),null,'\x28CL_CRM_UIU_ORGSET_SLS_VH\x29','','','','C34_W115_V116_V117','','','');" onfocus="thtmlb_InputIconFocus(this);thtmlb_hideContextMenu();" href="javascript:void(0)">
   
3. Source codes for function thtmlbF4Help locates in BSP Application THTMLB_SCRIPTS-> scripts_inputfield.js. It will be called when clicking on the F4 help icon:
   
4. Inside function thtmlbF4Help, function thtmlbF4OpenModalWindow is called. While inside thtmlbF4OpenModalWindow, a modal dialog will be open. Html for this modal dialog comes from BSP application crm_thtmlb_util-> F4Frameset.html F4 Framese.
   
   value for modal_url is:
   "/sap(ZT1TVEF6TXpVME1WOWZYMTlmTkROZk1qTTRBRkJXckViRUh1V3EtUzZvbFd6ZXVnPT0=)/bc/bsp/sap/crm_thtmlb_util/f4_help2.do?HelpMode=ValueTable&fake=130953&KeyInputFieldId=C34_W115_V116_V117_btqslsord_parameters[1].VALUE1&HelpId=(CL_CRM_UIU_ORGSET_SLS_VH)&PageId=C34_W115_V116_V117&F4Level=1&HelpIdString=&TriggerSubmit=&helpType=&prefilteringValue=&F4Title=&OutFields="
   
   value for modal_frameset is:
   "/sap/bc/bsp/sap/crm_thtmlb_util/F4Frameset.html"
   
5. Reading the source codes inside F4Frameset.html, we can see that modal_url is opened inside iframe "f4modalframe":
   
6. If we click F4 help icon of an input field, dialog pops up. From httpwatch trace, we can see the two requests clearly.
   
7. It is request crm_thtmlb_util/f4_help2.do which fetches all values actually. For f4_help2, the controller class is CL_THTMLB_F4HELP:
   
8. In method CL_THTMLB_F4HELP-> DO_REQUEST, parameter will be parsed, data will be retrieved in designed logics and then rendered as formatted in CRM_THTMLB_UTIL-> F4Help.htm.
   
9. Of course, the returned data will still be displayed in the same modaldialog.
   

The process regarding setting values when select an entry from the modal dialog(use ‘rating’ field as sample):

1. As we have talked previously, the data is rendered as formatted in CRM_THTMLB_UTIL-> F4Help.htm.
   
2. From ‘controller->gr_iterator’, we can see the functions for every help value which are generated dynamically.
   
3. The details are:
   
4. From ‘controller->gr_iterator’, we can also see the help values.
   
5. The details are:
   
6. Because of line 'onClientRowSelection = "javascript:thtmlbF4PickRow(selectedRow)"', javascript function for selecting an entry is registered. The source codes are formed in method CL_THTMLB_CELLERATOR-> RENDER_TABLE.
   
7. These JS functions can be seen from httpwatch trace:
   
   
   
8. JS function ‘thtmlbF4PickRow’ locates in BSP Application THTMLB_SCRIPTS-> scripts_inputfield.js. It is to execute the corresponding JS functions like dynshlp_sel_2.
   
9. JS function SetInput is called inside dynshlp_sel_2. SetInput locates in CRM_THTMLB_UTIL-> F4Help.htm. While JS function thtmlbF4SetInput is called inside SetInput which locates in THTMLB_SCRIPTS-> scripts_inputfield.js.
   
10. In this thtmlbF4SetInput JS function, the selected values will be set to the field ‘Rating’ and its description field.
    

*As I have not found a way to debug from a modal dialog, debug details for JS function thtmlbF4SetInput are not possible. But there is workaround to make JS debug on modal dialog. As it is not a complete debug, I would like to introduce it in a separate document -- http://scn.sap.com/blogs-edit-post!default.jspa?blogPost=136263&blog=1082.

Additional:

As have said, there is no roundtrip triggered when selecting a help value and set this value to the input field. But if we select a help value from the dialog for 'rating', in httpwatch trace, we can find a ‘webcuif/uif_callback’ request sent out.

This request is for ‘Smart value help’ function, it is a delta handling request generated here: