Continuing my series on Fiori elements … you’ll find more blogs in the Fiori elements wiki.
Progress indicators are an effective way to show progress towards a goal or to compare actual and target values. Here we see how to apply percentage progress bars using a Fiori element List Report app as an example.
When you want to your business users’ to understand how close they are to a goal, progress indicators are an easy to understand addition to your Fiori elements apps. Users can see and understand at a glance how far they (or a business object) have come or have yet to go to an amount or value.
Tip: Like status icons you can also add some semantic colouring for emphasis. If you are interested in this you might like to refer to Fiori elements – Status Icons and Semantic Colors
In the example below % Gross of Target column compares the Total Gross Amount to a static target value of 30K. Notice that order 500000005 exceeds 30K and so shows as a full 100% bar.
There are just a few easy steps to using the percentage progress bars:
- Calculate your percentage
- Create a datapoint annotation to visualize your percentage as a progress bar
- Place your percentage progress bar in your app by referencing the datapoint annotation
Let’s get to it!
Calculating the Percentage
You can of course provide the percentage as a property of your OData entity. Ideally it should be between 0 and 100. If you return the percentage value, then the progress indicator will show the percentage as the text, e.g. “75%”.
Alternatively you can have the UI calculate the percentage, in which case the progress indicator will display the actual and target values as a <actual value> of <target value> text, e.g. “15 of 20”.
You can compare a value or amount property from your OData entity to a static target value or amount. The static value can be set from a property of an OData Service entity or set in the app itself.
Or you can compare your value or amount to a dynamic target value, by nominating one OData property as the value and another property as the dynamic target value. Of course the two properties need to be comparable, i.e. they should both be values or both be amounts so you are comparing like to like.
The calculation does not need to return a whole number – decimals are ok.
Nor does it need to be limited to 100% – if the percentage exceeds 100% it will simply show that the progress bar is full.
The following example from the SAPUI5 Software Development Kit documentation on Adding a Progress Indicator to a Table shows the percentage and absolute target value variations side by side.
Creating a DataPoint annotation for the Progress bar
DataPoint is a term borrowed from the world of analytics. A datapoint is a single fact or measurement that can be represented numerically or graphically. For our percentage progress bar that single measurement is our percentage value.
For Fiori elements apps, a DataPoint is also a special annotation that can be defined once and then reused in multiple places in the same app. For instance you might want to show the progress bar in both your List Report and in your Object Page.
So you can create your DataPoint once as its own annotation and then reference your DataPoint annotation wherever you need to use it.
As with most UI annotations you can create them in your OData Service or in a local annotations XML file of your Fiori element app.
In the examples below you can see what this looks like for comparing a value to a static target.
In a local annotations file it looks like this in the Annotation Modeler:
Whoopsie! There is a small error in the screenshot above due to a temporary bug in annotation modeler. The row Value* should be showing Expression Type “Path” and not “String(i18n)”. Thanks to Andre Fischer for spotting this one.
And in the XML like this:
If you want to include it in an OData Service based on ABAP CDS as usual the recommended way is to include the DataPoint annotation in a metadata extension of your CDS View. You can actually include both the datapoint and the reference to the data point together.
Tip: You might be wondering what to do if you have more than one data point annotation? Just use the Qualifier annotation property to distinguish between them.
Referencing the DataPoint annotation in your app
Once you have created your DataPoint annotation you need to reference it wherever you want it to appear.
Once again you can do that by specifying the annotation in your OData Service or in your local annotations XML file.
Here in the annotation modeller it looks like this:
Or in the annotations XML file like this:
Tip: If you have used a Qualifier then just add # your qualifier id to the annotation path, e.g. if your qualifier id is GrossTargetProgress then your AnnotationPath=”@UI.DataPoint#GrossTargetProgress”
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
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.