专栏首页Jerry的SAP技术分享在SAP WebClient UI里使用AJAX进行异步数据读取

在SAP WebClient UI里使用AJAX进行异步数据读取

For POC purpose I need to implement the AJAX functionality in Webclient UI component. The UI component has only one input field:

Once type “a” into the input field, it immediately displays all the records in the database table SCARR whose column carrname contains the character “a” ( without any other operation like manual refresh)

change the value in the input field, the page will display the latest matched result automatically:

Here below are the steps how to build this very simple UI component which implement AJAX functionality:

(1) Create a new UI component and a new empty view

In the html view, paste the following code: Part1

<%@page language="abap"%>
<%@extension name="htmlb" prefix="htmlb"%>
<%
data: lv_url TYPE string,
lv_query type string.
lv_query = 'query='.
lv_url = cl_crm_web_utility=>create_url( iv_path = '/sap/crm/zajax'
iv_query = lv_query
iv_in_same_session = 'X' ).
%>

Since we will send asynchronous xml request to ABAP backend to query records from database table. The query must be implemented in ABAP backend. Here I will create a new ICF service node to accomplish such query. The creation of ICF node and its handler class will be discussed later. In this step we just need to pass in the ICF node path ‘/sap/crm/zajax’ to metod create_url. That method will return the url which would be used as prefix of the final url of the asynchronous request to be sent to ABAP backend.

Part2

Here we define the four JavaScript functions:

function GetXmlHttpObject(){
 if (window.XMLHttpRequest) {
    return new XMLHttpRequest();
 }
 if (window.ActiveXObject) {
    return new ActiveXObject("Microsoft.XMLHTTP");
 }
 return null;
}

comment: this function is designed to support different kinds of browsers.

function stateChanged() {
  if (xmlhttp.readyState == 4) {
     document.getElementById("result").innerHTML = xmlhttp.responseText;
     document.getElementById("result").style.border = "1px solid #A5ACB2";
  }
}

comment: this function is callback function which will automatically be called when the backend response returned by our ICF handler class is available to consume ( that means, the result is ready to be displayed in the frontend UI )

function getRequestURL(str) {
  var url = "<%= lv_url %>" + str;
  url = url + "&sid=" + Math.random();
  return url;
}

comment: this function will assemble the final url which is to be sent to ABAP backend. The ABAP variable lv_url contains the full url of our icf node appended with request prefix “query=”. So within this function we just simply concatenate the string which is typed by end user in the input field.

function showResult(str){
 if (str.length == 0 ) {
   document.getElementById("result").innerHTML = "";
   document.getElementById("result").style.border = "0px";
   return;
 }
 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);
}

comment: we will bind this function to event onkeyup of input field, so that once we finish the typing in input field, it will be called. Within it, the asynchronous xml request is sent. We bind our callback function “stateChanged” to xmlhttp.onreadystatechange and do not need to care about when to call it – instead the framework will call this callback automatically when it should be called.

Part3

<body>
input name: <input type="text" id="fname" onkeyup="showResult(this.value)" />
<div id = "result" ></div>
</body>​

comment: just bind the event handler to event “onkeyup”.

for the complete source code which could directly be “Ctrl + C” and “Ctrl + V”, please find it in attachment.

(2) Create a new ICF node and its handler class

Use tcode SICF, create a new ICF node.

The path should be consistent with the hardcode path in the method call in step one:

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

Create a new handler class which implement interface IF_HTTP_EXTENSION:

Implement the method HANDLE_REQUEST as below:

method IF_HTTP_EXTENSION~HANDLE_REQUEST.
DATA: lv_input_str TYPE string,
lv_html TYPE string,
lt_scarr TYPE TABLE OF scarr.
FIELD-SYMBOLS: <fs_scarr> TYPE scarr.

lv_input_str = server->request->get_form_field( 'query' ).
SELECT * FROM scarr INTO TABLE lt_scarr.
IF strlen( lv_input_str ) > 0.
  LOOP AT lt_scarr ASSIGNING <fs_scarr>.
    FIND lv_input_str IN <fs_scarr>-carrname IGNORING CASE.
    CHECK sy-subrc = 0.
    IF strlen( lv_html ) = 0.
      CONCATENATE `<a href=’` <fs_scarr>-url `’ target=’_blank’>`
      <fs_scarr>-carrname `</a>` INTO lv_html.
    ELSE.
      CONCATENATE lv_html `<br />` `<a href=’` <fs_scarr>-url `’ target=’_blank’>`
      <fs_scarr>-carrname `</a>` INTO lv_html.
    ENDIF.
  ENDLOOP.
ENDIF.

IF strlen( lv_html ) = 0.
  lv_html = '&lt;no suggestion&gt;'.
ENDIF.

server->response->set_cdata( lv_html ).
endmethod.

Monitor AJAX request and response in Chrome

It is very convenient to monitor AJAX behavior via developer tool in Chrome. Launch the U component with Chrome, click F12 to open developer tool. Then mark the checkbox “Any XHR” under “XHR Breakpoints”.

So that once there is a AJAX request sent from your application, the developer tool will automatically stop at the very code in which the XHR ( XML Header Request ) is sent: Switch to debug mode, and then type a character like “a” in the input field, the session will stop – The UI becomes gray and there is a tooltip “Paused in debugger” in the top-right part of the window:

In the left-most part of development tool, you can observe which view the AJAX request is sent from. In our example from prefix “bspwd_cmp_test” we could judge that currently our ui component is launched in test mode ( by clicking the test button in UI Component Workbench); In the middle part we could see the exact line where the request is sent;

In the right most part we could check the detail value of variables used in JavaScript and the function callstack, just the same logic as ABAP debugger. For example we could get the detail of XHR like request url, and what character end user has input.

click F10 to step over until the response is returned from ABAP backend.

Put the mouse into field “responseText” and it will display the complete content of it:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一个好用的SAP ABAP工作进程跟踪工具

    As an ABAPer we have SAT, ST05 ( or sometimes ST12 ) for trace in our toolbox, a...

    Jerry Wang
  • SAP Fiori里两种弹出对话框(popup dialog)设计

    This blogs introduces the tips how to find the location of source code where the...

    Jerry Wang
  • SAP WebClient UI页面标签的决定逻辑介绍

    In this blog we have discussed the logic how the correct UI view configuration i...

    Jerry Wang
  • Codeforce-Ozon Tech Challenge 2020-A. Kuroni and the Gifts

    the i-th necklace has a brightness ai, where all the ai are pairwise distinct (i...

    风骨散人Chiam
  • 一个好用的SAP ABAP工作进程跟踪工具

    As an ABAPer we have SAT, ST05 ( or sometimes ST12 ) for trace in our toolbox, a...

    Jerry Wang
  • Face_Recognition_v3a

    In this assignment, you will build a face recognition system. Many of the ideas ...

    列夫托尔斯昊
  • gcc x64 asm 内联汇编尝试

    asm volatile(assembler template : output : input : clobber);

    战神伽罗
  • 情绪可控聊天机器人的研究(CS)

    传统的seq2seq聊天机器人模型只在输入序列的条件下寻找概率最高的句子,而不考虑输出句子的情绪。本文以seq2seq模型为基础,研究了基于人物的模型、强化学习...

    N乳酸菌
  • Elasticsearch系列之极速入门与实践教程

    NASA has once again delayed the launch of its new powerful space observatory, th...

    SmileNicky
  • 【CodeForces 489A】SwapSort

    In this problem your goal is to sort an array consisting of n integers in at mos...

    饶文津

扫码关注云+社区

领取腾讯云代金券