Not every feature of a Fiori element can be controlled by annotations. Fiori elements are aimed at supporting common use case patterns. When you want to extend your Fiori element app beyond annotations there are a few options. In this blog we use an Object Page extension to add a new section to show some special texts.    

Sometimes you need a breakout area to be displayed as a new section of an Object Page. For example you might want to add some special texts advising employees of the latest policy changes related to the Object.  In this blog we will explain the Fiori element extension process in the SAP Web IDE.

TIP: As usual, you can also extend your Object Page directly in code, although more skill and knowledge is required.

TIP: You can call information for your breakout dynamically using an OData Service function import, or through a Remote Function Call, or anything else you can access through a JavaScript call.  You will need some SAPUI5 development knowledge for that.

The easiest way to extend your Fiori element app is using the SAP Web IDE. We start by assuming that your Fiori element project is already in your SAP Web IDE workspace.

To create an Object Page Extension, you will need to:

  1. Create the Extension
  2. Preview your Extended App
  3. Review the Generated Code Stubs

This blog will stop here.  Of course, to take this all the way to a productive app you would also:

  1. Extend the Generated Code Stubs
  2. Deploy your updated application

While the blog will stop at generating the stubs, you will find some tips for coding your stubs at the end of this blog.

IMPORTANT: Annotations should always be your first option. Only use extensions if you cannot achieve what you need to do by any other means.

WARNING: If the Object Page is provided as a delivered SAP Fiori app listed in the Fiori Apps Library, it is not yet possible to extend these apps using the approach described in this blog.  [Yes we are working on it… please be patient… this may take some time]

Create the Extension

You can use the SAP Web IDE Extension wizard to add your extension to your Fiori element app.

The wizard steps you through 3 steps.  You will:

  1. Choose your extension type
  2. Complete your extension settings
  3. Confirm to Generate your Extension stub code

Start in the SAP Web IDE workspace positioned on the root folder of your Fiori element app’s project.

Then use the context menu on your Fiori element project to start creating your Extension by selecting New > Extension.

NOTE: Do not select “Extension Project” – that’s for extending a delivered SAP Fiori app.

Choose your Extension Type

You choose Object Page Extension as the extension type to add a section to your Object Page.

Complete your Extension Settings

You need to tell the extension wizard what sort of Object Page extension you want to create and where you want to place your extension within your Fiori elements app.

In this example you can see how to add a new section – aka Facet – after the General Information section. For this you will want to create your own view .  The new view will hold the contents of the new section.

Confirm to Generate your Extension stub code

Confirm to finish the extension wizard and generate the stub code in your Fiori elements app.

Preview your extended Fiori elements app

You can run your app from the Component.js file as usual to check the impact of your new extension.

You can see your new section has been added to the navigation bar and placed after the General Information section as we requested.

Review the Generated Extension code stubs

So now you will want to check and understand what the wizard added to your Fiori elements app.  These are the components that you will need to change to make your new section show your special texts.

You can see 4 changes:

  1. Changes to your Project Structure
  2. Generated View Stub
  3. Generated Controller Stub
  4. Changes to your App Descriptor (i.e. manifest.json file)

Changes to your Project Structure 

Most of the changes are held in a new folder named “ext” (short for extension), which the wizard has added to your project structure.

Generated View Stub

The new view you requested has been created and added to the view folder within the ext folder. You can see that some stub code has been added.

This where you can add fields and format the look and feel of your new section.

Generated Controller Stub

A controller stub has also been generated.

This is where you can make calls to import data for your extension, and executed any actions you need.

Changes to the App Descriptor

And lastly you can see how extension is applied in the manifest.json

Tips for Extending Generated Stubs

Before you start extending your generated stubs, make sure you have and read and understood the API for Developers of Template Extensions

You can find more information on Extending Generated Apps in the Developer Guide for the SAPUI5 UI Development Toolkit for HTML5.

Taking your Fiori elements app to the Next Level

If you are interested in Fiori elements you might also like to look at these videos on Youtube:

If you are going to SAP Teched 2017 and Interested in learning more about Fiori elements you might like to attend these sessions:

  • DX201   What’s New with SAP Fiori Elements
  • S4H276  Build a List Report SAP Fiori App: ABAP Programming Model for SAP S/4HANA
  • S4H279  Build Transactional SAP Fiori App: ABAP Programming Model for SAP S/4 HANA
  • DX264   Overview Page in SAP Fiori Elements
  • DX266   SAP Fiori Elements – Analytical List Page

And you can find more information on Developing apps with SAP Fiori elements in the SAPUI5 SDK

Brought to you by the S/4HANA RIG

New NetWeaver Information at SAP.com

Very Helpfull

User Rating: Be the first one !