Skip to Content
Author's profile photo Roger Sainsbury

Enhancing a standard Fiori app – a real life example Part 3

This is a four-part blog:

1.    Introduction and Analysis of the standard oData Service

2.    Fiori enhancement approaches

3.    Fiori extension with the SAP Web IDE (this part)

4.    Extension of the standard oData Service

3                              Fiori extension with the SAP Web IDE

Having eliminated the simplest extensibility options discussed previously, I then looked at using the SAP Web IDE.

3.1                          Dependencies

Note that the SAP Web IDE is free to try, but to use it productively the customer must subscribe, either separately through the SAP Store, or as part of HANA Cloud Platform (HCP). More info about the SAP Web IDE here.

SAP HANA Cloud Connector must be installed (e.g. on a server) and configured to connect SAP Web IDE to the Fiori Gateway dev system – see the series of blogs starting here for detailed information about how to do this.

3.2                          User Interface Extension

In this case the view to be changed is ‘S3’ (e.g. it’s the third screen down in detail level) in FIN_REVPAYPRPSL. The app does have some extension points documented in the Fiori Apps library, but none for view s3:


Therefore the approach taken was to create a copy of the view and to change it – this is a technique explicitly supported in the Web IDE:


Having selected the view to replace, we have an extension project which includes a custom copy of the standard view:


The manifest.jsonfile includes code to link the standard app to the extension view. Note if we later wanted to remove the extension, then this entry would need to be deleted along with the view:

image004 Large.jpg

In the S3 view definition a new column was added as follows:

image005 Large.jpg

The code was written largely by copying the entry for another column of the same type and then adjusting the field name in the various places where it appears.

3.3                          Translatable Texts

To define translatable text (i18n>ITEM_TEXT) for the column description another extension option is available:


Having chosen this the I18N directory and files from the standard app are copied to the extension:


An additional entry may now be added for the Item Text column:


3.4                          Deployment

Having completed the enhancements the Extension Project is deployed back to the Fiori Gateway development system.


On the next screen I chose to Deploy as a new app (having deployed once, subsequent deployments will be updates to the new app). I created and assigned a new custom Package. Following deployment the custom app can be seen in the front-end Fiori Gateway system as a BSP application:

image010 large.jpg

3.5                          Fiori Launchpad Configuration

To access this custom version of the app, we now need to define a Tile and Target mapping in a Fiori Catalog:

image011 large.jpg

Note the Semantic Object Action needs to be something different to that in the standard app:

image012 large.jpg

For the Target Mapping:

·        The URL includes the custom BSP application name (this can also be found in SICF).

·        The Component name can be found in the Component.js file of the extension project:

image012_5 Large.jpg

Therefore the Target Mapping looks like this:

image013 large.jpg

3.6                          Result

To test we must be careful to run the new custom version of the app, not the original standard version:


On the Invoice Items screen the Item Text now appears as required:

image016 Large.jpg

In the next part I extend the standard oData service with a custom field, to avoid having to start the Item Texts with a star.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Pawan Kalyan
      Pawan Kalyan

      Hi Roger,

      Thank you for the blog.

      But I have a query . Post doing the enhancement , you have deployed it back end in customer name space.

      Suppose, if once this custom app has been moved to quality and while testing the same in quality ,user noticed something and asked us few more changes in the same enhanced view and also in some other view as well .

      So, How should we do this? Using WebIde , when we try to load this custom application , we are getting only views & controllers , which we have enhanced  but not all the views and controllers as shown below .


      More over , I am not getting extensible pane option from this custom enhanced application as shown below. It is greyed out.



      Author's profile photo Srinivas Cheruku
      Srinivas Cheruku

      Hi Roger,

      Thank you very much for sharing the information on enhancing a standard fiori application.

      I want to show my custom view before the sap standard fiori application views are shown. Can this be done in any way? I cannot find any extension for adding a new view?

      Appreciate your help on this.

      Thanks in advance