cancel
Showing results for 
Search instead for 
Did you mean: 

How to add an icon in Fiori Elements List Report?

cwolter90
Participant
0 Kudos

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

Joseph_BERTHE
Active Contributor
0 Kudos

Hello

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

Regards,

Joseph

former_member562471
Discoverer
0 Kudos

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

ThomasMundt
Participant
0 Kudos

Same here. How can one show/hide an icon depending on expression binding or evaluating logical expression, e.g. show icon, if certain property is set like so: toCategrories/Id === "ABC" icon ("sap-icon://accept") === visible?

akshaya_p
Contributor
0 Kudos

is this resolved? I'm also having the same issue

Accepted Solutions (1)

Accepted Solutions (1)

cwolter90
Participant

Hi,

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

Best regards

Christian

Joseph_BERTHE
Active Contributor
0 Kudos

Thanks cwolter90

0 Kudos

hi Christian,

I have the same requirement. Can you tell me the procedure to add the icon and formatter in the new column made by extension?

Regards,

Rashika

0 Kudos

Hi,

The best solution as mentioned is to use formatters in your xml views for the ui controls.

The table can be extended by using fragments. And the behavior of ui control within the table can be controlled dynamincally using formatters. Please refer link Step 23: Custom Formatters - Best link formatters

Regards,

Anirudh HA

Answers (2)

Answers (2)

stefan_schreck
Participant

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

cwolter90
Participant
0 Kudos

Dear Stefan,

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

Best regards

Christian

former_member289890
Participant

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

Jocelyn_Dart
Product and Topic Expert
Product and Topic Expert
0 Kudos

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/

cwolter90
Participant
0 Kudos

Hello Jocelyn,

thank you for the answer, but your blog post describes the criticality feature of list reports. I can't use other icons that the status LEDs with ciritcality. This doesn't satisfy my requirements. I want to use any icon of the fiori icon explorer.

Best regards
Christian

Jocelyn_Dart
Product and Topic Expert
Product and Topic Expert

Hmmm yes in that case I would have expected the URI to work as well ... i.e. sap-icon://error

I'm asking our team. I'll let you know of any response.

A__R_
Explorer
0 Kudos

Hi!

Is there a solution in the meantime for displaying icons? (via Datafield in CDS + Annotation e.g. Ui.Lineitem ...)

former_member793180
Discoverer
0 Kudos

Are you able to display icon using CDS annotations ?