Update WebUI view fields via AJAX
Update view fields via AJAX call
Use Case
When doing some applications one may need to update certain fields on the screen without calling a back-end. In this case, the use of AJAX functionality of CRM WebUI can be useful. In this document, we will describe how one can update all the configured fields on the view.
Let us assume we have a view with Order Summary information, including Gross Value, Net Value, Tax Amount, Number of Items and Gross Weight.
On BSP level, it look like below:
<%@page language=”abap” %> <chtmlb:config displayMode = “FALSE” |
Required JavaScript
As described before (see: http://scn.sap.com/community/crm/webclient-ui-framework/blog/2015/12/11/parallelization-in-web-ui–part2), we need a function which calls an AJAX request and the functionality which will be called after the request is executed, i.e. a callback function.
As before, we will be using a standard method thtmlbAJAXCall.callBackendin order to call a back-end handler.
<script language=“javascript” type=“text/javascript“> function UpdateTotals()
|
In this case, we will use our own callback function, which will be expecting the data in JSON format. Basically it expects a table with two columns: NAME and VALUE. NAME will be a unique id of the field (e.g. C18_W65_V67_V69_btcumulath_struct.gross_value) and VALUE is the text, which needs to be placed into the field.
<script language=“javascript” type=“text/javascript“> function UpdateTotalsCallback(reqObj) </script> |
Required ABAP code
For consistency we also place a full ABAP code, including the one needed to generate the AJAX URL.
method create_ajax_url. data: lr_class_desc type ref to cl_abap_typedescr. lr_class_desc = cl_abap_classdescr=>describe_by_object_ref( me ). call method cl_crm_web_utility=>create_service_url endmethod. |
Below you can find a sample of callback handler.
method if_crm_web_callback~handle_request. data: lr_controller type ref to zl_zdmsh_pr_totals_impl. data: lv_node type string. data: lr_writer type ref to cl_sxml_string_writer. field-symbols: check ir_controller is bound. try. check lr_controller is bound. ” Get Personalization ” Get Available BSP Fields ” Loop At BSP Fields ” Get Model Data try. ” Check Context Node append initial line to lt_field_list assigning <fs_field_list>. <fs_field_list>–name = lr_model->get_attribute_name( lv_attribute_path ). catch: cx_root. endloop. “ABAP to JSON ” Set Response endmethod. |
One can note that our coding (we are talking about ABAP and JavaScript together) is very generic. It does not depend on the selected model and context nodes. It is also performance and logically optimized, as we are processing only the fields, which are present on the screen (as per WebUI configuration), and not the possible ones.
Hope it can help someone to build modern usability- and performance- optimized applications in WebUI.