Skip to Content
Technical Articles

Fiori elements – Percentage Progress Indicators

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.

You must be Logged on to comment or reply to a post.
  • 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.




    • 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


  • 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 %?


      • 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


        • 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 🙂



  • 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,


    • 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!  🙂

  • 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,


  • 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