SAP Web IDE - Part 5: Extending Fiori Application

This blog is part of my SAPWebIDE - Deep Dive series. As part of this blog, we will see how we can extend the standard SAP Fiori Application. Fiori apps can be extended through

• View Extensions
• View Modifications
• View Replacement
• Controller Extension
• I18n Resource Text Customization
• oData service replacement

In this blog we will cover View Extension using Extension Point, Controller Extension and I18n Resource Text Customization. The recommended approach to extend any standard Fiori application is to keep the parent application untouched and by creating the extension project of the same. Extension project holds the reference to the parent application and only the extended implementation. Extension projects loads the parent application at run time with the extended behavior of its own.

Let’s take a business scenario from the Part 4, we have explored the sample Fiori application Approve Purchase Orders. Now the customer wants more supplier details like SupplierId to be displayed in the UI which is not the current behavior.

First step is to create the extension project for the Approve Purchase Orders from File -> New.

Select the Application for which who want to create the Extension Project. That could be from Remote (SAP ABAP UI5 Repository / SAP HANA Cloud Platform) or directly from your workspace. In our case we have already imported the sample Approve Purchase Orders application into our workspace in Part 4. Let’s choose the same and Extension Project name will be created automatically.

Click on Next and Finish.

Now we need to find the extension point in the parent application where we can add our implementation via extension project. You can get the Extension Point and other details of all the Fiori apps from the SAP Fiori Apps Reference Library. Or else you can also just search the project with the text ‘ExtensionPoint’ to find where and all the extension points are available.

In our case the extension point ‘extensionAfterObjectHeader’ is present in the S3_PurchaseOrderDetails.view.xml just above the General Information, which I would like to use it here.

Right click your extension project New -> Extension, click on Next

You can see the various Extension options available, for now you choose the Extend View/Fragment.

In the Extension Point Selection, select your View/Fragment and the corresponding Extension Point.

Click on Next and Finish.

Open S3_PurchaseOrderDetails_extensionAfterObjectHeaderCustom.fragment.xml, add the following code.

<form:SimpleForm xmlns:form="sap.ui.layout.form" title="{i18n&gt;xtit.supplierTitle}" layout="ResponsiveGridLayout" minWidth="1024" maxContainerCols="2" class="nwEpmRefappsExtPoApvControlLayout" labelSpanL="3" labelSpanM="3" emptySpanL="5" emptySpanM="5" columnsL="1" columnsM="1">                                                <Label xmlns="sap.m" text="{/#PurchaseOrder/SupplierId/@sap:label}"/>                                                <Text xmlns="sap.m" text="{SupplierId}"/></form:SimpleForm>

Next we need to enable the newly added text ‘xtit.supplierTitle’ in the I18n.resource, for that right click your extension project and New -> Extension, click on Next and select i18n Resource Text Customization

Click on Next and Finish.

Open i18n > i18n_en.properties add the text

#XTIT: Title of the Supplier Information form
xtit.supplierTitle=Supplier Information

Now to enable binding of Supplier ID in the view, we need to extend the controller of the same. Right click your extension project, New -> Extension, click on Next. Select Extend Controller and click on Next.

Choose S3_PurchaseOrderDetails and select Copy of the parent controller.

Click on Next and Finish.

Open the file S3_PurchaseOrderDetailsCustom.controller.js and update the SupplierId parameter in the _bindView parameters.

parameters: {    select: "POId,OrderedByName,SupplierId,SupplierName,GrossAmount,CurrencyCode,ChangedAt,DeliveryDateEarliest,LaterDelivDateExist,DeliveryAddress,ItemCount"
}

Save your application. Now right click the localIndex.html , Run > Run with Mock Data.

You can see the Supplier Information on the Screen. You have successfully extended the standard Approve Purchase Orders Fiori application.

Thank you!

Rottwei (Kishore Kumar)

Technology Consultant/ UI Expert

Exa-AG