Icons in List Report RAP

[Nayanakumar]

Introduction to Icons in a List Report in RAP (ABAP)
Icons play a crucial role in enhancing the user experience of SAP Fiori applications, particularly in List Reports developed using the ABAP RESTful Application Programming Model (RAP). They provide visual indicators that help users quickly identify the status, priority, or type of data without reading through text fields.

In RAP-based List Reports, icons are typically used to: Represent different statuses (e.g., approved, pending, rejected).Indicate priority levels (e.g., high, medium, low).Differentiate document types (e.g., invoice, sales order, purchase order).Enhance usability by providing an intuitive UI.

How to Add Icons in a RAP List Report
In RAP, icons are generally added using semantic data annotations in the CDS (Core Data Services) view. The main approach to integrating icons involves:

• Using the SAP Icon Library (e.g., sap-icon://accept, sap-icon://error).
• Defining an Icon Field in the CDS view.
• Annotating the Field to be used as an icon in the Fiori List Report

Business Scenario.

static Icons.

For  purchase order details Particular vendor id with logo displayed in list report.

Dynamic Icons.

Based on PO status display the symbols of  accepted or rejected.

Implementation.

Static ICONS-For to display the vendor logo , while creating data is fetched from vendor table ,based on vendors id displayed in the report.

Dynamic ICONS-for the status implemented the actions Setapprove and Setreject  when the status is Approved or rejected Display the icons Dynamically.

Database tables.

@EndUserText.label : 'purchase orders'
@AbapCatalog.enhancement.category : #NOT_EXTENSIBLE
@AbapCatalog.tableCategory : #TRANSPARENT
@AbapCatalog.deliveryClass : #A
@AbapCatalog.dataMaintenance : #RESTRICTED
define table znp_dt_ekko1 {

  key client          : mandt not null;
  key purchaseorderid : zebeln not null;
  supplierid          : lifnr;
  @Semantics.amount.currencyCode : 'znp_dt_porders.currency'
  totalamount         : wrbtr;
  currency            : waers;
  orderdate           : erdat;
  quantity            : abap.dec(13,3);
  status              : znp_de_postatus;
  tax_unit            : meins;
  @Semantics.quantity.unitOfMeasure : 'znp_dt_ekko1.tax_unit'
  tax_rate            : znp_de_kebtr;
  @Semantics.amount.currencyCode : 'znp_dt_porders.currency'
  tax_amount          : wrbtr;
  @Semantics.amount.currencyCode : 'znp_dt_porders.currency'
  po_amount           : wrbtr;
  status_icon         : znp_de_icon;
  logo                : znp_de_icon;
  created_by          : abp_creation_user;
  last_changed_by     : abp_locinst_lastchange_user;
  last_changed_at     : abp_locinst_lastchange_tstmpl;

}

Entity.

Interface view.

@AbapCatalog.viewEnhancementCategory: [#NONE]
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'inteface view for po'
@Metadata.ignorePropagatedAnnotations: true
@ObjectModel.usageType:{
    serviceQuality: #X,
    sizeCategory: #S,
    dataClass: #MIXED
}
define root view entity znp_i_eko as select from znp_dt_ekko1
 association [0..1] to I_CurrencyStdVH               as _Currency on $projection.Currency = _Currency.Currency
{
 key purchaseorderid as Purchaseorderid,
  supplierid as Supplierid,

  logo as Logo,
  @Semantics.amount.currencyCode: 'Currency'
  totalamount as Totalamount,
  @Semantics.amount.currencyCode: 'Currency'
  tax_amount as TaxAmount,
  @Semantics.amount.currencyCode: 'Currency'
  po_amount as PoAmount,
  currency as Currency,
  orderdate as Orderdate,

  status as Status,
  

  status_icon as StatusIcon,
  quantity,
  
  

  
  tax_unit as TaxUnit,
  @Semantics.quantity.unitOfMeasure: 'TaxUnit'
  tax_rate as TaxRate,
 
  
  
  
  @Semantics.user.createdBy: true
  created_by as CreatedBy,
  @Semantics.user.localInstanceLastChangedBy: true
  last_changed_by as LastChangedBy,
  @Semantics.systemDateTime.localInstanceLastChangedAt: true
  last_changed_at as LastChangedAt,
  _Currency
 
}

In the Projection view add the annnotation @Semantics.imageUrl: true

For the particular icon field.

@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'projection view for po'
@Metadata.ignorePropagatedAnnotations: true
@Metadata.allowExtensions: true
define root view entity znp_c_eko provider contract transactional_query as 
projection on znp_i_eko
{
   key Purchaseorderid,
    Supplierid,
  @Semantics.imageUrl: true
   Logo,
  Totalamount,
   TaxAmount,
  PoAmount,
@Semantics.currencyCode: true
  Currency,
  Orderdate,
  quantity,
    Status,
  @Semantics.imageUrl: true
  StatusIcon,
  TaxRate,
  @Semantics.unitOfMeasure: true
  TaxUnit,
  CreatedBy,
  LastChangedBy,
  LastChangedAt,
  _Currency

}

metadata Extension.

@Metadata.layer: #CORE
annotate entity znp_c_eko
    with 
{
 .facet: [ {
    label: 'PO Information', 
    id: 'POinfo', 
    purpose: #STANDARD, 
    position: 10 , 
    type: #IDENTIFICATION_REFERENCE
  } ]
  .identification: [ {
    position: 10 
  } ]
  .lineItem: [ {
    position: 10 
  } ]
  Purchaseorderid;
  
  
  
  
  
  .identification: [ {
    position: 20 
  } ]
  
  .lineItem: [ {
    position: 20 
  } ]
  @Consumption.valueHelpDefinition: [{ entity : { name: 'znp_i_vendor1' , element: 'Supplierid' } }]
 
  
  Supplierid;
  
  
  
   .identification: [ {
    position: 25 ,label: 'Logo'
  } ]
  .lineItem: [ {
    position: 25 , label: 'Logo'
  } ]
 
  Logo;
  
  
  
   .identification: [ {
    position: 30  , label: 'Staus'
  } ]
  
  .lineItem: [ {
    position: 30 , label: 'Staus'
  } ]
 
 
  Status;
  
  
  .identification: [ {
    position: 35 , label: 'Status'
  } ]
  .lineItem: [ {
    position: 35 
  }  , { type: #FOR_ACTION , dataAction: 'Setapprove' ,label: 'Approve' },
   { type: #FOR_ACTION , dataAction: 'Setreject' ,label: 'Reject' }
  
  ]
 
  StatusIcon;
  
  .identification: [ {
    position: 40 , label: 'Total amount'
  } ]
  .lineItem: [ {
    position: 40  , label: 'Total amount'
  } ]
 
  Totalamount;
  
  
  
   .identification: [ {
    position: 45 , label: 'Taxamount'
  } ]
  .lineItem: [ {
    position: 45 , label: 'Taxamount'
  } ]

  TaxAmount;
  
  .identification: [ {
    position: 50 , label: 'Po amount'
  } ]
  .lineItem: [ {
    position: 50 , label: 'Po amount'
  } ]
  
  PoAmount;
  

  @Consumption.valueHelpDefinition: [ {
    entity.name: 'I_CurrencyStdVH', 
    entity.element: 'Currency', 
    useForValidation: true
  } ]
  Currency;
  
  
  .identification: [ {
    position: 55 
  } ]
  .lineItem: [ {
    position: 55
  } ]

  Orderdate;
  
 
  .identification: [ {
    position: 60  , label: 'Taxrate'
  } ]
  .lineItem: [ {
    position: 60 , label: 'Taxrate'
  } ]

  TaxRate;
  
 .lineItem: [{ position: 62 }]
 TaxUnit;
  
  .identification: [ {
    position: 65
  } ]
  .lineItem: [ {
    position: 65
  } ]
 
  CreatedBy;
  
  .identification: [ {
    position: 70
  } ]
  .lineItem: [ {
    position: 70
  } ]
 
  LastChangedBy;
  
  .identification: [ {
    position: 75
  } ]
  .lineItem: [ {
    position: 75 
  } ]
 
  LastChangedAt;
  
  
    
}

Behavior Definition.

projection;
strict ( 2 );
use draft;
define behavior for znp_c_eko //alias <alias_name>
{
  use create;
  use update;
  use delete;

use action Activate;
use action Discard;
use action Edit;
use action  Prepare ;
use action  Resume;

  use action Setapprove ;
  use action Setreject ;
}

projection View Behavior Definition.

projection;
strict ( 2 );
use draft;
define behavior for znp_c_eko //alias <alias_name>
{
  use create;
  use update;
  use delete;

use action Activate;
use action Discard;
use action Edit;
use action  Prepare ;
use action  Resume;

  use action Setapprove ;
  use action Setreject ;
}

Class.

CLASS lhc_znp_i_eko DEFINITION INHERITING FROM cl_abap_behavior_handler.
  PRIVATE SECTION.

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

    METHODS create FOR MODIFY
      IMPORTING entities FOR CREATE znp_i_eko.

    METHODS update FOR MODIFY
      IMPORTING entities FOR UPDATE znp_i_eko.

    METHODS delete FOR MODIFY
      IMPORTING keys FOR DELETE znp_i_eko.

    METHODS read FOR READ
      IMPORTING keys FOR READ znp_i_eko RESULT result.

    METHODS lock FOR LOCK
      IMPORTING keys FOR LOCK znp_i_eko.
    METHODS get_instance_features FOR INSTANCE FEATURES
      IMPORTING keys REQUEST requested_features FOR znp_i_eko RESULT result.

    METHODS setapprove FOR MODIFY
      IMPORTING keys FOR ACTION znp_i_eko~setapprove RESULT result.

    METHODS setreject FOR MODIFY
      IMPORTING keys FOR ACTION znp_i_eko~setreject RESULT result.
      METHODS earlynumbering_create FOR NUMBERING
    IMPORTING entities
                FOR CREATE znp_i_eko.

ENDCLASS.

CLASS lhc_znp_i_eko IMPLEMENTATION.

  METHOD get_instance_authorizations.
  ENDMETHOD.

  METHOD create.


  DATA(LS_E) = VALUE #( ENTITIES[ 1 ] OPTIONAL ).


  ZCL_NP_AUX=>get_data(
    EXPORTING
      lv_id  = LS_E-Supplierid
    IMPORTING
      ls_tab = DATA(LS_L)
  ).

  LS_E-Logo = LS_L-logo.




  ZCL_NP_AUX=>gs_tab = CORRESPONDING #( LS_E ).






  ENDMETHOD.

  METHOD update.


data : lt_update TYPE TABLE of znp_dt_ekko1,
       lt_update_n TYPE TABLE of znp_dt_ekko1,
       lt_update_x TYPE table of znp_s_control.


  lt_update = CORRESPONDING #(  entities mapping from  entity ) .
  lt_update_x = CORRESPONDING #( entities mapping from entity using control ).


if lt_update is not initial.

SELECT from znp_dt_ekko1 FIELDS *
FOR ALL ENTRIES IN _update
WHERE purchaseorderid = _update-purchaseorderid
INTO TABLE (LT_UPDATE_O).


ENDIF.




lt_update_n = VALUE #(

FOR x = 1 WHILE x <= lines( lt_update )
let ls_update = VALUE #( lt_update[ 1 ] OPTIONAL )
    ls_update_x = VALUE #( lt_update_x[ 1 ] OPTIONAL )
    ls_update_o = VALUE #( lt_update_o[ purchaseorderid = ls_update-purchaseorderid ] )


    in (

    purchaseorderid = ls_update-purchaseorderid
    currency = cond #( when ls_update_x-currency is not initial
                         THEN ls_update-currency
                         else ls_update_o-currency

    )

    logo = cond #( when ls_update_x-logo is not initial
                         THEN ls_update-logo
                         else ls_update_o-logo

    )

    orderdate = cond #( when ls_update_x-orderdate is not initial
                         THEN ls_update-orderdate
                         else ls_update_o-orderdate

    )

    po_amount = cond #( when ls_update_x-po_amount is not initial
                         THEN ls_update-po_amount
                         else ls_update_o-po_amount

    )

    quantity = cond #( when ls_update_x-quantity is not initial
                         THEN ls_update-quantity
                         else ls_update_o-quantity

    )

    status = cond #( when ls_update_x-status is not initial
                         THEN ls_update-status
                         else ls_update_o-status

    )

    status_icon = cond #( when ls_update_x-status_icon is not initial
                         THEN ls_update-status_icon
                                                  else ls_update_o-status_icon

    )

    supplierid = cond #( when ls_update_x-supplierid is not initial
                         THEN ls_update-supplierid
                         else ls_update_o-supplierid

    )


    tax_amount = cond #( when ls_update_x-tax_amount is not initial
                         THEN ls_update-totalamount
                         else ls_update_o-tax_amount

    )


    tax_rate = cond #( when ls_update_x-tax_rate is not initial
                         THEN ls_update-tax_rate
                         else ls_update_o-tax_rate

    )


    tax_unit = cond #( when ls_update_x-tax_unit is not initial
                         THEN ls_update-tax_unit
                         else ls_update_o-tax_unit

    )

    totalamount = cond #( when ls_update_x-totalamount is not initial
                         THEN ls_update-totalamount
                         else ls_update_o-totalamount

    )

    )
    )
    .
