how to extend a SAPUI5 Fiori application on both view and controller in WebIDE

简介: how to extend a SAPUI5 Fiori application on both view and controller in WebIDE

https://www.evernote.com/shard/s505/sh/26951388-12c9-47af-94e2-1d729f02af79/d235685719c9808d

This post consists of three parts, their titles are pretty self-explanatory.

PART I. Create a New Extension Project in WebIDE

PART II. Create a View Extension

PART III. Create a Controller Extension

PART I. Create a New Extension Project in WebIDE

Go to https://rde-fiori.dispatcher.neo.ondemand.com/

Create a new Extension Project.

image.png


Select Remote -> SAPUI5 ABAP Repository.


image.png


Select application from SAPUI5 ABAP repository (GM6_https would be our target system, and CRM_OPPRTNTY would be our application to create extension upon).


image.png


Finish up.


image.png


Update the Component.js due to one of the existing bug discovered by Jerry Wang (url: “/sap/bc/ui5_ui5/sap/crm_opprtnty”), then run it.


image.png


Here’s our familiar Opportunity application.


image.png


The idea is to put all the custom extension code in this extension project, and leave the standard product code untouched. Once the extension project is completed, user shall update their Fiori launchpad, to make the extension project as the entry point of the target application.


PART II. Create a View Extension

Locate the ExtensionPoint in the view where you would like to extend, take opportunityItemExtension in the S2.view.xml for example.


image.png


Update the extension project Component.js, add the extension information into the customizing property.


image.png


Create our extension view.


image.png


Write our extension code, we’re essentially replacing the origin list item, in order to add a new object attribute.


image.png


Run the extension project again, you will see the extended view ?


image.png


PART III. Create a Controller Extension


Same as the view extension, we’ll first locate the hook in the controller, take extHookExtendProductEntryOnAdd in the S5.controller.js for example.


image.png


Then, update the extension project Component.js with the controller extensions property.


image.png


Lastly, create and write our controller extension code.


image.png


Run it, bingo, when the product added, we’ll get the product name and alert it out.

image.png


相关文章
|
12月前
|
中间件 开发工具
使用 SAP Fiori Tools 提供的中间件导入本地下载的 SAP UI5 库文件来启动 SAP UI5 应用试读版
使用 SAP Fiori Tools 提供的中间件导入本地下载的 SAP UI5 库文件来启动 SAP UI5 应用试读版
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
|
自然语言处理 JavaScript 前端开发
使用 SAP Business Application Studio 在浏览器环境里开发 SAP UI5 应用试读版
使用 SAP Business Application Studio 在浏览器环境里开发 SAP UI5 应用试读版
|
存储 IDE BI
使用 SAP WebIDE 将 SAP UI5 应用部署到 ABAP 系统时遇到的关于传输请求的错误
使用 SAP WebIDE 将 SAP UI5 应用部署到 ABAP 系统时遇到的关于传输请求的错误
使用 SAP WebIDE 将 SAP UI5 应用部署到 ABAP 系统时遇到的关于传输请求的错误
|
12月前
|
开发者 容器
SAP UI5 Fiori Elements annotation 解析出来的 entity container
SAP UI5 Fiori Elements annotation 解析出来的 entity container
|
12月前
|
XML JavaScript 前端开发
SAP UI5 Fiori Elements annotation 文件序列化成 DOM 对象的逻辑
SAP UI5 Fiori Elements annotation 文件序列化成 DOM 对象的逻辑
|
12月前
|
IDE 开发工具
SAP UI5 extension project 的概念以及如何在 WebIDE 里创建 view 和 controller extension
SAP UI5 extension project 的概念以及如何在 WebIDE 里创建 view 和 controller extension
|
12月前
|
存储 缓存 安全
什么是 SAP UI5 Application Index
什么是 SAP UI5 Application Index
|
12月前
|
Web App开发 安全 中间件
使用 SAP Fiori Tools 自带的代理服务器解决本地运行的 SAP UI5 应用访问远端服务遇到的跨域问题试读版
使用 SAP Fiori Tools 自带的代理服务器解决本地运行的 SAP UI5 应用访问远端服务遇到的跨域问题试读版
|
12月前
|
数据可视化 C++
使用 SAP Fiori tools 开发 SAP UI5 应用
使用 SAP Fiori tools 开发 SAP UI5 应用