SAP UI5 extension project 的概念以及如何在 WebIDE 里创建 view 和 controller extension

简介: SAP UI5 extension project 的概念以及如何在 WebIDE 里创建 view 和 controller extension

SAP UI5 Extension Project 是一个扩展项目,它允许您对现有的 SAP UI5 应用进行修改和增强,而无需直接修改原始应用的源代码。这种方法有助于保持原始应用的完整性,同时允许您根据特定需求定制和扩展功能。这尤其适用于 SAP 提供的标准应用,因为这些应用在软件更新过程中可能会被覆盖。


SAP UI5 Extension Project 的主要元素包括:


  1. Extension Points:在原始应用中定义的预留位置,允许您在这些位置添加自定义内容,如视图、控件或组件。
  2. Custom Controls:自定义UI控件,可用于替换或扩展现有控件,以满足特定需求。
  3. Component Extensions:允许您扩展现有组件的功能,例如通过添加新的路由、修改现有功能或添加新的功能。
  4. Code Overrides:通过重写原始应用中的方法来修改现有功能。


要创建一个 SAP UI5 Extension Project,您需要使用 SAP Web IDE 或其他支持 SAP UI5 开发的集成开发环境(IDE)。然后,您可以根据需要扩展应用,例如添加新功能、修改现有功能或定制应用的用户界面。


在 SAP WebIDE 里创建一个新的 Extension Project:

选择 Remote -> SAPUI5 ABAP Repository, 将 WebIDE 同 SAP UI5 ABAP Repository 建立连接:

从 System 下拉菜单里选择部署了 SAP UI5 应用的 ABAP 系统,比如 GM6:

从 Original Application 里选择被扩展的 SAP UI5 应用:

Extension Project location 则为扩展项目的名称。

编辑 Component.js:

现在就看到了原始的 Opportunity 应用:

在 S2.view.xml 里创建一个 view extension:

将 extension 信息更新到 Component.js 里:

下图就是 extension view:

在里面添加新的 Extension 属性:

刷新应用,就能在 List view 里看到我们新增的 Hello Extension 属性了:


除了 view extension 外,我们还能创建 controller extension.

在 S5.controller.js 的 extHookExtendProductEntryOnAdd hook 里编写我们的自定义逻辑:


同理,将 controller Extension 信息注册到 Component.js 里:

在增强的 controller 代码里增添一个 alert 弹出框:


测试,当 list 行项目被选中时,能看到我们期望的 alert 对话框显示:

希望这个例子能够帮助大家理解如何创建 SAP UI5 的 view extension 和 controller extension.


相关文章
|
1月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
27 0
|
1月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
15 0
|
1月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
15 0
|
1月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
33 0
|
1月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
31 0
|
1月前
|
搜索推荐
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
18 0
|
1月前
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
20 0
|
1月前
|
开发者 UED
SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍
SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍
14 0
|
2月前
让 SAP UI5 应用的日志打印变得五彩缤纷试读版
让 SAP UI5 应用的日志打印变得五彩缤纷试读版
97 2
|
24天前
|
Web App开发 开发者 存储
介绍一个 webp 格式转 png 格式的软件:XNConvert
介绍一个 webp 格式转 png 格式的软件:XNConvert
27 6
介绍一个 webp 格式转 png 格式的软件:XNConvert

热门文章

最新文章