一个真实的 SAP 标准 UI5 应用的扩展开发项目(Extension Project)分享 - UI5 界面上新增订单创建者字段

简介: 一个真实的 SAP 标准 UI5 应用的扩展开发项目(Extension Project)分享 - UI5 界面上新增订单创建者字段

本文回答笔者的知识星球里一个朋友提出的问题,文章内容也是笔者曾经指导 SAP CRM Fiori 客户实施过的一个项目里的真实开发案例。


先看项目需求,下图是 SAP CRM 标准的 Fiori 应用之一:My Opportunities 的 Opportunity 明细页面。


可以看到这个界面,并没有将 Opportunity 的创建者(Creator)字段放出来。


6142ded26e9e2ecb0b375b3e916b4ab8_e3de754e8743031974e0423a3eee55a2.png


幸运的是,SAP Fiori 框架提供了端到端的扩展手段,即自上而下的每一个数据交换层,都支持通过扩展(extension)的方式进行增强,即:


(1) 底层持久层即数据库层面的增强,这种方式在笔者这篇教程里有详细介绍:


对本文的例子来说,不需要增强数据库层面,因为 Opportunity 的创建者本身就已经是数据库表的标准字段了。


(2) OData 服务模型和 ABAP 实现代码的增强。具体步骤在笔者这篇教程里有详细介绍:


(3) SAP UI5 Fiori UI 层的增强,也就是本文余下部分详细阐述的内容。


按照本文介绍的步骤,最后实现的效果是:Creator 字段成功暴露字啊 SAP UI5 开发的 Opportunity 明细页面上:


SAP UI5 XML 视图的 Extension Point 概念


做过 SAP ABAP BAdI Enhancement 开发的朋友们,对于 Extension Point(增强点) 这个概念都不会陌生。


什么是 SAP ABAP 的 Extension Point?


这是 SAP 为 ABAP 应用引入的一种增强机制,即在标准程序的某些位置,预留给客户和实施伙伴能够自由插入自己 ABAP 代码的一种机制。在这些特定位置插入的自定义代码,不属于 ABAP 标准程序的一部分,但是在 ABAP 标准程序被执行之后,这些自开发代码也会自动执行。


客户和实施伙伴修改自开发代码,并不会影响到 SAP 标准的 ABAP 应用,二者分开存储和传输。


SAP UI5 的 XML 视图里,也有类似 Extension Point 的概念。同 ABAP Extension Point 相比,SAP UI5 的 Extension Point,允许客户和合作伙伴插入的是一个个 UI5 控件,比如本文将要在

Opportunity 明细页面,所有标准字段的底部,插入的 Creator 字段。


通过 SAP UI5 Extension Point, SAP UI5 开发人员可以在不影响原始 SAP UI5 应用程序代码的情况下,对应用程序进行个性化的扩展和定制化。


下图是 My Opportunities 明细页面的 ExtensionPoint,其命名空间为 Core


SAP WebIDE 里的开发


在 SAP WebIDE 里新建一个 Fiori Extension Project,然后创建一个新的 View Fragment,这个 Fragment 是我们要添加到 Opportunity 标准页面的 Creator 字段的一个容器。我们把 Creator 字段对应的控件放到 View Fragment 里,然后再把 View Fragment 放到 Opportunity 明细页面的 Extension Point 里。


将来如果除了 Creator 字段之外还有其他的字段扩展需求,我们只需要把这些额外的字段放到哦啊 View Fragment 里即可。


View Fragment 的实现文件名称:extCreatedBy.fragment.xml.


完整的 XML 源代码:

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:ui="sap.ui.layout">
   <ui:form.SimpleForm id="opportunityExtension">
        <ui:content>
         <Label id="opportunityCreatedByLbael" text="Created By">
         </Label>
         <Text id="opportunityCreatedByValue" text="{json>/extCreatedBy}"></Text>
        </ui:content>
        </ui:form.SimpleForm>
</core:FragmentDefinition>


把之前按照下面这篇教程,通过 Redefine 方法扩展的 OData 服务的 url,配置到这个 Fiori extension 项目里来:


5b356bdd7427c706cb01e805901047fc_4110207bd3c485baa91c4d254e85886c.png


在这个 redefine 过后的 OData 服务实现里,/IWBEP/IF_MGW_APPL_SRV_RUNTIME~GET_ENTITY/IWBEP/IF_MGW_APPL_SRV_RUNTIME~GET_EXPANDED_ENTITY 两个方法需要 redefine.

671aea69766d81cab18fc645a6433d19_6e6ba836da9be6df1c943f9e56b4cf90.png

以上就是这个项目里将 Creator 扩展字段暴露到 SAP UI5 标准应用 My Opportunities 明细页面上去的关键步骤。


相关文章
|
1月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
31 0
|
1月前
|
JSON 前端开发 测试技术
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
21 0
|
1月前
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
20 0
|
25天前
|
数据库
SAP CRM产品主数据无法根据产品描述字段进行搜索的原因
SAP CRM产品主数据无法根据产品描述字段进行搜索的原因
17 5
|
25天前
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen
16 1
什么是 SAP ABAP 里的 Subscreen
|
2月前
|
JSON 数据格式
SAP UI5 Class sap.ui.model.Context 的作用介绍
SAP UI5 Class sap.ui.model.Context 的作用介绍
30 0
|
2月前
SAP Fiori Elements 应用里图片字段(Image)的显示原理介绍试读版
SAP Fiori Elements 应用里图片字段(Image)的显示原理介绍试读版
17 0
|
2月前
|
中间件
SAP UI5 Tooling 实战:动手创建自己的 Custom UI5 Server Middleware 试读版
SAP UI5 Tooling 实战:动手创建自己的 Custom UI5 Server Middleware 试读版
19 0
SAP UI5 Tooling 实战:动手创建自己的 Custom UI5 Server Middleware 试读版
|
3月前
|
UED
使用 SAP CRM Application Enhancement Tool 创建类型为下拉菜单的扩展字段
使用 SAP CRM Application Enhancement Tool 创建类型为下拉菜单的扩展字段
28 0
|
1月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
27 0