Latest Update November 2020:
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:
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:
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!
*****
Yes you can add the Export to Microsoft Excel to SAP Fiori elements apps that use the List Report and Worklist floorplans. It turns out it’s actually a simple process to fill this gap using a SAP Fiori adaptation project via a wizard in the SAP Cloud Platform Web IDE Full Stack. You will see a step by step example on how to do this.
You will also learn a little about a new application type in the SAP Fiori apps reference library called a SAP Fiori App Variant. You will find some of these app variants delivered with SAP S/4HANA 1909, however you can use this technique with SAP S/4HANA 1809 FPS01 (i.e. SAPUI5 version 1.60) or above. This blog shows the technique on a SAP S/4HANA 1809 FPS02 Fully Activated Appliance trial system.
Sometimes it’s the little things we all take for granted that are the deal-breaker for users. Spreadsheet export is one of these. Many users can’t imagine life without spreadsheets. Sometimes adding just that one feature makes all the differences in a user’s level of comfort in using an app. It’s can be almost a kind of digital security blanket for some users, even in these days with real-time information instantly at your fingertips. Plus of course if I can download a list I can take it offline to discuss it with my colleagues, or use it as evidence for a business case.
So a fairly common request from customers in the SAP S/4HANA Customer Care program is to add spreadsheet download capability to standard SAP Fiori apps. While some SAP Fiori apps provide spreadsheet download as standard, and many add it later due to customer feedback requests, not all apps have included this feature. The good news is that from SAP S/4HANA 1809 FPS01 (i.e. SAPUI5 1.60) you can add Export to Excel to any app based on SAP Fiori elements fairly easily using the SAP Fiori Adaptation Project wizard in the SAP Cloud Platform Web IDE Full Stack.
You can use SAP Fiori app F2071 Find Maintenance Notification as an example for this. This is a good example as:
For the customer involved having a spreadsheet download was considered a critical functionality to make the difference between recommending using the SAP Fiori app or falling back to the closest
Keep reading to:
TIP: You can also use Adaptation Projects to make other changes such as:
Minimum SAP S/4HANA 1809 FPS01, i.e.
The app must be a SAP Fiori elements app of type List Report or Worklist. You can check if an app is a SAP Fiori elements app in the SAP Fiori apps library - just look for the Application Type or filter on UI Technology.
If you want to know if an app uses the List Report floorplan just compare it to the Floorplan in the SAP Fiori Design Guidelines.
You will need the Technical name of the app from the SAP Fiori apps reference library or from the About dialog as explained in Finding the Technical Name of an App
For example for F2071 Find Maintenance Notification, the technical name of the app is i2d.eam.notification.manages1
You will also need to know the intent that launches the app, i.e. the Semantic Object and action used for the tile and related target mapping that launches the app. You can find this in the Fiori apps reference library for the app, in the tab Implementation Information, section Configuration and look for the subsection Target Mapping.
Or you can find it as a fragment of the URL used when you launch the app. The intent appears immediately after the # in the format SemanticObject-action. E.g. https://<host>:<port>/sap/bc/ui2/flp?sap-client=100&sap-language=EN#MaintenanceNotification-displayFactSheet
From either of these methods you can determine the intent settings:
To create the Fiori Adaptation Project you will need access to the following developer tools:
TIP: If you are developing for a production system, and you don't already have a SAP Cloud Platform subscription you can get a basic subscription to the Web IDE on the SAP Store. This gives access to both the online and offline version of the Web IDE.
You will also need a SAP Cloud Connector set up to connect your development system to the SAP Cloud Platform Web IDE to generate the project and deploy the app back to your development system. You can download the Cloud Connector from
Once installed you will need to create a Destination in your Cloud Platform Cockpit to point to your Cloud Connector.
The Adaptation Project will create a SAP Fiori app variant that you will deploy to your SAP S/4HANA solution. To call your SAP Fiori app variant from your SAP Fiori launchpad in SAP S/4HANA, you will need access to your SAP S/4HANA's Launchpad Designer, and to the SAP GUI transaction SUI_SUPPORT to verify your app was deployed correctly to your SAP S/4HANA system.
Start by launching the SAP Cloud Platform Web IDE Full Stack service.
You need to use the wizard Adaptation Project to extend the app. Start the wizard in the usual way, e.g. using the menu File > New > Adaptation Project.
Give your project a name and press Next.
TIP: You can call your project by any valid name, however as this will become your SAP Fiori app variant name, you might want to consider a naming convention that reflects the original app to make it easier to find later. E.g. Here you can see the app variant is called s4demo. A better name would be something like z_f2071_excel, so that you could easily identify the app variant by the original app id.
Notice the namespace is "customer" and cannot be changed.
Select the SAP Cloud Platform destination that points to your system via your Cloud Connector.
Once the list of available apps is returned, search by the technical name of the app
Select the app to be extended by selecting the relevant row in the table, and wait for the Next button to appear (there’s some validation happening at this point - so this takes a few seconds).
Press Finish and the project is generated
In the workspace Files area, use the context menu on your project name to start up the SAPUI5 Visual Editor.
Wait for the SAPUI5 Visual Editor to open. This takes a few seconds.
Switch from Preview mode to Edit mode using the Edit | Preview buttons on the top right of the visual editor.
In the Outline pane (on the left), find and select the Smart Table control.
You notice you cannot make the necessary changes in Safe Mode (which is very restrictive).
So you now need to turn off Safe Mode.
TIP: Mainly this means you will need to reconcile your changes when you upgrade your SAP S/4HANA system, if there’s a clashing change made by SAP.
Press the Safe Mode button (with the lock icon) in the SAPUI5 Visual Editor header just to the left of the Edit | Preview buttons.
Uncheck the Enable Safe Mode flag and press Apply.
After turning off Safe Mode, you need to go to Edit mode again and select the Smart Table control in the Outline pane again. The properties in the Properties pane on the right of the visual editor are now editable.
In the Properties pane on the right, for the Smart Table control, set the Export to Excel property to true.
And Save your changes (e.g. using menu File > Save)
Notice that in your app's project, using the SAPUI5 Visual Editor has created a changes folder and a new file in the changes folder. This is how the changed properties are stored.
Run your new app variant to test it in the Web IDE sandbox using the Adaptation_index.html file. That picks up the changes you have made.
You can test in large mode or any of the different form factors. Notice when the list is empty, the Export to Excel options appear in the table toolbar but are disabled as there is no data to download.
Press Go to see the effect of adding data. You can see the export buttons are now enabled.
You can even test the download by pressing the Export button
You can review the downloaded file
Once you are satisfied everything is working, you are ready to deploy the app variant back to the SAPUI5 ABAP Repository in your SAP S/4HANA system. Let the deploy wizard guide you through the process.
Select your project's root folder and use the context menu to select Deploy and then Deploy to SAP NW Application Server ABAP (i.e. to your SAP S/4HANA development system).
Confirm the SAP Cloud Platform destination of your system to which your changes will be deployed.
Assign your development package
Assign your transport request
Press Confirm
Wait for the Success Message
Use the Show Details link to understand how you address the app variant. You can see both:
And you can see it has been deployed to something called the LRep, i.e. the Layered Repository
And you are finished working in the SAP Cloud Platform Web IDE full stack service.
Now if you are pragmatically paranoid like me, you will want to double check that the app actually did reach your development system. So where do you find it? It sits in an area known as the Layered Repository (LREP). The layered repository is a whole topic itself – for now just think of it as the place where all your app variants are stored.
You can use the administration transaction SUI_SUPPORT in SAP GUI to browse the Layered Repository (LREP).
TIP: You call transaction SUI_SUPPORT from the GUI in your SAP S/4HANA or SAP S/4HANA Cloud System. In SAP S/4HANA systems you can call report /UIF/GET_FILES_4_NS from the ABAP Development Tools in Eclipse, or from GUI transactions such as SE38.
You can find your app variant using the namespace parameter and some wildcards, i.e. namespace = *<id>* where the id is the app variant id or the technical name of the original SAP Fiori app.
E.g. namespace = *s4demo* or namespace = *i2d.eam.notification.manages1*
Run the report (e.g. by pressing the Execute button) and you should see the list of files held in the Layered Repository with your app variant id held as part of the Customer base and Load layers.
You can double-click on any of the lines to see the source code held, e.g. selecting the Load layer shows the associated manifest.json file and check the technical id of the app variant in the property id. You will need this to configure the launchpad content link to your app variant.
Now you need to call your app variant. There are actually a few ways of doing this with various pros and cons as to which you can use, but that's a blog post in itself. So here you can see a simple option using a parameter added to a tile definition.
To separate your new tile definition and target mapping from the originals, you will need to assign it a new intent. The simplest way to do this is to use the same Semantic Object as the original, and assign a new action. You can call the action anything you want.
In the Launchpad Designer web browser tool, create a custom catalog. Copy the original tile definition and target mapping to your custom catalog and change the action.
Here you can see the new tile definition with the action displayFactSheetExcel.
The target mapping needs to point to the same intent. Assign the parameter sap-appvar-id to your app variant's id. E.g. sap-appvar-id=customer.s4demo
Your catalog should now look something like this.
VERY IMPORTANT: Assign your tile catalog to your test user's business role (i.e. their PFCG security role), making sure to activate the authorizations to your app. If you haven't done this before mass maintenance of business roles for SAP Fiori launchpad explains the easiest way to do this.
TIP: As usual when making any changes to a SAP Fiori app, make sure you have cleared the web browser cache before testing.
Provided your app has been assigned to test user correctly, you should find the new tile in their App Finder.
Select the tile to launch your app variant. You should now see your app launched and the Export to Excel buttons showing. Press Go and provided you have some data in the results list, the export buttons will be enabled.
Now test the download by choosing an Export option, such as Export As...
You see the usual download dialog indicating the data is being retrieved from the server.
And then your data is downloaded to the local device.
You’ll find much more on our SAP Fiori for SAP S/4HANA wiki
Brought to you by the S/4HANA RIG
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!
*****
Yes you can add the Export to Microsoft Excel to SAP Fiori elements apps that use the List Report and Worklist floorplans. It turns out it’s actually a simple process to fill this gap using a SAP Fiori adaptation project via a wizard in the SAP Cloud Platform Web IDE Full Stack. You will see a step by step example on how to do this.
You will also learn a little about a new application type in the SAP Fiori apps reference library called a SAP Fiori App Variant. You will find some of these app variants delivered with SAP S/4HANA 1909, however you can use this technique with SAP S/4HANA 1809 FPS01 (i.e. SAPUI5 version 1.60) or above. This blog shows the technique on a SAP S/4HANA 1809 FPS02 Fully Activated Appliance trial system.
Sometimes it’s the little things we all take for granted that are the deal-breaker for users. Spreadsheet export is one of these. Many users can’t imagine life without spreadsheets. Sometimes adding just that one feature makes all the differences in a user’s level of comfort in using an app. It’s can be almost a kind of digital security blanket for some users, even in these days with real-time information instantly at your fingertips. Plus of course if I can download a list I can take it offline to discuss it with my colleagues, or use it as evidence for a business case.
So a fairly common request from customers in the SAP S/4HANA Customer Care program is to add spreadsheet download capability to standard SAP Fiori apps. While some SAP Fiori apps provide spreadsheet download as standard, and many add it later due to customer feedback requests, not all apps have included this feature. The good news is that from SAP S/4HANA 1809 FPS01 (i.e. SAPUI5 1.60) you can add Export to Excel to any app based on SAP Fiori elements fairly easily using the SAP Fiori Adaptation Project wizard in the SAP Cloud Platform Web IDE Full Stack.
You can use SAP Fiori app F2071 Find Maintenance Notification as an example for this. This is a good example as:
- It comes from a real use-case (one of our SAP S/4HANA Customer Care customers asked for spreadsheet download on this app)
- This app is available in the SAP S/4HANA Fully Activated Appliance Trial system – so you can test the process using a trial
For the customer involved having a spreadsheet download was considered a critical functionality to make the difference between recommending using the SAP Fiori app or falling back to the closest
Keep reading to:
- Understand the prerequisites
- Learn how you can create the Adaptation Project
- Learn how to activate the Export to Excel feature
- Learn how to deploy the changes back to your ABAP development system
TIP: You can also use Adaptation Projects to make other changes such as:
- Adjusting the column width in tables
- Executing Go button by default on entry to the app
- Collapsing the filter bar by default on entry to the app
Prerequisites
Minimum SAP S/4HANA 1809 FPS01, i.e.
- SAPUI5 version is 1.60 or above
- ABAP version is ABAP Platform 1809 (embedded) or SAP NetWeaver 7.51 (hub)
The app must be a SAP Fiori elements app of type List Report or Worklist. You can check if an app is a SAP Fiori elements app in the SAP Fiori apps library - just look for the Application Type or filter on UI Technology.
If you want to know if an app uses the List Report floorplan just compare it to the Floorplan in the SAP Fiori Design Guidelines.
You will need the Technical name of the app from the SAP Fiori apps reference library or from the About dialog as explained in Finding the Technical Name of an App
For example for F2071 Find Maintenance Notification, the technical name of the app is i2d.eam.notification.manages1
You will also need to know the intent that launches the app, i.e. the Semantic Object and action used for the tile and related target mapping that launches the app. You can find this in the Fiori apps reference library for the app, in the tab Implementation Information, section Configuration and look for the subsection Target Mapping.
Or you can find it as a fragment of the URL used when you launch the app. The intent appears immediately after the # in the format SemanticObject-action. E.g. https://<host>:<port>/sap/bc/ui2/flp?sap-client=100&sap-language=EN#MaintenanceNotification-displayFactSheet
From either of these methods you can determine the intent settings:
- Semantic Object = MaintenanceNotification
- action = displayFactSheet.
To create the Fiori Adaptation Project you will need access to the following developer tools:
- SAP Cloud Platform Web IDE Full Stack service
TIP: If you are developing for a production system, and you don't already have a SAP Cloud Platform subscription you can get a basic subscription to the Web IDE on the SAP Store. This gives access to both the online and offline version of the Web IDE.
You will also need a SAP Cloud Connector set up to connect your development system to the SAP Cloud Platform Web IDE to generate the project and deploy the app back to your development system. You can download the Cloud Connector from
Once installed you will need to create a Destination in your Cloud Platform Cockpit to point to your Cloud Connector.
TIP: If you haven't done this before, follow the process described in Connecting a CAL S/4HANA Instance to SAP Cloud Platform Web IDE
The Adaptation Project will create a SAP Fiori app variant that you will deploy to your SAP S/4HANA solution. To call your SAP Fiori app variant from your SAP Fiori launchpad in SAP S/4HANA, you will need access to your SAP S/4HANA's Launchpad Designer, and to the SAP GUI transaction SUI_SUPPORT to verify your app was deployed correctly to your SAP S/4HANA system.
Create the Fiori Adaptation Project
Start by launching the SAP Cloud Platform Web IDE Full Stack service.
You need to use the wizard Adaptation Project to extend the app. Start the wizard in the usual way, e.g. using the menu File > New > Adaptation Project.
Give your project a name and press Next.
TIP: You can call your project by any valid name, however as this will become your SAP Fiori app variant name, you might want to consider a naming convention that reflects the original app to make it easier to find later. E.g. Here you can see the app variant is called s4demo. A better name would be something like z_f2071_excel, so that you could easily identify the app variant by the original app id.
Notice the namespace is "customer" and cannot be changed.
Select the SAP Cloud Platform destination that points to your system via your Cloud Connector.
Once the list of available apps is returned, search by the technical name of the app
Select the app to be extended by selecting the relevant row in the table, and wait for the Next button to appear (there’s some validation happening at this point - so this takes a few seconds).
Press Finish and the project is generated
Adding the Export to Excel feature
In the workspace Files area, use the context menu on your project name to start up the SAPUI5 Visual Editor.
Wait for the SAPUI5 Visual Editor to open. This takes a few seconds.
Switch from Preview mode to Edit mode using the Edit | Preview buttons on the top right of the visual editor.
In the Outline pane (on the left), find and select the Smart Table control.
You notice you cannot make the necessary changes in Safe Mode (which is very restrictive).
So you now need to turn off Safe Mode.
TIP: Mainly this means you will need to reconcile your changes when you upgrade your SAP S/4HANA system, if there’s a clashing change made by SAP.
Press the Safe Mode button (with the lock icon) in the SAPUI5 Visual Editor header just to the left of the Edit | Preview buttons.
Uncheck the Enable Safe Mode flag and press Apply.
After turning off Safe Mode, you need to go to Edit mode again and select the Smart Table control in the Outline pane again. The properties in the Properties pane on the right of the visual editor are now editable.
In the Properties pane on the right, for the Smart Table control, set the Export to Excel property to true.
And Save your changes (e.g. using menu File > Save)
Notice that in your app's project, using the SAPUI5 Visual Editor has created a changes folder and a new file in the changes folder. This is how the changed properties are stored.
Run your new app variant to test it in the Web IDE sandbox using the Adaptation_index.html file. That picks up the changes you have made.
You can test in large mode or any of the different form factors. Notice when the list is empty, the Export to Excel options appear in the table toolbar but are disabled as there is no data to download.
Press Go to see the effect of adding data. You can see the export buttons are now enabled.
You can even test the download by pressing the Export button
You can review the downloaded file
Deploying the changes back to your ABAP Development System
Once you are satisfied everything is working, you are ready to deploy the app variant back to the SAPUI5 ABAP Repository in your SAP S/4HANA system. Let the deploy wizard guide you through the process.
Select your project's root folder and use the context menu to select Deploy and then Deploy to SAP NW Application Server ABAP (i.e. to your SAP S/4HANA development system).
Confirm the SAP Cloud Platform destination of your system to which your changes will be deployed.
Assign your development package
Assign your transport request
Press Confirm
Wait for the Success Message
Use the Show Details link to understand how you address the app variant. You can see both:
- the original technical name of the app, e.g. i2d.eam.notification.manages1
- and the app variant, e.g. customer.s4demo
And you can see it has been deployed to something called the LRep, i.e. the Layered Repository
And you are finished working in the SAP Cloud Platform Web IDE full stack service.
Checking the deployed app variant in your development environment
Now if you are pragmatically paranoid like me, you will want to double check that the app actually did reach your development system. So where do you find it? It sits in an area known as the Layered Repository (LREP). The layered repository is a whole topic itself – for now just think of it as the place where all your app variants are stored.
You can use the administration transaction SUI_SUPPORT in SAP GUI to browse the Layered Repository (LREP).
TIP: You call transaction SUI_SUPPORT from the GUI in your SAP S/4HANA or SAP S/4HANA Cloud System. In SAP S/4HANA systems you can call report /UIF/GET_FILES_4_NS from the ABAP Development Tools in Eclipse, or from GUI transactions such as SE38.
You can find your app variant using the namespace parameter and some wildcards, i.e. namespace = *<id>* where the id is the app variant id or the technical name of the original SAP Fiori app.
E.g. namespace = *s4demo* or namespace = *i2d.eam.notification.manages1*
Run the report (e.g. by pressing the Execute button) and you should see the list of files held in the Layered Repository with your app variant id held as part of the Customer base and Load layers.
You can double-click on any of the lines to see the source code held, e.g. selecting the Load layer shows the associated manifest.json file and check the technical id of the app variant in the property id. You will need this to configure the launchpad content link to your app variant.
Configuring the call to your app variant
Now you need to call your app variant. There are actually a few ways of doing this with various pros and cons as to which you can use, but that's a blog post in itself. So here you can see a simple option using a parameter added to a tile definition.
To separate your new tile definition and target mapping from the originals, you will need to assign it a new intent. The simplest way to do this is to use the same Semantic Object as the original, and assign a new action. You can call the action anything you want.
In the Launchpad Designer web browser tool, create a custom catalog. Copy the original tile definition and target mapping to your custom catalog and change the action.
Here you can see the new tile definition with the action displayFactSheetExcel.
The target mapping needs to point to the same intent. Assign the parameter sap-appvar-id to your app variant's id. E.g. sap-appvar-id=customer.s4demo
Your catalog should now look something like this.
VERY IMPORTANT: Assign your tile catalog to your test user's business role (i.e. their PFCG security role), making sure to activate the authorizations to your app. If you haven't done this before mass maintenance of business roles for SAP Fiori launchpad explains the easiest way to do this.
Final test in your development environment
TIP: As usual when making any changes to a SAP Fiori app, make sure you have cleared the web browser cache before testing.
Provided your app has been assigned to test user correctly, you should find the new tile in their App Finder.
Select the tile to launch your app variant. You should now see your app launched and the Export to Excel buttons showing. Press Go and provided you have some data in the results list, the export buttons will be enabled.
Now test the download by choosing an Export option, such as Export As...
You see the usual download dialog indicating the data is being retrieved from the server.
And then your data is downloaded to the local device.
Becoming a SAP Fiori for SAP S/4HANA guru
You’ll find much more on our SAP Fiori for SAP S/4HANA wiki
Brought to you by the S/4HANA RIG
- SAP Managed Tags:
12 Comments
