1 Requirement
In WebUI scenarios specific requests and queries often take a long time until the data is available. In particular, RFC calls to external systems like the ERP can slow down performance. Due to the WebUI framework where visualization and rendering is done after server side processes are finished the user requires dedicated parallel processing. Table Views in WebUI include usually a large amount of different data and therefore different request origins. The ambition is to separate slow requests from the other request in order to fasten the entire visualization.
1.1 Preview
Take a look at the asynchronous rendering in action.
2 Proposal
Using a combination of server implementation and client side scripting Table Views can be rendered asynchronously where required. At first rendering the data is not received but a loading information is displayed instead.![1.png]()
After an AJAX-Callback is started, the data is received and the response is sent back to the client in order to display the Table View entries at the moment they’re getting available.
![2.png]()
3 Implementation Steps
Both server side and client side implementation needs to be done in order to achieve this functionality.
3.1 Server Side
The implementation class that handles the callback needs to be the same instance as the one the table view is rendered. Therefore, a modification in the method IF_HTTP_EXTENSION~HANDLE_REQUEST of class CL_CRM_WEB_UTILITY needs to be done. Similar to SAP Note 1968050 where the instance is not created again.
3.1.1 Modification in Web Utility Class
The modification is not critical from my perspective. It might be usefull to integrate a customizing there if more than one class needs to be included for different Table Views.
* -> create handler class
TRY.
IF LV_HANDLER_CLASS_NAME = 'CL_CRM_BSP__RECENTOBJECT0_IMPL'
OR LV_HANDLER_CLASS_NAME = 'ZL_ZWEBUI_B_ZACCOUNTOPPOR_IMPL'.
lv_handler_class ?= lv_target_controller.
ELSE.
CREATE OBJECT lv_handler_class
TYPE
(LV_HANDLER_CLASS_NAME).
ENDIF.
* -> call back application handler
lv_handler_class->handle_request(
ir_server = server
ir_controller = lv_target_controller ).
CATCH cx_root.
ENDTRY.
3.1.2 HTML
The rendering of the Table View itself must be done manually without using BSP tags to save the created BEE in the respective implementation class. Otherwise, the logic would be called after every roundtrip.
<%
DATA: lr_config_table TYPE REF TO cl_chtmlb_config_cellerator.
IF controller->gr_config_table IS INITIAL.
CALL METHOD cl_chtmlb_config_cellerator=>factory
EXPORTING
id = 'Table'
table = controller->typed_context->btqropp->table
_table = '//BTQROPP/Table'
xml = controller->configuration_descr->get_config_data( )
width = '100%'
selectionmode = cl_thtmlb_cellerator=>gc_selection_mode_none
personalizable = 'FALSE'
RECEIVING
element = lr_config_table.
controller->gr_config_table ?= lr_config_table.
%><script>
thtmlbAJAXCall.callBackend("<%= controller->create_ajax_url( ) %>",thtmlbCCelleratorManager.asynchronousRenderingCallback);</script><%
lr_config_table->emptytabletext = cl_wd_utilities=>get_otr_text_by_alias( 'CRM_BSP_UI_FRAME_RECOBJ/LOADING' ).
ENDIF.
lr_config_table ?= controller->gr_config_table.
lr_config_table->if_bsp_bee~render( _m_page_context ).
%>3.1.3 Clear on new focus
Depending on the usage it may be required to handle the logic whenever the focus is changed. For instance, in an assignment block that is included in the BP_HEAD. If the business partner is changed the search must be done again. I guess, there can be done some additional investigation to handle the partner change itself and in those cases just take the data out of the BOL. So the performance can be improved even more.
3.1.3.1 Method: IF_BSP_MODEL~INIT
Get the instance of the controller implementation class.
CALL METHOD super->if_bsp_model~init
EXPORTING
id = id
owner = owner.
gv_owner ?= owner.
3.1.3.2 Method: ON_NEW_FOCUS
Clear the BSP bee.
CLEAR gv_owner->gr_config_table.
3.1.4 AJAX-URL
The URL which calls the backend via JavaScript can be created in the implementation class directly.
CALL METHOD cl_crm_web_utility=>create_service_url
EXPORTING
iv_handler_class_name = 'ZL_ZWEBUI_B_ZACCOUNTOPPOR_IMPL'
iv_controller_id = me->component_id
RECEIVING
ev_url = ev_url.
3.1.5 Callback
The implementation class needs the Interface IF_CRM_WEB_CALLBACK in order to receive the previously callback.
3.1.5.1 Method: IF_CRM_WEB_CALLBACK~HANDLE_REQUEST
The method handles the callback, retrieves the data and creates the HTML code for the response.
*|-- References DATA: lr_result TYPE REF TO if_bol_bo_col,
lr_query_service TYPE REF TO cl_crm_bol_dquery_service.
*|-- Variables
DATA: lv_partner TYPE string,
lv_html TYPE string.
*|-- BP number
lv_partner = me->typed_context->builheader->collection_wrapper->get_current( )->get_property_as_string( iv_attr_name = 'BP_NUMBER' ).
CHECK lv_partner IS NOT INITIAL.
TRY.
*|-- Query Service for Opportunities
lr_query_service = cl_crm_bol_dquery_service=>get_instance( 'BTQOpp' ).
*|-- Query-Parameter
CALL METHOD lr_query_service->add_selection_param
EXPORTING
iv_attr_name = 'PROSPECT'
iv_sign = 'I'
iv_option = 'EQ'
iv_low = lv_partner.
*|-- Result
lr_result = lr_query_service->get_query_result( ).
CATCH cx_crm_genil_general_error.
RETURN.
ENDTRY.
*|-- Sorting
IF lr_result IS BOUND.
lr_result->sort(
EXPORTING
iv_attr_name = 'EXP_REVENUE'
iv_sort_order = if_bol_bo_col=>sort_descending ).
ENDIF.
*|-- Set Result to Context & build table
me->typed_context->btqropp->collection_wrapper->set_collection( lr_result ).
me->typed_context->btqropp->build_table( ).
*|-- Clear text
CLEAR me->gr_config_table->emptytabletext.
*|-- Create HTML
CALL METHOD create_table_view_html
EXPORTING
ir_server = ir_server
ir_controller = ir_controller
iv_binding_string = '//BTQROPP/TABLE'
iv_table_id = me->get_id( 'Table' )
IMPORTING
ev_html = lv_html.
*|-- Set Response
ir_server->response->set_cdata( lv_html ).
ir_server->response->set_header_field( name = 'content-type'
value = 'text/xml' ).
*|-- Invalidate ´content
CALL METHOD cl_ajax_utility=>invalidate_area_content
EXPORTING
ir_controller = ir_controller.
3.1.5.2 Method: CREATE_TABLE_VIEW_HTML
*|-- Constants
DATA: lc_separator TYPE string VALUE '__'.
*|-- Variables
DATA: lv_attribute_path TYPE string,
lv_model_name TYPE string,
lv_lines TYPE i,
lv_string_lines TYPE string,
lv_count TYPE i VALUE 0,
lv_row_id TYPE string,
lv_html TYPE string,
lv_template_row_tr_id TYPE string,
lv_new_row_tr_id TYPE string,
lv_rows TYPE string,
lv_row_ids TYPE string,
lv_fixed_left_rows TYPE string,
lv_fixed_right_rows TYPE string,
lv_marked_rows TYPE string.
*|-- Strucures
DATA: ls_area_content TYPE crms_tajax_area_content.
*|-- References
DATA: lo_page TYPE REF TO cl_bsp_ctrl_adapter,
lo_view_manager TYPE REF TO cl_bsp_wd_view_manager,
lo_view_controller TYPE REF TO cl_bsp_wd_view_controller,
lo_model TYPE REF TO if_bsp_model_binding,
lo_context_node TYPE REF TO cl_bsp_wd_context_node,
lo_context_node_tv TYPE REF TO cl_bsp_wd_context_node_tv.
*|-- Field Symbols
FIELD-SYMBOLS: <fs_page> TYPE bsprtip.
*|-- Create page instance
READ TABLE cl_bsp_context=>c_page_instances
WITH KEY page_name = cl_bsp_wd_appl_controller=>appl_controller_name
ASSIGNING <fs_page>.
*|-- Rendering
IF sy-subrc IS INITIAL AND <fs_page>-instance IS BOUND.
lo_page ?= <fs_page>-instance.
lo_view_manager ?= lo_page->m_adaptee.
lo_view_controller ?= ir_controller.
lo_view_manager->render( iv_root_view = lo_view_controller ).
ENDIF.
*|-- Get model
CALL METHOD cl_bsp_model=>if_bsp_model_util~split_binding_expression
EXPORTING
binding_expression = iv_binding_string
IMPORTING
attribute_path = lv_attribute_path
model_name = lv_model_name.
TRY.
lo_model ?= ir_controller->get_model( lv_model_name ).
lo_context_node ?= lo_model.
lo_context_node_tv ?= lo_model.
lv_lines = lo_context_node->collection_wrapper->size( ).
CATCH: cx_root.
EXIT.
ENDTRY.
WHILE lv_count < lv_lines.
"Create AJAX content
lv_count = lv_count + 1.
lv_string_lines = lv_count.
CONDENSE lv_string_lines NO-GAPS.
CONCATENATE iv_table_id '__' lv_string_lines '__1' INTO lv_row_id.
CALL METHOD lo_view_controller->retrieve_ajax_area_content
EXPORTING
iv_area_id = lv_row_id
iv_page_id = ir_controller->component_id
IMPORTING
es_content_info = ls_area_content
er_used_controller = lo_view_controller.
"Covert HTML
IF ls_area_content-area_content IS NOT INITIAL.
lv_html = cl_thtmlb_util=>escape_xss_javascript( ls_area_content-area_content ).
ENDIF.
CLEAR ls_area_content.
"Build table
lo_context_node_tv->build_table( ).
"Create Response
IF lv_rows IS INITIAL.
CONCATENATE `'` lv_html `'` INTO lv_rows.
CONCATENATE `'` '' `'` INTO lv_fixed_left_rows.
CONCATENATE `'` '' `'` INTO lv_fixed_right_rows.
CONCATENATE `'` lv_row_id `'` INTO lv_row_ids.
CONCATENATE `'` '' `'` INTO lv_marked_rows.
ELSE.
CONCATENATE lv_rows `,'` lv_html `'` INTO lv_rows.
CONCATENATE lv_fixed_left_rows `,'` '' `'` INTO lv_fixed_left_rows.
CONCATENATE lv_fixed_right_rows `,'` '' `'` INTO lv_fixed_right_rows.
CONCATENATE lv_row_ids `,'` lv_row_id `'` INTO lv_row_ids.
CONCATENATE lv_marked_rows `,'` '' `'` INTO lv_marked_rows.
ENDIF.
ENDWHILE.
CONCATENATE `{ "rows": [ ` lv_rows ` ], "fixedLeftRows": [ ` lv_fixed_left_rows ` ], "fixedRightRows": [ ` lv_fixed_right_rows
` ], "markedRows": [ ` lv_marked_rows ` ], "tableId": [ '` iv_table_id `' ], "rowIds": [ ` lv_row_ids ` ]}` INTO ev_html.3.2 Client Side
The response that is created on the server side now must be handled on the client side for direct rendering without the need of a round trip.
Therefore the JavaScript scripts_.oo_tableview.js of BSP application THTMLB_SCRIPTS must be modified.
3.2.1 Modification in JavaScript
Basically the logic of the new Javascript function is the same as the function createFastRowsCallback where the system creates new empty rows in a Table View.
3.2.2 Function: asynchronousRenderingCallback
This function has following changes compared to the fast row creation logic:
- Change the loading text of the no result line to take cases without any results into consideration
- Hide the no result line in cases where we get at least one result
3.2.2.1 Change text
var noResultRow = document.getElementById(values.tableId[0]+"_noresult");
var regexExp = new RegExp ("<%= cl_wd_utilities=>get_otr_text_by_alias( 'CRM_BSP_UI_FRAME_RECOBJ/LOADING' ) %>","g");
var noResultText = "<%= cl_wd_utilities=>get_otr_text_by_alias( 'BSP_DYN_CONFIG_TAG_LIB/NO_RESULT_FOUND' ) %>";
noResultRow.firstChild.innerHTML = noResultRow.firstChild.innerHTML.replace(regexExp,noResultText);
3.2.2.2 Hide line
for (var i = 0, length = values.rows.length; i < length; i++) {<%-- Hide no result line --%>
noResultRow.className += ' th-displayNone' ;<%-- check if the row already exists in the case where the table has inserted empty rows --%>
rowFound = true;
row = document.getElementById(values.rowIds[i]);
if (values.fixedLeftRows[i] != "")
rowFixedLeft = document.getElementById(values.rowIds[i]+"_left");
if (values.fixedRightRows[i] != "")
rowFixedRight = document.getElementById(values.rowIds[i]+"_right");
4 Summary
This logic provides a good opportunity in scenarios where dedicated requests take a long time and therefore the entire visualization is slow. However, the modification in the JavaScript is highly critical. One mistake leads to heavy errors in the WebUI as this file is used in almost every view. As a result, I can't recommend this for productive systems. I hope, that this can help the SAP to create an improment note to support this functionality.
Cheers,
Sebastian
![2015-11-16 10_03_21-Vertragskonto ändern (IS-U) - [Interaction Center ] - Internet Explorer bereitge.png](http://scn.sap.com/servlet/JiveServlet/downloadImage/38-134486-831180/384-286/2015-11-16+10_03_21-Vertragskonto+%C3%A4ndern+%28IS-U%29+-+%5BInteraction+Center+%5D+-+Internet+Explorer+bereitge.png)
