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 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:
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.
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.
Screenshots shown on:
Source: https://blogs.sap.com/2017/08/27/fiori-elements-export-to-microsoft-excel-via-the-ui-adaptation-editor/comment-page-1/#comment-443825
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
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
- 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
Screenshots shown on:
- ABAP Development Tools on Eclipse Neon
- Web IDE Version: 170720
- SAPUI5 version 1.46.11
Source: https://blogs.sap.com/2017/08/27/fiori-elements-export-to-microsoft-excel-via-the-ui-adaptation-editor/comment-page-1/#comment-443825
Nenhum comentário:
Postar um comentário