Mobile Tech Innovation

Extending Fiori Apps with Web IDE

This post demonstrates how to use SAP Web IDE to extend existing Fiori applications. None of the code of the original application is altered, the new application merely adds, modifies and/or hides features of the original app. This has a couple of major advantages:

  • Updates to the functionality original app will also be applied to the extension app given that the updates do not remove any dependencies of the extension app.
  • Extending an existing app promotes code re-use and increases developer productivity as well as reducing development time. This means that the client will see value sooner and saves on development costs.

The Existing Fiori Application

A simple Fiori application was constructed using an OData endpoint exposed by This Fiori app is a Master-Detail application that allows the user to browse through a list of products. When the user clicks on a product from the list, more information is shown about that particular product.
Since this application uses the SAPUI5 mobile library it is fully responsive and is easy to operate from any screen size. The following screenshot shows the functionality on a screen roughly the size of a tablet.
A demo of this app is available. The app starts with a clean-generated set of data every time it is demo’d, so changes will not be persistent from one session to the next. You can demo this app in your browser by going to this link: Fiori Starter App Demo

Extending The Application

Desired Functionality

The extended application should have the following added/modified functionality:
  • Next to the ‘Products’ title of the list section of the app there should be an ‘Add’ button.
  • When the ‘Add’ button is pressed, the detail section of the app should navigate to a page with a form for entering the data of the new Product.
  • Upon pressing the ‘Submit’ button a new Product should be added to the list.

Creating an Extension Project

A new extension project can be created by right-clicking on the existing project and selecting New > Extension Project.

Making a Copy of the Master View

Once the extension project is created, the Extensibility Pane can be opened from Tools > Extensibility Pane. Once opened, select the Master view, select “Replace with a copy of the parent view” from the dropdown box and click OK.
Web IDE now generates a copy of the Master view in the extension project while leaving the original unchanged.

Adding the Button

In order to add the button to the right of the “Products” title of the Master section, a ‘headerContent’ aggregation must be added to the MasterCustom view. When these changes are applied, we now have an Add button at the top of the Master section:
We now have to extend the controller of the Master view in the same way we did with the Master view itself. This is achieved by going to the Extensibility Pane, selecting the controller and extending it with a copy of the original controller.  The new controller has to implement the handler of the “press” event of the Add button.
When pressing the Add button a new page has to be loaded into the detail section. This is the view after the Add button is pressed:Screen-Shot-2015-01-17-at-10.02.54-PM
Upon filling in this form the user presses the Submit button which adds the product to the list and to the backend database. A demo of this app can be viewed here: Fiori Extension App Demo
In this blog post we have seen that existing UI5 apps can be extended using Web IDE without modifying the original apps. This allows for quick modification and addition of features to existing apps with maximum code re-use.

Leave a Reply

Your email address will not be published. Required fields are marked *