SAP UI5 Fiori 应用在启动时向 ABAP 后台发起的 OData 请求序列的顺序和作用分析

简介: SAP UI5 Fiori 应用在启动时向 ABAP 后台发起的 OData 请求序列的顺序和作用分析

本文的写作动机,来源于我的知识星球里一位朋友的提问:


我们现在在 BTP 上给 successfactors 增强一个功能,画面 fiori ,针对画面上的fo 字段或者 picklist 类型字段,为了方便画面比较容易输入值,下拉框里面的值一般通过什么方式做成,而且不影响性能,现在我们考虑通过追加代码去取得下拉框的值,但是画面初期打开的时候,如果这样项目特别多,特别影响性能,想问一下有什么好的办法?或者这样例子应该怎么去实现?谢谢

image.png



我的一些回复:


初次打开画面的时候,能不能做到下拉框的延迟加载呢?也就是说,初次打开时,页面是只读模式的,此时下拉框的位置,仅仅需要显示下拉框里默认选择的 key 值对应的描述信息,此时下拉框退化成一个 Text Field.


仅仅当切换到编辑模式时,才从数据库读取 key 和 description. 这种方式在点 Edit 按钮切换成编辑模式时,也会感到一点延迟。


更高级一点的做法,就是在只读模式下,没等点击 Edit 按钮,就开始异步的去后台读取 key 和 description.


image.png


这个问题促使我去思考一个问题:SAP 标准的 Fiori 应用,在启动时是如何管理和处理发送到后台的 ABAP HTTP OData 请求的?


带着这个问题,我找了一个 SAP 标准的 Fiori 应用,CRM 领域的 My Opportunity,研究了这个应用打开时往 ABAP 后台发送的全部 OData 请求,并逐一分析了每个 OData 请求的发送原因,对每个请求的 HTTP 请求和 HTTP 响应的头部字段和正文负载(payload),也做了详细的论述。


我们在 SAP CRM Fiori Launchpad 里点击 My Opportunity 的 tile:


image.png


这个 Fiori 应用得以启动,看到如下的界面:


image.png


这是一个典型的 Master - Detail 布局的 SAP UI5 应用,左边的区域称之为 Master List,右边是 Detail 视图。这种 Master-Detail 布局的应用开发方式,在笔者另一套 SAP UI5 开发教程里有详细叙述:


SAP UI5 应用开发教程之一百零五 - SAP UI5 Master-Detail 布局模式的联动效果实现明细介绍

上图图例1显示了 系统里总共的 Opportunity 条数为 451,区域2 显示了默认 20 条数据。当我们滚动鼠标到第 20 条数据之后继续向下滚动,就会触发第 21 条数据到第 40 条数据的加载。这其实设计到 OData 读取数据的分页概念,默认情况下每页包含 20 条 Opportunity 数据,当应用启动时,只读取第一页的 Opportunity 数据,即默认显示 20 条 Opportunity.


图例3 即 Opportunity 明细页面,这里显示的是第一页 20条 Opportunity 中的第一条数据。


https://:44355/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-client=001#Opportunity-manageOpportunity&/detail/Opportunities(guid’FA163EE5-6C3A-1ED6-9DC1-A73EEF634C10’)


我们打开 Chrome 开发者工具,切换到 Networks 标签页,在 filter 里输入 /sap/opu/odata/sap/CRM_OPPORTUNITY,这是该 Fiori 应用消费后台 ABAP 服务的 url(图例2).


通过这个过滤条件,network 里显示了全部 6 条 OData 请求。


image.png


本文余下部分逐一介绍这六条 OData 请求的明细。



相关文章
|
5月前
|
缓存
SAP ABAP 系统里的事务码 SMICM keep Alive 参数的作用
SAP ABAP 系统里的事务码 SMICM keep Alive 参数的作用
|
Web App开发 数据库 开发者
SAP UI5 Fiori 应用在启动时向 ABAP 后台发起的 OData 请求序列的顺序和作用分析
SAP UI5 Fiori 应用在启动时向 ABAP 后台发起的 OData 请求序列的顺序和作用分析
如何找出 SAP Fiori Launchpad 里点击 tile 之后,读取业务数据调用的是哪个 SAP 后台系统的 OData 服务试读版
如何找出 SAP Fiori Launchpad 里点击 tile 之后,读取业务数据调用的是哪个 SAP 后台系统的 OData 服务试读版
|
XML 存储 JSON
SAP UI5 应用的 OData 元数据请求响应的解析原理分析
SAP UI5 应用的 OData 元数据请求响应的解析原理分析
|
测试技术
如何通过 SAP ABAP OData $expand 操作在同一个 HTTP 请求中返回多个节点的数据试读版
如何通过 SAP ABAP OData $expand 操作在同一个 HTTP 请求中返回多个节点的数据试读版
|
搜索推荐 BI
如何根据 SAP Fiori UI 界面上的错误消息,找到后台 ABAP 对应的消息 ID 试读版
如何根据 SAP Fiori UI 界面上的错误消息,找到后台 ABAP 对应的消息 ID 试读版
SAP UI5 基于 OData V4 的表格控件,Patch 请求的发送原理
SAP UI5 基于 OData V4 的表格控件,Patch 请求的发送原理
|
Web App开发 XML 前端开发
SAP UI5 应用的 OData 元数据请求的发送原理分析
SAP UI5 应用的 OData 元数据请求的发送原理分析
222 0
SAP UI5 应用的 OData 元数据请求的发送原理分析
|
Web App开发 安全
如何处理使用 SAP UI5 消费真实的 OData 服务时遇到的跨域问题
如何处理使用 SAP UI5 消费真实的 OData 服务时遇到的跨域问题
如何处理使用 SAP UI5 消费真实的 OData 服务时遇到的跨域问题
SAP UI5里一个包含众多操作的OData请求url实例
这个例子位于SAP CRM Fiori应用My Opportunity: 创建Opportunity时,需要维护Account字段。输入一个字符后,产生一个OData请求,搜索Account的fullName字段包含了该字符的所有数据:
SAP UI5里一个包含众多操作的OData请求url实例