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:
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!
*****
Continuing my series on Fiori elements … you’ll find more blogs in the Fiori elements wiki.
A simple way to add a little emphasis and pizazz to your Fiori elements apps is to add status icons and semantic colors to a text field. Here we show how to do this using a List Report column as the example.
When you want to attract your business users’ attention, UI.Criticality is one of the easiest annotations you can use to add some visual bling to your Fiori elements apps. It’s a great option for adding a status icon and a little semantic colour to a simple text or date field.
In this example status icons and semantic colors have been added to the text property Overall Status. The original property text values Paid, Cancelled, New, and Delivered have been transformed with a status icon and semantic color.
Accessibility note: Notice that we automatically apply a different color *and* a different icon rather than relying on color alone. This means that even users with red-green color-blindness can easily distinguish the criticality of different statuses. You can find more background on this topic in the success criterion of the Web Content Accessibility Guidelines.
Tip: What do we mean by semantic color? Certain colors have intrinsic meaning in many countries and cultures. In business some of the most recognized colors are those often referred to as “traffic light” colors:
And we add a 4th Grey meaning neutral.
There are 3 easy steps to using the criticality annotation:
Let’s get to it!
There are 4 possible criticality values. These map to status icons and semantic colors as follows:
Often the simplest way to map your criticality value to your target field is to map it to a separate calculated field of the same OData Service entity.
For example, if you are using a ABAP CDS View exposed as an OData Service, you could map the values of a text property OverallStatus of the entity SalesOrder to a new field Criticality by adding a simple CASE statement in your CDS View such as this:
Tip: Always make sure you activate and test your OData Service before adding the new value to your Fiori elements app.
All you need to do now is to add the criticality annotation to your target field in your Fiori element app. You can do this:
For example if your Target Field is set up as a UI.DataField of a Fiori element List Report app, you can add your criticality annotation in a metadata extension of the CDS View like this:
Or in the SAP Cloud Platform Web IDE you can add the criticality to your local annotations file using the Annotation Modeler to assign the Criticality property as highlighted in this example:
Or directly using the XML editor of your local annotations XML file like this:
Now just run your app!
If you are interested in Fiori elements you might also like to look at some of our videos on Youtube such as:
If you want to find out more on how to use the Annotation Modeler, you might like to look at some of our Annotation Modeler in SAP Web IDE 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:
And you can find more information on Developing apps with SAP Fiori elements in the SAPUI5 SDK and on the ABAP Programming Model for Fiori in the SAP Help Portal.
Screenshots shown on:
Brought to you by 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!
*****
Continuing my series on Fiori elements … you’ll find more blogs in the Fiori elements wiki.
A simple way to add a little emphasis and pizazz to your Fiori elements apps is to add status icons and semantic colors to a text field. Here we show how to do this using a List Report column as the example.
When you want to attract your business users’ attention, UI.Criticality is one of the easiest annotations you can use to add some visual bling to your Fiori elements apps. It’s a great option for adding a status icon and a little semantic colour to a simple text or date field.
In this example status icons and semantic colors have been added to the text property Overall Status. The original property text values Paid, Cancelled, New, and Delivered have been transformed with a status icon and semantic color.
Accessibility note: Notice that we automatically apply a different color *and* a different icon rather than relying on color alone. This means that even users with red-green color-blindness can easily distinguish the criticality of different statuses. You can find more background on this topic in the success criterion of the Web Content Accessibility Guidelines.
Tip: What do we mean by semantic color? Certain colors have intrinsic meaning in many countries and cultures. In business some of the most recognized colors are those often referred to as “traffic light” colors:
- Red meaning stop or negative
- Yellow meaning be careful or warning,
- Green meaning go or positive
And we add a 4th Grey meaning neutral.
There are 3 easy steps to using the criticality annotation:
- Know how the criticality value maps to status icons and semantic colours
- Map the criticality value to your target field
- Add the UI.Criticality annotation to your target field
Let’s get to it!
Understanding Criticality Values
There are 4 possible criticality values. These map to status icons and semantic colors as follows:
| Criticality Value | Meaning | Colour | Icon |
| 0 | Neutral | Grey |  |
| 1 | Negative | Red |  |
| 2 | Critical | Yellow |  |
| 3 | Positive | Green |  |
Map the Criticality Value to your Target Field
Often the simplest way to map your criticality value to your target field is to map it to a separate calculated field of the same OData Service entity.
For example, if you are using a ABAP CDS View exposed as an OData Service, you could map the values of a text property OverallStatus of the entity SalesOrder to a new field Criticality by adding a simple CASE statement in your CDS View such as this:
Tip: Always make sure you activate and test your OData Service before adding the new value to your Fiori elements app.
Add the Criticality Annotation to your Target Field
All you need to do now is to add the criticality annotation to your target field in your Fiori element app. You can do this:
- In a Metadata extension of your CDS View
- The recommended approach
- Inline in your CDS View
- Possible but not recommended – an easy option for sandpit scenarios
- In the local annotations file of your Fiori element app
- Possible & a useful option if you don’t have access to change the OData Service or you are reusing an existing OData Service in a new app and don’t want to impact any existing apps
For example if your Target Field is set up as a UI.DataField of a Fiori element List Report app, you can add your criticality annotation in a metadata extension of the CDS View like this:
Or in the SAP Cloud Platform Web IDE you can add the criticality to your local annotations file using the Annotation Modeler to assign the Criticality property as highlighted in this example:
Or directly using the XML editor of your local annotations XML file like this:
Now just run your app!
Take your Fiori elements app to the Next Level
If you are interested in Fiori elements you might also like to look at some of our videos on Youtube such as:
- 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 want to find out more on how to use the Annotation Modeler, you might like to look at some of our Annotation Modeler in SAP Web IDE 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
And you can find more information on Developing apps with SAP Fiori elements in the SAPUI5 SDK and on the 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 S/4HANA RIG
- SAP Managed Tags:
49 Comments