zcl_np_aux=>gs_tab_u = lt_update_n[ 1 ].



  ENDMETHOD.

  METHOD delete.
  ENDMETHOD.

  METHOD read.

  SELECT from znp_dt_ekko1 FIELDS *
  INTO TABLE (lt_tab).



  RESult =  CORRESPONDING #( lt_tab MAPPING TO ENTITY  ).



  ENDMETHOD.

  METHOD lock.
  ENDMETHOD.

  METHOD get_instance_features.



  read ENTITy  znp_i_eko
  FIELDS ( Purchaseorderid Status )
  WITH CORRESPONDING #( keys )
  RESULT data(lt_porders).




 result = VALUE #( for ls_po in lt_porders (

 %key = ls_po-%key
 %features-%action-Setapprove = cond #( when ls_po-Status = 'Rejected'
                                         THEN if_abap_behv=>fc-o-enabled
                                         else if_abap_behv=>fc-o-disabled )

 %features-%action-Setreject = cond #( when ls_po-Status = 'Approved'
                                         THEN if_abap_behv=>fc-o-enabled
                                         else if_abap_behv=>fc-o-disabled )
 )





 ) .
  ENDMETHOD.

  METHOD Setapprove.


  data(ls_k) = keys[ 1 ].

  data(lv_icon) = 'sap-icon://accept'.


  MODIFY ENTITIES OF znp_i_eko IN LOCAL MODE
  ENTITY znp_i_eko
  UPDATE FIELDS ( StatusIcon Status )
  WITH VALUE #(  ( %tky = ls_k-%tky
                   Status = 'Approved'
                   StatusIcon = lv_icon

  ) ).

  READ ENTITIES OF znp_i_eko IN LOCAL MODE
  ENTITY znp_i_eko
  ALL FIELDS WITH CORRESPONDING #( KEYS )
  RESULT DATA(LT_ORDERS).


  result =  VALUE #( FOR LS_ORDERS IN LT_orders ( %tky = ls_orders-%tky
                                               %param = ls_orders )  ).




  ENDMETHOD.

  METHOD Setreject.


  data(ls_k) = keys[ 1 ].

  data(lv_icon) = 'sap-icon://decline'.


  MODIFY ENTITIES OF znp_i_eko IN LOCAL MODE
  ENTITY znp_i_eko
  UPDATE FIELDS ( StatusIcon Status )
  WITH VALUE #(  ( %tky = ls_k-%tky
                   Status = 'Rejected'
                   StatusIcon = lv_icon

  ) ).

  READ ENTITIES OF znp_i_eko IN LOCAL MODE
  ENTITY znp_i_eko
  ALL FIELDS WITH CORRESPONDING #( KEYS )
  RESULT DATA(LT_ORDERS).


  result =  VALUE #( FOR LS_ORDERS IN LT_orders ( %tky = ls_orders-%tky
                                               %param = ls_orders )  ).


  ENDMETHOD.

  METHOD earlynumbering_create.

data(ls_e) = VALUE #( entities[ 1 ] OPTIONAL ).

  zcl_np_aux=>get_poid(
    IMPORTING
      ev_id = data(poid)
  ).

mapped-znp_i_eko = VALUE #(  ( %cid = ls_e-%cid %is_draft = ls_e-%is_draft   Purchaseorderid = poid ) ).



  ENDMETHOD.

ENDCLASS.

CLASS lsc_ZNP_I_EKO DEFINITION INHERITING FROM cl_abap_behavior_saver.
  PROTECTED SECTION.

    METHODS finalize REDEFINITION.

    METHODS check_before_save REDEFINITION.

    METHODS save REDEFINITION.

    METHODS cleanup REDEFINITION.

    METHODS cleanup_finalize REDEFINITION.

ENDCLASS.

CLASS lsc_ZNP_I_EKO IMPLEMENTATION.

  METHOD finalize.
  ENDMETHOD.

  METHOD check_before_save.
  ENDMETHOD.

  METHOD save.

  IF ZCL_NP_AUX=>gs_tab IS NOT INITIAL.

  INSERT ZNP_DT_EKKO1 FROM @ZCL_NP_AUX=>gs_tab.
  ENDIF.

  if ZCL_NP_AUX=>gs_tab_u is not initial.

  update  znp_dt_ekko1 from @zcl_np_aux=>gs_tab_u.

 ENDIF.

  ENDMETHOD.

  METHOD cleanup.
  ENDMETHOD.

  METHOD cleanup_finalize.
  ENDMETHOD.



ENDCLASS.


METHOD GET_DATA.
SELECT SINGLE FROM ZNP_DT_VENDOR FIELDS * WHERE supplierid = _ID
INTO _TAB .
ENDMETHOD.

 Vendors Logos inserted in the Table from the other class.

data : lt_tab TYPE TABLE of znp_dt_vendor.
APPEND VALUE #(  supplierid = '3456781200'
 logo = 'https://raw.githubusercontent.com/SAP-samples/fiori-elements-opensap/main/week1/images/airlines/European-Airlines-logo.png'  )  to lt_tab.

APPEND VALUE #(  supplierid = '1256701900'
 logo = 'https://raw.githubusercontent.com/SAP-samples/fiori-elements-opensap/main/week1/images/airlines/Fly-Africa-logo.png'  )  to lt_tab.


APPEND VALUE #(  supplierid = '1234563200'
 logo = 'https://raw.githubusercontent.com/SAP-samples/fiori-elements-opensap/main/week1/images/airlines/Green-Albatross-logo.png'  )  to lt_tab.


APPEND VALUE #(  supplierid = '8073827405'
 logo = 'https://raw.githubusercontent.com/SAP-samples/fiori-elements-opensap/main/week1/images/airlines/Sunset-Wings-logo.png'  )  to lt_tab.

INSERT znp_dt_vendor from TABLE @LT_tab.

Output.

Vendor Logo is Displayed in the List report.

Approve status - select the record and click on Approve button status change to Approved .

Rejected status - select the record and click on Reject button status change to Rejected.