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/d235685719c9808dThis post consists of three parts, their titles are pretty self-explanatory.PART I. Create a New Extension Project in WebIDEPART II. Create a View ExtensionPART III. Create a Controller Extension

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

相关文章
|
5月前
|
监控 搜索推荐 安全
SAP Commerce Cloud Context Driven Services 里 profile-tag.js 的作用介绍
SAP Commerce Cloud Context Driven Services 里 profile-tag.js 的作用介绍
|
12月前
|
IDE 开发工具
SAP UI5 extension project 的概念以及如何在 WebIDE 里创建 view 和 controller extension
SAP UI5 extension project 的概念以及如何在 WebIDE 里创建 view 和 controller extension
|
12月前
|
开发者 容器
SAP UI5 Fiori Elements annotation 解析出来的 entity container
SAP UI5 Fiori Elements annotation 解析出来的 entity container
|
Shell Go
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
136 0
how to extend a SAPUI5 Fiori application on both view and controller in WebIDE
|
前端开发
SAP Fiori Elements controller extension 的加载原理
在 manifest.json 的 extends 区域里,注册自己的扩展实现:
SAP Fiori Elements controller extension 的加载原理
why I could not see login popup in SAP Fiori Application
why I could not see login popup in SAP Fiori Application
118 0
why I could not see login popup in SAP Fiori Application
|
XML Java 数据格式
Fiori extension hook和Hybris的template
Fiori extension hook和Hybris的template
Fiori extension hook和Hybris的template
How to add application to Fiori launchpad
How to add application to Fiori launchpad
134 0
How to add application to Fiori launchpad
SAP Fiori s2 controller init
SAP Fiori s2 controller init
109 0
SAP Fiori s2 controller init
|
Web App开发 JavaScript 前端开发
SAP UI5 视图控制器 View Controller 的生命周期方法 - Lifecycle methods
SAP UI5 视图控制器 View Controller 的生命周期方法 - Lifecycle methods
107 0
SAP UI5 视图控制器 View Controller 的生命周期方法 - Lifecycle methods