Skip to Content
Technical Articles
Author's profile photo Jocelyn Dart

Fiori elements – Percentage Progress Indicators

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:

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.

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:

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 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.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hi Jocelyn,


      Thanks for another great blog. But after watching videos on ABAP programming model for Fiori and the blogs in this space, I have  a question is it future? So, can we ignore UI5 and just concentrate on Annotations.


      Kindly reply it would be very helpful to us as we build up our skills and the skill of the team.




      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      Hi Prasenjit,

      So many of our SAP S/4HANA and SAP S/4HANA Cloud apps are now created this way.  I have even heard Product Owners tell us directly that they have moved away from freestyle apps to Fiori elements apps because of the savings in maintenance effort.

      So yes Fiori elements have a strong future direction.

      However I would not suggest you ignore SAPUI5. Remember that Fiori elements are meant to cover common use case patterns.  There will always be scenarios where freestyle apps are needed,

      Instead when you have an app design that fits one of these common use case patterns (we have 4 so far - list report, object page, overview page, and analytical list page) you at least consider using Fiori elements rather than creating a freestyle app.

      We also view this as aimed at ABAP Developers who would like to get involved in Fiori but are struggling to learn everything they need to become a web developer.  With Fiori elements they can focus attention on CDS Views and BOPF and let the Fiori elements templates do most of the hard work on the Fiori UI


      Author's profile photo Hitesh Parmar
      Hitesh Parmar

      Very Nice Blog :).

      I just want to get more info on the following:

      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%”.

      How to provide percentage as a property for Odata entity so that progress indicator directly shows %?


      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      Hi Hitesh

      You just need to provide a numeric value between 0 and 100.

      The % will be added automatically.



      Author's profile photo imtiaz farheen
      imtiaz farheen

      Hi Jocelyn,

      Your blogs are very educative and encouraging. I've recently started working on annotations and your blogs are truly information and helpful. I really appreciate your efforts behind such educative blogs..

      I have a clarification here, even I'm faced with the same issue, where I have a numeric value which is between 0 to 100 but still my progress bar shows just the plain value without any graphical representation nor the % symbol along with the value. I have even applied a CriticalityCondition over there to see some color codes along with the progress bar but even that piece of code doesn't really seem to have any effect. I might be missing out some details but I'm not sure what it is, could you please guide me if I'm missing out any information, or any insights would be gladly appreciated.

      Happy to learn!!


      Imtiaz N


      *Please refer to the screenshots attached for annotation modeler structure and output screen


      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      Hi Imtiaz
      It could be your version of SAPUI5 or backend system... always good to include the version details as these can make a difference.

      Just as a quality check...

      While decimals are usually ok, have you tried it *without* the decimal places in your completeness value?

      Have you tried a simpler approach without the colour coding - just your completeness value and the Target value? Always best to get the simple stuff working first then build on that.

      Have you checked the data type of your completeness?

      You might also want to raise a question on with tag Fiori - there are quite a lot of people using Fiori elements now so you are more likely to come across someone who has had a similar problem. There's only so much any one of us sees 🙂



      Author's profile photo Gaurav Karkara
      Gaurav Karkara

      Hi Imtiaz,

      I just faced the same problem. Could you solve it by trying any of the alternatives that Jocelyn suggested?



      Author's profile photo Andre Fischer
      Andre Fischer

      Hi Jocelyn,

      great blog.

      I am currently trying it out and might have spot a mismatch between the screen shot of the annotation modeler and the XML Editor where you define the data point.

      In XML it reads

      <Annotation Term="UI.DataPoint">
      <PropertyValue Property="Value" Path="TotalGrossAmount"/>

      Whereas in the screen shot you have choosen the value to be a string(i18n) rather than a path.

      When using string(i18n) it doesn't work. When choosing path it does.

      Best Regards,


      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      Well spotted! I recall that was a minor bug in the Annotation Modeler at the time I wrote the blog... I actually had to go and fix it in the XML editor to make it work. I didn't even notice that the modeler screenshot was still incorrect.

      Looks like we need an eagle-eyed badge!  🙂

      Author's profile photo Ranjitha Kuchchangi
      Ranjitha Kuchchangi

      Hi Jocelyn,

      We are trying to add the progress bar as a column in an Analytical List Application inside an Analytical Table. We do not see the column itself. Is it a constraint in the analytical table or is there anything extra that needs to be done.

      Thanks & Regards,


      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      Thanks Ranjitha! So nice to have all the hard work appreciated!

      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      Hi Ranjitha, Not that I can find listed in any known limitations. Perhaps Ashish Anand can assist?

      He has a great blog series on ALP on the Fiori elements wiki such as this one... Configuring table area of an analytical list page



      Author's profile photo Nilesh S. Puranik
      Nilesh S. Puranik

      Hello Jocelyn,

      Many thanks for such an informative blog. I however have an issue with DataPoint(s).

      I created a Data point and referenced it in the LineItem -> 'DataField For Annotations' to show a Progress Bar and it does as expected on the ListReport view.

      However, in the Object page, the same DataPoint is bydefault visible. Infact, All the DataPoints that i declare under Local Annotations, are visible by default on Object Page in HeaderSection.

      I only want to see the ones that i referenced in HeaderInfo or HeaderFacets on Object Page.

      Is there anything you think i may be missing ?

      Thanks in advance!



      Nilesh Puranik

      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      Hi Nilesh, As you can see it is very difficult for authors to respond to specific issues in blog comments.  It can be quite some time when you are relying on one very busy person to get to your comment. Please post a question on where many others in the SAP Community can help you.  Lots of customers, partners, independents, and SAP employees who already use SAP Fiori elements are there to help you!