How to use AJAX in WebClient UI Tableview

[FabianJ]

Introduction

The purpose of this blog is to explain how we can easily use AJAX to trigger asynchronous HTTP requests in Web UI Tableviews.

There are several blogs available on SAP Community about AJAX implementations in the Web UI but this blog focuses on Tableview integration.

Use cases for such implementation are unlimited but the current use case is the following:

In the Business Partner’s Identification Numbers assignment block we maintain the National Register ID of B2C customers (in a custom ID Type). For GDPR reasons, this value is encrypted before it is stored in the database table. But there is a business requirement to allow some agents seeing the decrypted ID. For performance reason and to avoid reloading the whole page, an asynchronous HTTP request is triggered to display the decrypted ID.

Remark: how is this ID first encrypted is not part of the scope of this blog. What is important to know is that encryption/decryption is done by an external API.

Figure 1 - Final result

 

As a starting point I used the excellent blog from jerry.wang:

How to implement and debug AJAX functionality in Webclient UI component

 

Realization

Summary of the steps:

• Enhancement of the standard Web UI Component/View


• Creation of a custom Tableview Iterator


• Creation of a custom HTTP Handler Class and SICF service

 

Enhancement of the standard Web UI Component/View

Component: BP_DATA, View: AccountIDNumberList

Creation of a custom Tableview Iterator

Create a new custom Class (e.g. ZL_BP_DATA_ACCOUNTIDNUMB1_IT) implementing interface IF_HTMLB_TABLEVIEW_ITERATOR

Figure 2 - Iterator

 

Create attribute GR_CONTEXT_NODE_TV type ref to CL_BSP_WD_CONTEXT_NODE_TV

Implement method Constructor

  METHOD CONSTRUCTOR.



    gr_context_node_tv = ir_context_node_tv.



  ENDMETHOD.

 

Implement method IF_HTMLB_TABLEVIEW_ITERATOR~RENDER_CELL_START

Thanks to this method we can generate the HTML DOM elements required to execute the Javascript:
-THTMLB Button: triggers the AJAX Request (lr_button->onclientclick)
-THTMLB Textview: displays the AJAX Response text. The generated <span> HTML DOM element is uniquely identified within the table (lr_textview->id)

  METHOD if_htmlb_tableview_iterator~render_cell_start.



    DATA: lv_ident_type TYPE string,

          lv_ident_code TYPE string,

          lv_txtid_s    TYPE string,

          lv_txtid_l    TYPE string,

          lv_index      TYPE char2,

          lr_button     TYPE REF TO cl_thtmlb_button,

          lr_textview   TYPE REF TO cl_thtmlb_textview.



* Check that Identification Number Row Type is 'National Register ID'

    lv_ident_type = gr_context_node_tv->collection_wrapper->find( iv_index = p_row_index )->get_property_as_string( 'IDENTIFICATIONTYPE' ).

    CHECK lv_ident_type EQ 'ZNATID'.



    MOVE p_row_index TO lv_index.



* Generate the suffix and the full DOM element ID for the table row Texview (in this case: ‘<span>’)

    CONCATENATE 'TXT.ZNATID.' lv_index INTO lv_txtid_s.

    MOVE p_tableview_id TO lv_txtid_l.

    REPLACE FIRST OCCURRENCE OF 'Table' IN lv_txtid_l WITH lv_txtid_s.



    CASE p_column_key.



* Add Button 'Decrypt' in column <STRUCT.ATTR1>

      WHEN '<STRUCT.ATTR1>'.

        lv_ident_code = gr_context_node_tv->collection_wrapper->find( iv_index = p_row_index )->get_property_as_string( 'IDENTIFICATIONNUMBER' ).

        CREATE OBJECT lr_button.

        lr_button->onclientclick = |doDecryptID('| && lv_ident_code && |','| && lv_txtid_l && |')|.

        lr_button->text = TEXT-001.

        p_replacement_bee     = lr_button.



* Add Textview in column <STRUCT.ATTR2>

      WHEN '<STRUCT.ATTR2>'.

        CREATE OBJECT lr_textview.

        lr_textview->id = lv_txtid_s.

        p_replacement_bee = lr_textview.



    ENDCASE.



  ENDMETHOD.

