SAP Fiori Elements裡Drop down list的實現原理

i042416發表於2020-09-18

In the blog  Step by Step to create CDS view through SmartTemplate + WebIDE and  Create a CRM Service Order Fiori application within a couple of minutes we get an Fiori application generated which needs several fine-tuning on appearance. For example, the status field is by default rendered as a pure input field with technical status code like “OPEN”, “PROC” displayed. It is better to render it as a drop down list with human readable text like “Open”, “In process” displayed as drop down list item.


SAP Fiori Elements裡Drop down list的實現原理


I searched in SCN and could not find a working solution for it, so I spent some time for research and would like to share with you here.

Step1 Create a simple CDS view to hold status code and status description

@AbapCatalog.sqlViewName: 'zstatusfixed'@AbapCatalog.compiler.compareFilter: true@AccessControl.authorizationCheck: #CHECK@EndUserText.label: 'fixed value'define view Z_C_Status_Fixedvalue as select from zstatus_fixedval {
   @EndUserText.label: 'status key for fixed value'
   key zstatus_fixedval.status_code,
   @EndUserText.label: 'status description for fixed value'
   zstatus_fixedval.status_text}

Previewed as below:


SAP Fiori Elements裡Drop down list的實現原理


Here below is the table definition on top of which the CDS view above is created.


SAP Fiori Elements裡Drop down list的實現原理


For demonstration purpose I create a Z table and only inserted three status items:


SAP Fiori Elements裡Drop down list的實現原理


Step2 link the status field to the CDS view created in previous step

I have defined the consumption view Z_C_Service_Order_View with below source code:

define view Z_C_Service_Order_View as select from Z_i_Order_View...@UI.identification: [ { position: 50 } ]@Consumption.valueHelp: '_statusfixedvalue'@ObjectModel: { foreignKey.association: '_statusfixedvalue', mandatory: true }Z_i_Order_View.txt04,

Where does the definition of “_statusfixedvalue” come from? It is defined in view Z_i_Over_View:

define view Z_i_Over_View as select from XXXXassociation [0..1] to Z_C_Status_Fixedvalue as _statusfixedvalue
  on  $projection.txt04 = _statusfixedvalue.status_code{
   ...
   _status_text.txt04,
  ...
   @ObjectModel.association.type: #TO_COMPOSITION_CHILD
   _statusfixedvalue}

So far the work on CDS side is done.

Step3 create necessary annotation in ABAP code

Prerequisite: you should first create a project using tcode SEGW and then include your CDS consumption view via the context menu as below:


SAP Fiori Elements裡Drop down list的實現原理


Redefine method DEFINE of your MPC_EXT class with following source code:

super->define( ).
    DATA lo_annotation TYPE REF TO /iwbep/if_mgw_odata_annotation.
    DATA  lo_property TYPE REF TO /iwbep/if_mgw_odata_property.
    DATA  lo_entity_set TYPE REF TO /iwbep/if_mgw_odata_entity_set.
    lo_entity_set = model->get_entity_set( 'Z_C_Service_Order_View' ).
    lo_annotation = lo_entity_set->create_annotation( 'sap' ).
    lo_annotation->add( iv_key = 'semantics' iv_value = 'fixed-values').
    DATA(lo_entitytype) = model->get_entity_type( 'Z_C_Service_Order_ViewType' ).
    lo_entitytype->set_is_value_list( abap_true ).
    data(lo_txt_property) = model->get_entity_type( 'Z_C_Service_Order_ViewType' )->get_property( 'txt04' ).
    lo_txt_property->set_value_list( /iwbep/if_mgw_odata_property=>gcs_value_list_type_property-fixed_values ).
    data(lo_text_anno) = lo_txt_property->/iwbep/if_mgw_odata_annotatabl~create_annotation( 'sap' ).
    lo_text_anno->add( iv_key = 'text' iv_value = 'to_statusfixedvalue/status_text').
    lo_txt_property = model->get_entity_type( 'Z_C_Status_FixedvalueType' )->get_property( 'status_code' ).
    lo_txt_property->set_value_list( /iwbep/if_mgw_odata_property=>gcs_value_list_type_property-fixed_values ).
    lo_text_anno = lo_txt_property->/iwbep/if_mgw_odata_annotatabl~create_annotation( 'sap' ).
    lo_text_anno->add( iv_key = 'text' iv_value = 'status_text').

Note: those ABAP code is necessary, or else you will only get an ugly drop down list: only status code is displayed:


SAP Fiori Elements裡Drop down list的實現原理


Final result

In display mode and in edit mode, the status description is displayed:


SAP Fiori Elements裡Drop down list的實現原理 SAP Fiori Elements裡Drop down list的實現原理


要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

SAP Fiori Elements裡Drop down list的實現原理


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2722159/，如需轉載，請註明出處，否則將追究法律責任。

相關文章