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

发布时间 2023-06-27 13:58:27作者: JerryWang_汪子熙

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.