Skip to Content

How to add an icon in Fiori Elements List Report?

Mar 23, 2017 at 08:28 AM


avatar image

Dear SAP community,

I want to display an icon in a Fiori Elements List Report. The icon should be dynamically selected by the value of a field.

What I tried to achieve this:

  1. I added an additional string field to my odata-entity where I put the icon-uri (e.g. "sap-icon://error"). In the annotation modeler in Web IDE I referenced the new field in the propery IconUrl. Nothing happened.

  2. Writing a fixed icon uri into the IconUrl has also no effect.

  3. I tried to use the UI annotation "IsImageURL". This works with an url to an image, but not with an icon uri (e.g. "sap-icon://error").

It could be possible to inject a new column into the sap.m.table through an extension controller, but I guess this not the aim of a list report.

Any idea how to display an icon into the list report?

Best regards

Christian Wolter

iconurl.jpg (27.2 kB)
iconurl2.jpg (10.0 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Stefan Schreck
Apr 07, 2017 at 08:19 AM

Hello Christian,

In order to get a picture rendered you need two things:

First, a property annotation UI.IsImageUrl for the property that comprises the URL, e.g.

<Annotations Target="STTA_PROD_MAN.STTA_C_MP_ProductType/ProductPictureURL">
<Annotation Term="UI.IsImageUrl" />

Second, a UI.DataField (as a record of your LineItems) with a path pointing to the variable described before:

<Annotation Term="UI.LineItem">
... <Record Type="UI.DataField"> <PropertyValue Property="Value" Path="ProductPictureURL"/> <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/> </Record> ... <Annotation>
Have fun,


Show 1 Share
10 |10000 characters needed characters left characters exceeded

Dear Stefan,

I tried something similiar, but this works only for a "normal" image URL (e.g. but not for an icon from the UI5 Icon Explorer (e.g. "sap-icon://error").

Best regards


Joseph BERTHE Oct 30, 2017 at 03:04 PM


Did you find a solution ? I have the same issue.



Show 2 Share
10 |10000 characters needed characters left characters exceeded


the "solution" was extending the list report. You can inject a new column with the icon and a formatter.

Best regards


Jocelyn Dart
Mar 10 at 12:50 AM

How to use icons in List Reports is explained in Fiori elements - Status Icons and Semantic Colors

10 |10000 characters needed characters left characters exceeded