Skip to Content

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:

/wp-content/uploads/2016/09/image001_1032093.png

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:

/wp-content/uploads/2016/09/image002_1032094.png

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

/wp-content/uploads/2016/09/image003_1032119.png

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:

/wp-content/uploads/2016/09/image006_1032091.png

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

/wp-content/uploads/2016/09/image007_1032125.png

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

/wp-content/uploads/2016/09/image008_1032126.png

3.4                          Deployment

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

/wp-content/uploads/2016/09/image009_1032127.png

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:

/wp-content/uploads/2016/09/image015_1032139.png

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.

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