Skip to Content

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

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

To report this post you need to login first.


You must be Logged on to comment or reply to a post.

  1. Prasenjit Singh Bist

    Hi Jocelyn,


    The Fiori Smart Elements contents are really growing day by day and as it is the way forward for the ABAP developers; Can we expect a open SAP course on the same or some ebites in SAP Press.

    It would be really nice.




  2. Alessandro Spadoni

    Hi Jocelyn


    UI Adaption editor is only available in WEB IDE Cloud version?


    I’m using Web IDe personal edition Version170330 and I can’t found that option

    thank you



    1. Jocelyn Dart Post author

      Remember Personal Web IDE lags quite considerably as it is only updated once a quarter.  Also a lot of the accelerators such as the UI Adaptation Editor are not available when running offline in your Personal Web IDE. You need to be online in the Cloud Web IDE to access them.

  3. Armin Sproll

    Hi Jocelyn,

    great blog, helped me a lot to understand how to navigate with the UI Adaption Editor!

    Excel button is working for me now, what I would like to do additionally is to enable variant and full-screen support in the table of the object page. Is this possible?

    If not, do you know of a way to navigate from the list on the object page to another top-level list report with the correct context pre-selected? In the design guidelines it is even described that you should add a link like that if you have large number of items. However, I cannot find anywhere a description how to do this.

    Thanks for any pointers,


    1. Jocelyn Dart Post author

      Hi Armin, Thanks for the encouragement 🙂

      Yes you can navigate from the list on the object page to another page using a subpage extension.

      And you can find how to navigate to an external app by adapting the Navigation to Object Page.

      Good luck!

      You might even want to create your own blog on this?!



    1. Jocelyn Dart Post author

      Hi Ashutosh,

      You need to be positioned on a SmartTable control – in your screenshot you are positioned on the underlying Table control – that has different features to a SmartTable.  Compare it to the similar screenshot in my blog above. Try putting your cursor on the line above where you see the …



      1. Selvakumar Mohan

        I have the exact same issue, I am using the Web IDE on cloud too, if you see the screenshot of person above and mine below, we dont get the outline populated with the fiori elements like your screenshot shows, selecting the smart table preciously is really hard and to be clear, smart table doesnt get selected at all.

        Do you know why our outline(on the left is blank)?




Leave a Reply