This post consists of three parts, their titles are pretty self-explanatory. With few dummy examples, I’d like to show you how easy it is to extend a SAPUI5 Fiori application.

PART I. Create a New Extension Project in WebIDE

PART II. Extend The View (to replace one of the existing control to add more information to it)

PART III. Extend The Controller (to add more event triggering and handling logic to the existing controller)


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 (Jerry Wang had a post on why this is needed), 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. Extend The View

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. Extend The Controller

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

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply