Skip to Content

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:

0-2 Value help for field on saved search.PNG

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

0-3 Value help for field on saved search.PNG

Here is GET_V method for ‘Sales Org. ID’

1-get_v for sales org.PNG

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:

0-5 value help for field on a form.PNG

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

0-6 value help for field on a form.PNG

Here is GET_V method for ‘Rating’

1-get_v for rate.PNG

Further more:

1-get_v for rate 2.PNG

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.
    function dynshlp_sel_----new.png

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′,”,”,”)’
    9-1 to form JS codes for click F4 icon.PNG

  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)”>
    9-2 JS source code for the F4 icon.PNG
  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:
    9-3 onclick method is called.PNG
  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”
    9-4 window showmodaldialog is called.PNG

  5. Reading the source codes inside F4Frameset.html, we can see that modal_url is opened insideiframe “f4modalframe”:
    9-5 F4frameset.html..PNG
  6. If we click F4 help icon of an input field, dialog pops up. From httpwatch trace, we can see the two requests clearly.
    9-6 httpwatch trace requests.PNG
  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:
    9-7 controller class for f4_help2.do.PNG
  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-8 cl_thtmlb_f4help-do request.PNG
  9. Of course, the returned data will still be displayed in the same modaldialog.
    9-9 data in modal dialog.PNG

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.
    9-9-1 thtmlbcellerator in F4helphtml.PNG
  2. From ‘controller->gr_iterator’, we can see the functions for every help value which are generated dynamically.
    9-9-2 Dynamic script for gr_iterator.PNG
  3. The details are:
    9-9-3 Dynamic script for gr_iterator.PNG
  4. From ‘controller->gr_iterator’, we can also see the help values.
    9-9-4 help values for gr_iterator.PNG
  5. The details are:
    9-9-5 help values for gr_iterator.PNG
  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.
    9-9-6-1 form the onselect method register.PNG
  7. These JS functions can be seen from httpwatch trace:
    9-9-7-1 dynamic JS functions in httpwatch trace.PNG

    9-9-7-2 selection register in httpwatch trace.PNG

  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-9-7-3 thtmlbF4PickRow location.PNG
  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.
    9-9-7-4 thtmlbF4SetInputlocation.PNG
  10. In this thtmlbF4SetInput JS function, the selected values will be set to the field ‘Rating’ and its description field.
    9-9-8 set values.PNG

*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/community/crm/webclient-ui-framework/blog/2015/12/26/how-to-debug-a-modal-dialog.

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.

9-9-9-1 uif_callback.PNG

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

9-9-9-2 SVH request.PNG

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply