Skip to Content

Fiori elements – Export to Microsoft Excel via the UI Adaptation Editor

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

50 Comments
You must be Logged on to comment or reply to a post.
  • 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.

    Thanks,

    Prasenjit

     

  • 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

    regards

    Alessandro

  • 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,

    Armin

    • 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?!

      Rgds,

      Jocelyn

    • 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 …

      Rgds

      Jocelyn

      • 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)?

         

         

        • Hi Selvakumar,

          Look at the top of the right hand pane – you can see there that you are focussed on the Icon Tab Bar. You need to find the Smart Table element. Try selecting the Items List area below the tab bar.

          Also that doesn’t look like a Fiori element? So it may not have the same behaviour.

          Rgds

          Jocelyn

  • Thanks for the blog.  Very useful.  I was able to add Excel Export to Smart Table, and a changes file was generated as expected.

    However, could you identify the “Stable ID”  in your example.  Is it “OpenSAPOList….” ?

    Thanks,

    Tim

    • Hi Tim, Good question! It’s actually the whole string you see in the id attribute of the selector section of the Changes file.  That is:

      OpenSAPSOList::sap.suite.ui.generic.template.ListReport.view.ListReport::Z_C_SalesOrder–listReport

      Fiori elements automatically generate Stable Ids by default.

      Rgds,

      Jocelyn

  • I am not seeing the ‘UI Adaptation Editor’ in WebIDE FullStack. Is it not available there yet? Or does it require an additional plugin to be installed?

     

    Tim

      • Thanks Jocelyn!

        I am now seeing this option after updating the project settings. If this project is not a ‘full blown’ Elements app (i.e we’re using a worklist template with a Smart Table), will this export to excel still work? We have a requirement for this functionality, and in UI5 v1.50, the excel export library is added, so we have made preparations to upgrade to 1.52 on our GW so we can have this.

        Will we still be able to use this functionality with a non-Elements app?

        Tim

        • Hi Tim,

          The button will appear if you have activated it in the Smart Table. However the Export to Excel using a server capability to provide the export service.  So you need to check that in the backend system.

          Rgds

          Jocelyn

  • Hi Tim, Hi Jocelyn,

    I’m expeiencing the same issue. I’ve activated all features in Web IDE Full Stack but my project context menu looks like:

     

     

    Same also for Web IDE where I’ve activated all plugins:

    I’ve used the List Report template with an SEGW OData Service with code based annotations. Might that be an reason?

    Best regards
    Gregor

    • HI Gregor, SAP Cloud Platform Web IDE needs to recognize your project as a Fiori elements project relevant to UI Adaptation.

      Use the context menu on the project to check the Project Settings indicate the project type permits UI Adaptation as described in this SAP Cloud Platform Web IDE documentation on changing applications using the UI Adaptation editor.

      https://help.sap.com/viewer/825270ffffe74d9f988a0f0066ad59f0/Cloud/en-US/b0dd2d4673894b0db825dabc1788b5ac.html

      Rgds

      Jocelyn

      • Hi Jocelyn,

        thank you for this tip. I made the Excel export which even exports numbers with currencies correctly work in Web IDE. Now I’ve deployed this app to the SAP Cloud Platform Portal Service where I’ve integrated it in the Launchpad. Here the export doesn’t work anymore as the URL that is called uses an absolute URL starting with /sap/opu/odata… to request the data for the export instead of using a relative path where the app name is included to use the destination defined in the app. It’s like the issue I’m also facing in the cloud portal when I store a variant as a tile where the initial tile is defined as a dynamic tile. Check out https://youtu.be/9mFqmfY8MQw (no audio, details in the description) for details.

        Best regards
        Gregor

        • Hmmm… sounds like an oversight

          You might have to raise that as a SAP Incident – i.e. to request that the relative path be used instead of or supported as well as an absolute path.

          There should be some sympathy for this approach as ideally Fiori elements should work for side-by-side extensions of SAP S/4HANA Cloud or SAP S/4HANA

           

          • Hi Jocelyn,

            I’ve opened:

            96345 / 2018 SAP Fiori Elements – List Report – Excel Export in Cloud Platform Portal Service fails

            perhaps you can help to get the right people assigned.

            Best regards
            Gregor

          • Hi Gregor – sorry missed this comment. However I did talk to the guys separately and I can see that they are working on a resolution and even given you a rough timeline.  So here’s hoping things go to plan and this is resolved soon.

            Cheers

            Jocelyn

          • Hi Jocelyn,

            no worries. SAP Support already informed me and it seems that the issue should be fixed end of April 2018. That matches the timeline of our project Go-Live.

            Best regards
            Gregor

  • Hi Jocelyn,

     

    This worked great for me in the Web IDE, but when I build and check the code in, activate and run, the excel button no longer shows up when I run from SCP.   I noticed in the trace that the call to ..hana.ondemand.com/webapp/changes/id_1524488274239_130_propertyChange.change?_=1524748089801 only occurs within Web IDE but not when I run from the SCP url.  I’ve cleared cookies etc. and I can’t figure out what I’m missing.  Any ideas?

    Thanks,

    Andy

    • HI Andy, See Gregor Wolf’s comments above … that feature should be available in SAP Cloud Platform approximately end of April (so any time now)

      Cheers

      Jocelyn

       

    • Hi Michael

      Disappointing!

      Please raise a SAP Incident for that and you might want to tweet that to @sapcp team too to see if they can give you any quick suggestions

      Rgds

      Jocelyn

  • Hi Jocelyn,

    Thank you. It was a good blog. I have a issue during implmentation. I was able to successfully get the button displayed in SAP Web IDE and it is working perfectly fine. However when i try to deploy this to my on premise system, i do not see the export to excel icon which was enabled in Adapt UI. Can you please let me know if i have missed something here?

    My App is complete new custom app with a list report. 

    Regards,

    Jay

    • Hi Jay

      Ok so that might depend on whether your backend release supports the UI5 version & the Changes approach.  Check the BSP application matching your SAPUI5 app to see if the Changes file was deployed correctly to your on premise system.  If you can’t get it working please raise a SAP Incident.

      Rgds

      Jocelyn

      • Hi Jocelyn,

         

        This issue was resolved after i raised an incident.

        It was a bug in SAP WEB IDE. When i created a new List Report template application the gruntfile.js was missing some tasks which was not deploying the changes file to abap repository.

        When i created new template the gruntfile.js file looked like below.

        module.exports = function (grunt) {
        “use strict”;
        grunt.loadNpmTasks(“@sap/grunt-sapui5-bestpractice-build”);
        grunt.registerTask(“default”, [
        “clean”,
        “lint”,
        “build”
        ]);
        };

         

        However SAP asked me to put the below code.

        module.exports = function (grunt) {
        “use strict”;
        grunt.loadNpmTasks(“@sap/grunt-sapui5-bestpractice-build”);
        grunt.registerTask(“default”, [
        “copy:copyToDbg”,
        “copy:copyToTmp”,
        “devxUpdateManifest”,
        “cssmin”,
        “openui5_preload:preloadTmp”,
        “copy:copyDbgToDist”,
        “copy:copyProjectFilesToDist”,
        “uglify:uglifyPreload”,
        “copy:copyTmpToDist”,
        “devx-updateNeoApp”,
        “createResourcesJson”,
        “createManifestBundle”,
        “cleanTmp”,
        “createsCachebusterInfoJson”
        ]);
        };

         

        Thanks for your help.

        Regards,

        Jay

  • Hi Jocelyn,

    I am a bit confused about the Stable IDs part of the blog, I am not sure how I can complete it. Can you please give me more input about it.

    Thanks

    • Hi Lucas, I haven’t personally tried that one – however there is a good description of the Spreadsheet Export Limitations in the SAPUI5 SDK which confirms hierarchical data is most certainly possible, however there are some considerations with visual representation depending on the depth of the sub levels.

      Rgds

      Jocelyn

  • Hi Jocelyn,

     

    I am trying to use UI Adaptation Editor to add Export to excel on the Smart table created as part of my Analytical List Page. My ALP is created on an on-premise odata service generated by my CDS view. The smart table does not have Export to excel by default and when I am trying to use UI Adaption editor to update the value to ‘true’ changes do not get saved. This is happening for other changes on UI Adaptation Editor as well. Please note I am using Web IDE trial version.  I get the below error in the console when I change any value on UI Adaptation editor.

    Please can you help me understand what can be the cause of the issue.

    Property change wasn’t pushed to stack. Error: Error: “[object Promise]” is not valid for aggregation “commands” of ManagedObject sap.ui.rta.command.Stack#__stack0

     

    Please find below screenshot where it goes to error. Probably the command is not getting created correctly and it always goes to the catch statement.

     

    Thanks & Regards,

    Ankit

    • Hi Ankit

      Please don’t use blog comments to report issues – always raise a separate post in answers.sap.com – you can always include a link back to the blog.

      If you use a blog comment you are mostly relying on the author to get back to you only… which may take quite some time as we all fit in blogs/responses in our own time.

      If you post it in answers.sap.com others with related experience can help.

      Plus it’s impossible to manage the back and forth necessary in blog comments.

      Thanks for you understanding

      Rgds

      Jocelyn

    • Also Ankit – each Fiori elements floorplan provides different capabilities – so you should not automatically assume that Export to Spreadsheet can be used in the same way with Analytical List Page floor plan.  Please refer to the SAPUI5 SDK e.g. Extending Analytical List Page apps and remember that available capabilities depend on your SAPUI5 version

  • Hi Jocelyn,

    your blogs had helped me a lot, and now  I had developed a fiori elements apps. but regarding the export to excel function I see when we have amounts fields in the smart table, how can I add the currency format to the amount in a way that the currency does not concatenate to the amount?

    best regards

     

    • Hi Eliu,

      It’s a good question, and I’m not sure if it’s possible. Suggest you raise it in answers.sap.com and see if anyone else has a way around it.

      A couple of off the top of my head thoughts… You might have to create a column *without* the semantic meaning of amount/currency assigned or do something with an Excel macro

      Rgds

      Jocelyn

      • Hi Jocelyn,

        what I did was to add annotations to the CDS:

        annotation to the currency field

        @Semantics.currencyCode:true
        t4.waers

        annotation to the amount

        @Semantics: { amount : {currencyCode: ‘waers’} }
        t4.Valor

         

        and that did the trick 🙂

        best regards

        • Ah.. well done! I had assumed you were already using the semantics tag and were trying to get rid of it.  However yes that’s a good answer.

          Ps. As a very very minor note… we would usually rename the waers to something more readable these days.  Makes it more readable especially if you later want to combine it with other CDS views to make a more extensive app.

          E.g. t4.waers as ValorCurrency

           

  • Hi Jocelyn Dart ,

    I used the Adaption Editor to show the button in my freshly created Fiori Elements List Report. The change is displayed just fine in the Web IDE preview.

    After deployment to an on-premise ABAP repository, i made sure the changes file is present. On first application load, the change is displayed. However, after navigating to Launchpad home or another app and re-entering, the change is gone and my list report is displayed without any adaption.

    Browser cache and UI2 caches are cleaned. Is this a known issue?

    Running on S4 1709 SP 01/2018, SAP_UI 752 SP3

    Regards,
    Jan