Skip to Content
0

How to add an icon in Fiori Elements List Report?

Mar 23, 2017 at 08:28 AM

749

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

avatar image
Former Member
Apr 07, 2017 at 08:19 AM
2

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

Show 2 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. http://www.example.org/image.jpeg) but not for an icon from the UI5 Icon Explorer (e.g. "sap-icon://error").

Best regards

Christian

0

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

0
Joseph BERTHE Oct 30, 2017 at 03:04 PM
0

Hello

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

Regards,

Joseph

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

Hi,

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

Best regards

Christian

0
0
Jocelyn Dart
Mar 10 at 12:50 AM
0

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/

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

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

0
Christian Wolter

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.

1