使用Chrome开发者工具研究SAP UI5应用里的Odata请求

简介: Suppose I need to investigate how the entities of Initiatives displayed in the table control below is accessed via OData in UI5 application Customer Engagement Initiative (CEI):

Suppose I need to investigate how the entities of Initiatives displayed in the table control below is accessed via OData in UI5 application Customer Engagement Initiative (CEI):


image.png


Requirement1: find out the OData Access URL for Initiatives in table control.

Launch the CEI application via Chrome, click F12 to open development tool, go to tab Network, switch on Record mode by clicking button “Record Network Log”.


image.png


Then click the INITIATIVES work center and display the table control as usual. The record icon turns red which indicates currently the network traffic is recorded. You should observe lots of traffic logged as below.


image.png


Click filter button, and filter by “XHR” ( Xml Http Request), then check starting from the bottom-most, and soon you find the OData access url for initiatives:


image.png


So this url “https://:44300/sap/opu/odata/sap/CUAN_COMMON_SRV/Initiatives?KaTeX parse error: Expected 'EOF', got '&' at position 7: skip=0&̲top=110&$inlinecount=allpages” is just what we are looking for. Write it down for later usage.


Click Preview tab, and you can check the initiative instance contained in Odata response, to compare each field with UI ( for example, ID, Creator, CreatedOnDate, EndDate etc ).

image.png


The CreatedOn and EndDate store the Unix time-stamp since 1970, you can easily convert it via the link below, the converted time is now exactly the same as what you see in UI.


http://www.unixtimestamp.com/index.php


image.png


Requirement2: find out which application view has consumed this OData url to access Initiatives data from ABAP backend

Go to Chrome development tool, expand tab “XHR Breakpoints”, choose “Add breakpoint” from context menu, and type the url part we find in step1: /sap/opu/odata/sap/CUAN_COMMON_SRV/Initiatives?KaTeX parse error: Expected 'EOF', got '&' at position 7: skip=0&̲top=110&$inlinecount=allpages.


image.png


And click Initiative work center, then the breakpoint is triggered. Type “o” in Watch Expressions and we can observe the OData access request is set via line 332 below with the very url we find in step1.


Now we need to find out which view has consumed this OData service. Expand tab “Call Stack”:


image.png


From the call-stack it is very clear the table which displays the initiative data is being rendered. We focus on call-stack highlighted below, the variable c[i] contains the information of table view. Type “c[i]” in Watch Expressions tab and expand it:


image.png


Here we could find view name and thus could identify the application view in the right hierarchy, and then find how the OData model is bound to the table control in CUAN_INI_OW_WSI.view.js and how the OData model is initialized in controller CUAN_INI_OW_WSI.controller.js.

image.png


相关文章
|
4月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
4月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
4月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
|
4月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
|
4月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
|
4月前
|
搜索推荐
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
|
4月前
|
Web App开发 前端开发 JavaScript
乱花渐欲迷人眼 - 让 SAP UI5 应用的日志输出不再素面朝天
乱花渐欲迷人眼 - 让 SAP UI5 应用的日志输出不再素面朝天
|
4月前
|
Web App开发 JSON JavaScript
SAP UI5 应用程序小技巧 - 一键将 JSON 对象导出成本地 json 文件
SAP UI5 应用程序小技巧 - 一键将 JSON 对象导出成本地 json 文件
|
4月前
|
XML 数据处理 数据格式
什么是 SAP UI5 XML Templating 技术
什么是 SAP UI5 XML Templating 技术