Asynchronous Saved Search Fetch
I have noticed it could be a nice implementation variant for AJAX queries in WebUI. Everyone has it’s own saved search and everyone would like to know how many items are behind it. (Click a picture below to see how it's working ).
Implementation
Create Custom Controller
Saved searches are managed within GS_WC_QLINKS component. What we are going to need is a new custom-controller e.g. counter.do.
This controller will be called stateless to calculate the number of entries behind each of the saved search.
Perform AJAX request
The AJAX request is called right from the view GS_WC_QLINKS/savedsearches.htm.
<%@page language="abap" %> <%@extension name="htmlb" prefix="htmlb" %> <%@extension name="xhtmlb" prefix="xhtmlb" %> <%@extension name="thtmlb" prefix="thtmlb" %> <%@extension name="crm_bsp_ic" prefix="crmic" %> <%@extension name="bsp" prefix="bsp" %> <% DATA lr_ss_wrapper TYPE REF TO cl_bsp_wd_collection_wrapper. DATA lr_ss TYPE REF TO cl_crm_bol_entity. %> <thtmlb:overflowContainerverticalScrollbar="NEVER" > <% data: lv_search_id type string. data: lv_search_name type string. lr_ss_wrapper = savedsearches->get_collection_wrapper( ). lr_ss ?= lr_ss_wrapper->get_first( ). If lr_ss is not bound. %> <img class="th-clr-img" src="<%= CL_THTMLB_UTIL=>GET_DYN_ICON_URL( EXPORTING iv_icon_name = CL_THTMLB_UTIL=>GC_ICON_INFOMESSAGE iv_icon_type = CL_THTMLB_UTIL=>GC_BUTTON_ICON ) %>" /> <thtmlb:textView text = "<%= otr(CRM_UIU_BT/NORESULT) %>" /> <% Endif. while lr_ss is bound. lv_search_id = lr_ss->get_property_as_string(iv_attr_name = 'GUID' ). lv_search_name = lr_ss->get_property_as_string(iv_attr_name = 'DESCRIPTION' ). %> <thtmlb:link id = "<%= lv_search_id %>" onClick = "GO" onClientClick = "thAdvSearchRegisterEvent('GO')" text = "<%= lv_search_name %>" tooltip = "<%= lv_search_name %>" /> <% lr_ss ?= lr_ss_wrapper->get_next( ). %> <br> <!-- --> <script language="javascript" type="text/javascript"> thtmlbAJAXCall.callBackend("<%= controller->create_ajax_url( iv_ss = lv_search_id ) %>",UpdateSavedSearchCallback); </script> <!-- --> <% endwhile. %> </thtmlb:overflowContainer> |
Build Stateless AJAX URL
Saved search IDs are provided along with the AJAX URL, which is built as shown below.
methodcreate_ajax_url. |
Process AJAX Requests on the backend
The requests will be processed by our custom controller. There we need two methods: DO_REQUEST and GET_COUNT.
DO_REQUEST:
methoddo_request. |
GET_COUNT:
methodget_count. id_of_query_template ). |
Writing AJAX call-back function
function UpdateSavedSearchCallback(reqObj) { varresponseText = reqObj.request.responseText; varobj = JSON.parse(responseText); varfnum = obj.TEXT.length; for (vari = 0; i< fnum; i++) { varelem = document.getElementById(obj.TEXT[i].NAME); if (elem){ elem.title = obj.TEXT[i].VALUE; elem.innerHTML = obj.TEXT[i].VALUE; } } } |
Publish a link to the JS file in the table WCFC_ADD_JS.