Technical Articles
Fiori elements – Export to Microsoft Excel via the UI Adaptation Editor
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
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 Prasenjit'
Thanks for the encouragement!
Ah! We think alike! Yes I might suggest that.
Rgds,
Jocelyn
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
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.
Thank you Jocelyn,
using Cloud Web IDE I was able to use this feature
If so, how can we add the export to excel button to fiori list report if we only have the personal version of WebIDE?
Hello, I have same problem.
Did you find a solution ?
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 Jocelyn,
I am using the latest cloud web IDE. Still I don't find the excel enablement button.
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
Thanks!...sorry for late reply.
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
Hi Tim, Please check the project settings of your project to make sure it is recognized as a Fiori elements project relevant to UI Adaptation.
More info in the SAP Cloud Platform Web IDE documentation here:
https://help.sap.com/viewer/825270ffffe74d9f988a0f0066ad59f0/Cloud/en-US/b0dd2d4673894b0db825dabc1788b5ac.html
Rgds
Jocelyn
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
While Selecting Template, Select Higher SAP UI5 Version (1.52).
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
It seems, that the UI Adaption Editor does not work if you used a local metadata-File for the Service.
It just starts with errros 🙁
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
Thanks for reporting that back 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 Mehdi,
Please refer to the SAPUI5 SDK which has a section on Stable IDs: All you need to know.
Thanks
Hi Jocelyn, nice blog.
I want to ask if this feature is possible for tree table with odata?
Best Regards, Lucas.
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,
Thanks for your comment, I will give it a shot and let you know what happens.
best regards
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
Solved with adopted Grunt configuration as in https://blogs.sap.com/2017/08/27/fiori-elements-export-to-microsoft-excel-via-the-ui-adaptation-editor/comment-page-1/#comment-442875
https://answers.sap.com/questions/733744/ui-adaption-changes-working-on-first-app-load-only.html?childToView=732746#answer-732746
Thanks for sharing the solution Jan.
Hi Jocelyn
I could not understand why we need such adaption editor? Can we directly change the manifest.json to get same result?
Personally I always use offline IDEs like VSCode.
Best regards,
Daniel
Hi Daniel
Actually no - not everything is controlled in the manifest.json.
Sometimes what's needed is actually a generated changes file that maps the template to the specific view/control/element that needs to be adapted. That's really what the (now-called) Visual Editor is doing.
It's something nearly impossible to replicate in another IDE without a LOT of experience.
If you want to work in another IDE you can of course do that, however you might want to at least try out the technique and see the impact on the code to get the idea of what you would need to do in your own IDE.
BR
Jocelyn
Hallo Jocelyn Dart ,
Do you know how to make a field editable using the UI Adaption Editor ?
Thanks,
Vijay
HI Vijay, That's not a typical use case for UI Adaptation Editor/Visual Editor - where we are essentially changing the frontend behaviour only. Making a field editable usually requires changes on the backend so you need to look at the ABAP Programming Model for Fiori to understand the implications on CDS Views, OData Services, and BOPF depending on what you are trying to achieve
Rgds
Jocelyn
Hi Jocelyn, Please write a book 🙂 we need one and this is a huge topic.
BR,
Prasenjit
Actually what I would prefer .. and am asking for... is for some clear guidelines in the SAPUI5 documentation. There's some advice in the SAP Cloud Platform Web IDE documentation for the Visual Editor.
Hello Jocelyn,
You are correct but SAP's documentations are horrible in most cases. It would be great if we can get all these as a SAP Fiori Elements book on SAP Press or an E-Bite. Your book and articles on workflow were awesome and helped me get started as a freshman out of college; and it is great to see you doing all the work around Fiori Elements but IMHO an open sap tutorial could also be a great way that covers the basic to the highest of what is possible and then let the programmers dig for more.
BR,
Prasenjit
Hi Jocelyn,
Regarding the excel download, could you help me with the following query pls. The file is downlaoded in the Download folder automatically. The user wants to be prompted for folder name while downloading the file instead of saving it in Download folder. Also renaming of file name is desired.
Could you pls suggest if this can be achieved.
Many Thanks,
Smriti
Hi.
As we know WebIDE deprecated.
We made same changes in Visual Studio and SAP Business Application Studio.
However application executed with default values.