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.

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

Select Remote -> SAPUI5 ABAP Repository.

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

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

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

Finish up.

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

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.

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

Here’s our familiar Opportunity application.

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

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.

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

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

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

Create our extension view.

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

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

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

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

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

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.

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

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

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

Lastly, create and write our controller extension code.

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

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

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

要获取更多Jerry的原创文章,请关注公众号"汪子熙":
how to extend a SAPUI5 Fiori application on both view and controller in WebIDE

相关文章: