We had the requirement to display the rating indicator to determine the Employee’s ratings based on their performance, skills and their availability. Here I am trying to display rating indicator by using product details, also displaying the Images of respected product by forming the URL Via OData.

Let’s begin with example,

Here RAP Model also involved to preview the Application but the agenda is that we have to display the ratings for each product

Database Table: zproduct_details, zfile.

@EndUserText.label : 'Product details'
@AbapCatalog.enhancement.category : #NOT_EXTENSIBLE
@AbapCatalog.tableCategory : #TRANSPARENT
@AbapCatalog.deliveryClass : #A
@AbapCatalog.dataMaintenance : #RESTRICTED
define table zproduct_details {
  key client  : abap.clnt not null;
  key p_id    : sysuuid_x16 not null;
  p_name      : abap.char(50);
  p_cat       : abap.char(30);
  supplier    : abap.char(10);
  rating      : abap.int1;
  cuky_field  : abap.cuky;
  @Semantics.amount.currencyCode : 'zproduct_details.cuky_field'
  price       : abap.curr(10,2);
  available_p : abap.int1;
}

@EndUserText.label : 'Media Details'
@AbapCatalog.enhancementCategory : #NOT_CLASSIFIED
@AbapCatalog.tableCategory : #TRANSPARENT
@AbapCatalog.deliveryClass : #A
@AbapCatalog.dataMaintenance : #DISPLAY
define table zfile {
  key mandt    : mandt not null;
  @EndUserText.label : 'Filename'
  key filename : abap.char(100) not null;
  @EndUserText.label : 'Date'
  sdate        : abap.dats;
  @EndUserText.label : 'Time'
  stime        : abap.tims;
  @EndUserText.label : 'Extension'
  mime_type    : abap.char(20);
  value        : xstringval;
}

Define CDS root view entity by using product details table

@AbapCatalog.viewEnhancementCategory: [#NONE]
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Product details'
@Metadata.ignorePropagatedAnnotations: true
@ObjectModel.usageType:{
    serviceQuality: #X,
    sizeCategory: #S,
    dataClass: #MIXED
}
@Metadata.allowExtensions: true
@Search.searchable: true
define root view entity zi_product_details
  as select from zproduct_details
{
  key p_id                                                                      as PId,
      @Search:{ defaultSearchElement: true,
                fuzzinessThreshold: 0.9,
                ranking: #MEDIUM}
      p_name                                                                    as PName,
      @Search:{ defaultSearchElement: true,
           fuzzinessThreshold: 0.9,
           ranking: #MEDIUM}
      p_cat                                                                     as PCat,
      supplier                                                                  as Supplier,
      rating                                                                    as Rating,
      cuky_field                                                                as CukyField,
      @Semantics.amount.currencyCode: 'CukyField'
      price                                                                     as Price,
      available_p                                                               as Available,
      @Semantics.imageUrl: true
      cast(concat( concat('https://<<System>>:<<PORT>>/sap/opu/odata/SAP/ZSTREAM_OPERATION_SRV/zfileSet
(Mandt=''500'',Filename=',''),concat('''',concat(p_name,''')/$value') ) ) 
as abap.char( 256 ) ) as P_Image_URL

Here, in above code i just formatted image URL by using concatenation, in current situation I have implemented OData streaming methods.

then define one metadata file adress annotation for perticular properties

Metadata Extension :

@Metadata.layer: #CORE
@UI: {
headerInfo: {
typeName:       'Product Details',
typeNamePlural: 'Products',
title: { value: 'PName'}}}
annotate view zi_product_details with
{
  @UI.facet: [
{ id: 'Colleact',type: #COLLECTION,position: 10,purpose: #STANDARD,label: 'Product details' },
{ id: 'ID1',parentId: 'Colleact',type: #IDENTIFICATION_REFERENCE,position: 20,purpose: #STANDARD },
{ id: 'HeaderIno' ,type: #DATAPOINT_REFERENCE,purpose: #HEADER,targetQualifier: 'Rating' }]
 
 @UI.hidden: true
  PId;
  @UI:{lineItem: [{ position: 10,label: ' ',cssDefault.width: '15rem'}],
       identification: [{ position: 10,label: 'Product Image' }]}
  P_Image_URL;
  @UI:{lineItem: [{ position: 20,label: 'Product'}],
       identification: [{ position: 20,label: 'Product' }]}
  PName;
  @UI:{lineItem: [{ position: 30,label: 'Category'}],
       selectionField: [{ position: 20 }],
       identification: [{ position: 30,label: 'Category' }]}
  @EndUserText.label: 'Category'
  PCat;
  @UI:{lineItem: [{ position: 40,label: 'Supplier'}],
       selectionField: [{ position: 30 }],
       identification: [{ position: 40,label: 'Supplier' }]}
  @EndUserText.label: 'Supplier'
  Supplier;
  @UI:{lineItem: [{ position: 50,label: 'Average Ratings', type: #AS_DATAPOINT}],
       selectionField: [{ position: 40}],
       identification: [{ position: 50,label: 'Ratings' ,type: #AS_DATAPOINT}]}
  @UI.dataPoint:{ visualization: #RATING }
  @UI.selectionField: [{qualifier: 'Rating1'}]
    Rating;
  @UI:{identification: [{ position: 60,label: 'Currency' }]}
  CukyField;
  @UI:{lineItem: [{ position: 60,label: 'Product Price'  }],
       identification:[{ position: 70,label: 'Product Price'  }]}
  Price;
  @UI:{lineItem: [{ position: 70,label: 'Available Product'  }]}
  Available;
}

Make use of @UI datapoint.visualization annotation  to display the rating indicator.

Use datapoint reference inside facet by using that you are able to Display until it will display blank even if you are addressed @UI datapoint.visualization.

@UI.facet: [

{ id: ‘HeaderIno’ ,type: #DATAPOINT_REFERENCE,purpose: #HEADER,targetQualifier: ‘Rating’ }

]

@UI.lineitem.type : #AS_DATAPOINT is used to display in table table

@UI.identification.type : #AS_DATAPOINT is used to display in the object page

Formatting the Image URL :

Define a field to format the URL(Let’s say P_Image_URL) by using concatination.

here you have to provide system name and port number

With the help odata project, service have been create to retrive the image based on the product name

Implement your Stream Method to perform the operation

Create Stream:

method /IWBEP/IF_MGW_APPL_SRV_RUNTIME~CREATE_STREAM.

    data : ls_file type ZCL_ZSTREAM_OPERATION_mPC_EXT=>ts_zfile." Data Provider Secondary Class

    ls_file-filename = iv_slug.
    ls_file-mandt = sy-mandt.
    ls_file-sdate = sy-datum.
    ls_file-stime = sy-uzeit.

    ls_file-mime_type = is_media_resource-mime_type.
    ls_file-value = is_media_resource-value.

    INSERT INTO zfile VALUES ls_file.
    IF sy-subrc = 0.
      copy_data_to_ref(
        EXPORTING
          is_data = ls_file
        CHANGING
          cr_data = er_entity
      ).

    ENDIF.
  endmethod.

Get Stream:

METHOD /iwbep/if_mgw_appl_srv_runtime~get_stream.

    DATA : ls_file TYPE zcl_zstream_operation_mpc_ext=>ts_zfile.

    DATA : ls_stream  TYPE ty_s_media_resource.

    ASSIGN it_key_tab[ name = 'Filename' ] TO FIELD-SYMBOL(<lfs>).
    IF <lfs> IS ASSIGNED.
      SELECT SINGLE * FROM zfile INTO ls_file WHERE filename = <lfs>-value.
      IF sy-subrc = 0.

        ls_stream-mime_type = ls_file-mime_type.
        ls_stream-value = ls_file-value.
        copy_data_to_ref(
          EXPORTING
            is_data = ls_stream
          CHANGING
            cr_data = er_stream
        ).
      ENDIF.
    ENDIF.
  ENDMETHOD.

Behavior Defination :

managed implementation in class zbp_i_product_details unique;
strict ( 2 );

define behavior for zi_product_details //alias <alias_name>
persistent table zproduct_details
lock master
authorization master ( instance )
//etag master <field_name>
{
  create;
  update;
  delete;

  field ( numbering : managed, readonly ) PId;
  mapping for zproduct_details
    {
      PId       = p_id;
      PName     = p_name;
      PCat      = p_cat;
      Supplier  = supplier;
      Rating    = rating;
      CukyField = cuky_field;
      Price     = price;
      Available = available_p;
    }
}

Behavior Implementation:

CLASS lhc_zi_product_details DEFINITION INHERITING FROM cl_abap_behavior_handler.
  PRIVATE SECTION.

    METHODS get_instance_authorizations FOR INSTANCE AUTHORIZATION
      IMPORTING keys REQUEST requested_authorizations FOR zi_product_details RESULT result.

ENDCLASS.

CLASS lhc_zi_product_details IMPLEMENTATION.

  METHOD get_instance_authorizations.
  ENDMETHOD.

ENDCLASS.

Define Service .

Create Service binding for the Service.

Once you saved your service Publish your local service by clicking Publish Button.

Select your Entity Set to preview the Application

It will display the expected outcomes by displaying Rating indicator.

List report object page

Conclusion : 

this requirement basically helps in displaying the ratings and image in the fiori application.

Hope I find it will we be helpful. If any queries please welcome on comment sections.

Note: All the images are shown in this blog are the snapshots that are taken from my PC.

Regards,

Ramesh Punder