Where <STRUCT.ATTR1> and <STRUCT.ATTR2> are two attributes of the Tableview Context Node, either standard or custom. These two attributes must be added to the View Configuration. In this case these attributes represent columns 'Custom Actions' and 'Decrypted ID'

Two parameters are passed to the Javascript function ‘doDecryptID(’:
lv_ident_code = encrypted ID (value of the inputfield ‘Identification Number’)
lv_txtid_l = unique identifier of the ‘<span>’ HTML DOM element in the client HTML page

 

Methods IF_HTMLB_TABLEVIEW_ITERATOR~GET_COLUMN_DEFINITIONS and IF_HTMLB_TABLEVIEW_ITERATOR~RENDER_ROW_START can remain empty

 

Adjust View Controller

On the enhanced Controller Class (Z..._IMPL), create attribute ITERATOR type ref to ZL_BP_DATA_ACCOUNTIDNUMB1_IT

Figure 3 - Controller

Redefine and implement method DO_INIT_CONTEXT

  METHOD do_init_context.



    CALL METHOD super->do_init_context.



    CREATE OBJECT iterator

      EXPORTING

        ir_context_node_tv = typed_context->builidnumber.



  ENDMETHOD.

If you have enhanced the Context Node, of course you have to pass the enhanced one:
ztyped_context->zbuilidnumber

Adjust .htm page

(AccountIDNumberList.htm)

Define URL variable for custom SICF service: zcrajax_natid_d

<%

data: lv_url TYPE string,

lv_query type string.

lv_query = 'q='.

lv_url = cl_crm_web_utility=>create_url( iv_path = '/sap/crm/zcrajax_natid_d' iv_query = lv_query iv_in_same_session = 'X' ).

%>

 

Add the following javascript code

<script>

var gv_txtid;



function GetXmlHttpObject(){

 if (window.XMLHttpRequest) {

    return new XMLHttpRequest();

 }

 if (window.ActiveXObject) {

    return new ActiveXObject("Microsoft.XMLHTTP");

 }

 return null;

}



function stateChanged() {

  if (xmlhttp.readyState == 4) {

     document.getElementById(gv_txtid).innerHTML = xmlhttp.responseText;

 }

}



function getRequestURL(str) {

  var url = "<%= lv_url %>" + str;

  url = url + "&sid=" + Math.random();

  return url;

}



function doDecryptID(str,txtid){

 if (str.length == 0 ) {

   document.getElementById(txtid).innerHTML = "";

   return;

 }

 gv_txtid = txtid;

 xmlhttp = GetXmlHttpObject();

 if (xmlhttp == null ){

   alert ("Your browser does not support XML HTTP Request");

   return;

 }

 var requesturl = getRequestURL(str);

 xmlhttp.onreadystatechange = stateChanged;

 xmlhttp.open("GET",requesturl,true);

 xmlhttp.send(null);

}

</script>

(This code could be included in a .js file uploaded to the MIMEs Repository)

 

Add standard tag attribute iterator to the BSP Extension Table element (CHTMLB, THTMLB…)

<chtmlb:configTable id                    = "Table"

                    table                 = "//BuilIDNumber/Table"

                    …

                    iterator              = "<%= controller->iterator %>"

                    …

                    />

 

Create custom HTTP Handler Class and SICF service

Create new custom HTTP Handler Class (implementing interface IF_HTTP_EXTENSION) and assign it to new custom SICF service that you referenced in the .htm page.

Figure 4 - Handler Class

Tx SICF

Figure 5 - SICF Service

 

Implement method IF_HTTP_EXTENSION~HANDLE_REQUEST

METHOD if_http_extension~handle_request.



  DATA: lv_ident_code TYPE string,

        lv_ident_nr   TYPE string.



  lv_ident_code = server->request->get_form_field( 'q' ).



* call external API to retrieve the decrypted ID from the encrypted ID

********************************************

Call External API

   exporting lv_ident_code (encrypted ID)

   importing lv_ident_nr (decrypted ID)

********************************************  



  server->response->set_cdata( lv_ident_nr ).



ENDMETHOD.

Details of the API call is not documented as it is not the purpose of this blog

 

Conclusion: With a minimum of enhancements it is possible to use AJAX within any Web UI Tableview

 

Please share feedback in a comment

Ask questions about CRM WebClient UI

Read other CRM WebClient UI blog posts