In this blog post I wish to demonstrate the ability of 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 odata.org. 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.

Extending the Application

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:

Upon filling in this form the user presses the Submit button which adds the product to the list and to the backend database.

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.

If you would like a live demo of the SAP Web IDE, or understand how it could speed your SAP custom application development, please contact us.

Next Post Previous Post