Skip to Content

How to add an icon in Fiori Elements List Report?

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)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

4 Answers

  • avatar image
    Former Member
    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" />
    </Annotations>

    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,

    Stefan

    Add comment
    10|10000 characters needed characters exceeded

    • Hi Stefan,

      Thanks for the answer.

      How can we dynamically display image for each line item on a list report. I understand the annotation part of list report but, where to store image ? any hint on how to get unique url for each image ?

      I have list report using Hana xsodata. In this case, how to store image on Hana DB? how to get url for each image from Hana DB?

      Thanks,

      Tanveer

  • Oct 30, 2017 at 03:04 PM

    Hello

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

    Regards,

    Joseph

    Add comment
    10|10000 characters needed characters exceeded

  • Mar 10 at 12:50 AM

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

    https://blogs.sap.com/2017/08/09/fiori-elements-status-icons-and-semantic-colors/

    Add comment
    10|10000 characters needed characters exceeded

  • Sep 10 at 07:36 AM

    Hello,

    i've the same problem with object pages.

    I try to use the iconurl property for custom sap icons and other url icons, but it doesn't work.

    It seems that the property "IconURL" has no effect.

    Best Regards

    Said

    Add comment
    10|10000 characters needed characters exceeded