Latest Update November 2020: THIS POST IS NOW RETIRED – Please go directly to SAP Community topic for Fiori elements

It’s hard to believe that 4 years have passed since I first started blogging on SAP Fiori elements.

Since then it has grown from strength to strength. SAP Fiori elements apps are now the:

• Preferred choice for SAP Fiori apps delivered for SAP S/4HANA
  • As at November 2020 nearly 900 of the more than 2K apps available are SAP Fiori elements app
• Preferred and recommended choice for efficient development of your own custom-built apps
• Preferred build approach for many of our customers… see the SAP TechEd 2020 session: Yorkshire Water uses SAP Fiori Elements to build Fiori apps quickly

The tooling has also changed from SAP Web IDE on SAP Cloud Platform Neo, to the next generation tooling SAP Fiori Tools.  SAP Fiori Tools are an extension of SAP Business Application Studio on SAP Cloud Platform Cloud Foundry that guide you through creating your own SAP Fiori elements apps – and they can be run offline on VSCode too.

So it’s time for this blog post to step gracefully aside and instead refer you to the current best resources for Fiori elements, including:

• SAP Community topic for Fiori elements – get the latest resources, ask questions, and swap experiences with other customers, partners, independents, and SAP employees
• The official documentation on SAP Help Portal: Developing Apps with SAP Fiori elements
  • You can also find this documentation via the SAPUI5 SDK at https://ui5.sap.com > Documentation > Developing Apps with SAP Fiori elements
• The video playlist on Youtube: Getting started with SAP Fiori elements playlist
• The Tutorials for SAP Fiori Tools on https://developers.sap.com

One last big hint: One of the most beneficial additions to the official documentation is the SAP Fiori elements feature map which explains what is available per floorplan for your SAPUI5 version – definitely worth a read!

But hey all knowledge has value so if you want to read how this used to work in the SAP Web IDE… read on!

*****

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:

5. Extend the Generated Code Stubs
6. 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:

• Searching for annotations in SAP Web IDE
• Adding a Field Group to an Object Page with SAP Fiori Elements
• Creating an Extension Project for a standard SAP Fiori application

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