fiori elements image not showing

[patrick_weber11]

Hello,
on a ListReport page, I want to place a icon (image) to each line depending on some status value. To do so, I first create the imageURL like this. Please note that I also add @Semantics.imageUrl: true.

So inside my consumption view, I determine the image url like this

      case _Status.OrderIsReleased
      when 'X' then 'https://upload.wikimedia.org/wikipedia/commons/5/5d/White_flag_icon.svg'
      else ''
      end as statusIcon,

and I placed semantic infomation to the projection view. I already tried to place everything into the same view with no effect

define root view  entity ZC_abc as projection on ZI_PP_abc {
    key ManufacturingOrder,
    ...,
    ...,
    @Semantics.imageUrl: true
    statusIcon,

Lastly, I add this to my metadata extension to display the image.

  @UI.lineItem: [{ position: 10,  label:'', value:'statusIcon', importance: #HIGH }]
 ProductionPlant;

  

In the end, it always displays the image url as string instead of displaying the image itself. What's missing here?

[Andre_Fischer · Accepted solution]

Hi Patrick,

I assume that you have used OData V2 for your service binding.

I have created a similar service and found that it works when using OData V4 service binding.

V4 Service Binding

V2 Service Binding

Business object

@AccessControl.authorizationCheck: #CHECK
@Metadata.allowExtensions: true
@EndUserText.label: 'CDS View forDemoPicUrl'
define root view entity ZR_DemoPicUrlTP
  as select from zaf_image_tab
{
  key prod_uuid             as ProdUUID,
      prod_name             as ProdName,
      status                as Status,
      case status
      when 'X' then cast ('https://upload.wikimedia.org/wikipedia/commons/5/5d/White_flag_icon.svg' as abap.char(256) )
      else  cast( '' as abap.char(256) )
      end                   as StatusPicUrl,
      @Semantics.systemDateTime.createdAt: true
      created_at            as CreatedAt,
      created_by            as CreatedBy,
      last_changed_by       as LastChangedBy,
      @Semantics.systemDateTime.lastChangedAt: true
      last_changed_at       as LastChangedAt,
      @Semantics.systemDateTime.localInstanceLastChangedAt: true
      local_last_changed_at as LocalLastChangedAt,
      adt_link              as AdtLink

}<br>

Projection View

@AccessControl.authorizationCheck: #CHECK
@Metadata.allowExtensions: true
@EndUserText.label: 'Projection View forDemoPicUrl'
@ObjectModel.semanticKey: [ 'ProdName' ]
@Search.searchable: true
define root view entity ZC_DemoPicUrlTP
  as projection on ZR_DemoPicUrlTP
{

  key ProdUUID,
      @Search.defaultSearchElement: true
      @Search.fuzzinessThreshold: 0.90
      ProdName,
      Status,
      @Semantics.imageUrl: true
      StatusPicUrl,
      CreatedAt,
      CreatedBy,
      LastChangedBy,
      LastChangedAt,
      LocalLastChangedAt,
      AdtLink

}<br>

And BDEF

managed;
strict;
with draft;

define behavior for ZR_DemoPicUrlTP alias DemoPicUrl
implementation in class ZBP_R_DemoPicUrl unique
persistent table ZAF_IMAGE_TAB
draft table ZDEMOPICURL00D
etag master LocalLastChangedAt
lock master total etag LastChangedAt
authorization master( global )

{
  field ( readonly )
   ProdName,
   StatusPicUrl,
   CreatedAt,
   LastChangedAt,
   LocalLastChangedAt;<br>

Kind regards,

Andre

[patrick_weber11 · Accepted solution]

Hello Andre,

thank you for this example. You're right, I tried with oData V2 and according to my understanding of official documentation here
https://sapui5.hana.ondemand.com/sdk/#/topic/492bc791a7bd41cd9932fdf5d3aa2656.html it should also work with V2. There is a section covering V4 annotations, so i assume it should also work with V2.

However I defined a service binding with V4 and now it works. One issue still exists. If no image URL is set, it shows an icon. I was expecting that it doesn't show an image if no URL has been provided. Instead it shows this image