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!

*****

Continuing my series on Fiori elements … you’ll find more blogs in the Fiori elements wiki.

When you want to extend your Fiori element app beyond what is available in annotations there are several options available. In this blog we look at one of these options, i.e. using the UI Adaptation Editor of the SAP Cloud Platform Web IDE to add a button to export our List Report to Microsoft Excel.   

IMPORTANT: You should always consider extensions as a last resort.  Extensions add to your direct software maintenance burden.  Do NOT use extensions where you can achieve the same result by adjusting your OData Service or by adjusting your annotations.     

Not every User Interface feature of a Fiori elements app can be controlled by annotations.  This is because Fiori elements are aimed at supporting common use case patterns.  These restrictions can be especially frustrating when you know what you want is part of standard SAPUI5 Smart Control that the Fiori elements app is using, such as the Export to Excel feature of the Smart Table used in a Fiori elements List Report app.

For these scenarios, with a little care, the UI Adaptation Editor of the SAP Cloud Platform Web IDE provides an answer.

Why do you need to take a little care? Because a Fiori element generates your app dynamically we need a reliable hook in the app to attach these additions.  For this you need a Stable ID.  Without a stable ID you might make the change, and then it may mysteriously disappear the next time you run your app.

So you need to first understand what a Stable ID is before you use the UI Adaptation Editor. And of course it always helps to understand a little of what is happening behind the scenes in your app.

Let’s get to it!

Stable IDs

UI Adaptation can only be used for smart controls with stable IDs and for making property changes to non-smart controls.

Stable IDs are IDs that you set yourself as opposed to IDs that are generated by SAPUI5.  Stable means that the views and view IDs are completely set by you as an application developer, the IDs are concatenated with the application component ID or do not have auto-generated parts.

Stable IDs are necessary to support:

• SAPUI5 flexibility options – such as the UI Adaptation Editor
• Automated Tests
• Inline Help Tools – such as the Web Assistant

If you don’t define IDs for controls, elements or components, SAPUI5 generates them automatically. The automatically generated IDs are not stable and might differ from program run to program run. For example, a table in an XML view of your app could have the generated IDs __table0 at runtime. These generated IDs change whenever the control structure of the app changes.

Fortunately, most of the time Fiori elements automatically enforces stable IDs. However, one place where you control these stable IDs as a developer is in the facets of an Object Page.  In Fiori elements – How to Develop an Object Page I mentioned it was important to set these stable IDs and now you start to see why.

Using the UI Adaptation Editor

Start by using the context menu on the top folder of your Fiori element app. Select the option UI Adaptation Editor.

This opens the app in Preview Mode.  Be a little patient, as it will take a few moments to load.

Just above the canvas where the app is displayed you see the UI Adaptation toolbar.

You can adjust the display for the intended device using the phone, tablet, and desktop icon buttons in the top right-hand corner of the Preview pane if you need to.

Within the Preview pane you can run your app as you usually do to reach the area you need to change.

Once you have reached the part of the app you want to change, use the Adapt UI button in the top right-hand corner to swap to UI Adaptation Mode.

Within UI Adaptation Mode simply use the cursor to select the control you want to change. In this example, you select the SmartTable, which holds the “Use Export to Excel” property we need to change.

The Properties pane can be seen in the right-hand pane – in the example you can see it is showing all the SmartTable properties.

Scroll down in the Properties pane to find the property you want to change.

Tip: Not all properties are subject to change. Only properties that have been enabled for editing may be changed.

Now change the property and you immediately see the impact in the preview of your app.

Tip: You can undo the change using the Undo/Redo buttons as long as you do not save, change the mode, or the device.

Lastly, save and run your app!

All you need to do now is use the feature by pressing the Export to Excel button.   The export itself is standard and will look something like the example below.

You can find more information on the UI Adaptation Editor in the SAP Cloud Platform, Web IDE documentation.

Impact of the UI Adaptation Editor

Technically using the UI Adaptation Editor adds a changes folder beneath the webapp folder of your app and creates a Changes file holding the change.  The changes file will look something like this example.  You can see the property that was changed in “content” and the selected control in “selector”.

Taking your Fiori elements app to the Next Level

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

• Creating a List Report App with SAP Fiori Elements
• Adding Fields to a List Report Table with SAP Fiori Elements
• Adding a Default Filter to a List Report with SAP Fiori Elements

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
• DX360 Building High Quality SAPUI5 Apps

And you can find more information via Developing apps with SAP Fiori elements in the SAPUI5 SDK and ABAP Programming Model for Fiori in the SAP Help Portal.

Screenshots shown on:

• ABAP Development Tools on Eclipse Neon
• Web IDE Version: 170720 
• SAPUI5 version 1.46.11

Brought to you by the S/4HANA RIG