Fiori Elements List – Add and Implement Action Button

Recently, I worked on a requirement where we had to add an action button on Fiori Elements List Report. Looked at various options but nothing seems straightforward. UI5 Demo Kit suggests using UI5 Extensions which I wanted to avoid if I could. There are some annotations related to function import which looked promising but I couldn’t find any blog/help document on how to actually use them in CDS and implement in the OData service. Then I saw actions using BOPF, but this report which I was working didn’t have any business object attached to it.

Looking at some SAP standard apps I finally figured out how to achieve this without UI5 extension in Web-IDE.

For the purpose of this blog, I’ll use tried and tested flight data model. You should be able to replicate the solution in your system using the code I’ve provided.

Code Edit Feb-2020 : Added fields IsActiveCancelFlight and IsActiveKeepFlight in CDS ZI_FlightConnections. Added ABAP code in method ADD_ACTION towards the end to add action-for and applicable-path annotations.

Introduction

In this blog I’ll show you how to add action button(s) on Fiori Element List Page without making UI5 extension in Web-IDE or using BOPF.

Setting the Scene

In this Fiori Elements List report app, I am going to display a list of flight connections (from table SPFLI) and I’ll show to how to add actions which we can use to cancel the flight and reverse the cancellation. In part 1 of the blog, we will see basic implementation. To keep blog manageable (for me) I am going to keep additional features like message handling, enable/disable action buttons in part 2 of the blog.

As a starting point, I have this Fiori Elements List App which is based on CDS View. I have exposed CDS View via SEGW using Data Source Reference.

CDS View: ZI_FlightConnections

@AbapCatalog.sqlViewName: 'ZISPFLI01'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Flight Connections'

define view ZI_FlightConnections
  as select from    spfli
    left outer join zspfli_act as CancellationInfo on  spfli.carrid = CancellationInfo.carrid
                                                   and spfli.connid = CancellationInfo.connid
  association [0..1] to U99_I_Airline as _Airline     on $projection.Airline = _Airline.Airline
  association [0..1] to U99_IAIRPORT  as _AirportFrom on $projection.AirportFrom = _AirportFrom.Airport
  association [0..1] to U99_IAIRPORT  as _AirportTo   on $projection.AirportTo = _AirportTo.Airport
  association [0..1] to S_CityAirport as _CityFrom    on $projection.CityFrom = _CityFrom.City
  association [0..1] to S_CityAirport as _CityTo      on $projection.CityTo = _CityTo.City
{

      @ObjectModel.foreignKey.association: '_Airline'
      @UI: { lineItem: [{ position: 10 }] , selectionField: [{ position: 10 }]}
  key spfli.carrid    as Airline,

      @UI.lineItem: [{ position: 20 }]
  key spfli.connid    as FlightConnection,

      @ObjectModel.foreignKey.association: '_CityTo'
      @UI: { lineItem: [{ position: 40 }] , selectionField: [{ position: 15 }]}
      spfli.cityfrom  as CityFrom,

      @ObjectModel.foreignKey.association: '_AirportFrom'
      @UI: { lineItem: [{ position: 50 }] , selectionField: [{ position: 20 }]}
      spfli.airpfrom  as AirportFrom,

      @ObjectModel.foreignKey.association: '_CityTo'
      @UI: { lineItem: [{ position: 70 }] , selectionField: [{ position: 25 }]}
      spfli.cityto    as CityTo,

      @ObjectModel.foreignKey.association: '_AirportTo'
      @UI: { lineItem: [{ position: 80 }] , selectionField: [{ position: 30 }]}
      spfli.airpto    as AirportTo,

      @UI.lineItem: [{ position: 90 }]
      spfli.deptime   as DepartureTime,

      @UI.lineItem: [{ position: 100 }]
      spfli.arrtime   as ArrivalTime,

      @UI.lineItem: [{ position: 120 }]
      @EndUserText.label: 'Cancelled On'
      CancellationInfo.cancelledon,

      @UI.lineItem: [{ position: 130 }]
      @EndUserText.label: 'Cancelled By'
      CancellationInfo.cancelledby,

      @UI.hidden:true 
      cast( 'X' as boole_d ) as IsActiveCancelFlight,

      @UI.hidden:true
      cast ( 'X' as boole_d ) as IsActiveKeepFlight,

      _Airline,
      _AirportFrom,
      _AirportTo,
      _CityFrom,
      _CityTo
}

SEGW: ZIFLTCON

Table: ZSPFLI_ACT

App

If you are struggling to get to this point I would recommend you check Fiori Elements Wiki Page, section How to Guides for List Report. Make note that I have exposed CDS via SEGW and not directly using OData.pubish annotation. This is important because its DPC_EXT and MPC_EXT classes which we will be using to add actions and put ABAP code to process these actions.

Adding Action Button

We are going to add two action buttons ‘Cancel Flight‘ and ‘Keep Flight‘. On these actions we will set and reset values in fields Cancelled on and Cancelled by.

To add action button first we will have to add function import in OData service following which we will add annotation in CDS View to display buttons and link it to function import name.

Adding Function Import

In MPC_EXT class add following private method. This code add function import to OData service. It defines importing parameters, return parameter etc.

* <SIGNATURE>---------------------------------------------------------------------------------------+
* | Instance Private Method ZCL_ZIFLTCON_MPC_EXT->ADD_ACTION
* +-------------------------------------------------------------------------------------------------+
* | [--->] IV_ACTION_NAME                 TYPE        /IWBEP/MED_EXTERNAL_NAME
* +--------------------------------------------------------------------------------------</SIGNATURE>
  method add_action.

    data: lv_fc_fieldvalue type /iwbep/med_annotation_value,
          lo_complex_type  type ref to /iwbep/if_mgw_odata_cmplx_type,
          lo_prop          type ref to /iwbep/if_mgw_odata_property.

    data(lo_action) = model->create_action( iv_action_name ).
    
    "set return parameter
    lo_action->set_return_entity_type( 'ZI_FlightConnectionsType' ) .
    lo_action->set_return_entity_set( 'ZI_FlightConnections' ).

    lo_action->set_http_method( 'PUT' ).
    lo_action->set_return_multiplicity( /iwbep/if_mgw_med_odata_types=>gcs_cardinality-cardinality_1_1 ).
    "specify input parameters
    data(lo_parameter) = lo_action->create_input_parameter(
                                  iv_parameter_name = 'Airline'
                                  iv_abap_fieldname = 'AIRLINE' ).
    lo_parameter->/iwbep/if_mgw_odata_property~set_type_edm_string( ).
    lo_parameter->set_maxlength( iv_max_length = 3 ).

    data(lo_parameter1) = lo_action->create_input_parameter(
                                  iv_parameter_name = 'FlightConnection'
                                  iv_abap_fieldname = 'FLIGHTCONNECTION' ).
    lo_parameter1->/iwbep/if_mgw_odata_property~set_type_edm_string( ).
    lo_parameter1->set_maxlength( iv_max_length = 4 ).

    "Is Action Active?
    concatenate 'IsActive' iv_action_name into data(lv_action_ac).

    data(lo_annotation) = lo_action->/iwbep/if_mgw_odata_annotatabl~create_annotation( 'sap' ).
    lo_annotation->add( iv_key = 'action-for' iv_value = 'ZI_FlightConnectionsType' ).
    lo_annotation = lo_action->/iwbep/if_mgw_odata_annotatabl~create_annotation( 'sap' ).
    lo_annotation->add( iv_key = 'applicable-path' iv_value = lv_action_ac ).

  endmethod.

Redefine DEFINE method in MPC_EXT class and make call to ADD_ACTION method to add function imports.

  method define.
    super->define( ) .
    add_action( iv_action_name = 'CancelFlight' ) .
    add_action( iv_action_name = 'KeepFlight' ) .
  endmethod.

Following above changes check OData service metadata have function import added to it.

Change to CDS to Add Action Buttons.

In CDS add following annotation (UI.lineitem) before field Airline. With this annotation we are defining button (label), and asking system to call respective function import on these actions.

define view ZI_FlightConnections
  as select from    spfli
    ....
{

      @ObjectModel.foreignKey.association: '_Airline'
      @UI: { lineItem: [{ position: 10 } ,
                        { type: #FOR_ACTION, invocationGrouping: #CHANGE_SET, position: 0, dataAction: 'MPC_EXT:CancelFlight',  label: 'Cancel Flight' },
                        { type: #FOR_ACTION, invocationGrouping: #CHANGE_SET, position: 1, dataAction: 'MPC_EXT:KeepFlight'  ,  label: 'Keep Flight' }] ,
             selectionField: [{ position: 10 }]}
  key spfli.carrid                                   as Airline,

....
}

After above changes and activation you should be able to see action buttons on the list page.

Code to Process Action

Fiori Element List Report uses batch processing. To enable batch processing, in DPC_EXT class redefine method /iwbep/if_mgw_appl_srv_runtime~changeset_begin. Also, we will process all requests together, hence set cv_defer_mode = abap_true.

  method /iwbep/if_mgw_appl_srv_runtime~changeset_begin.
    cv_defer_mode = abap_true .
  endmethod.

Next, redefine method /iwbep/if_mgw_appl_srv_runtime~changeset_process and put below code in it. Inline comment in code should give you clue one whats happening

  method /iwbep/if_mgw_appl_srv_runtime~changeset_process.
    data : lo_func_import_context type ref to /iwbep/if_mgw_req_func_import,
           lt_parameters          type /iwbep/t_mgw_name_value_pair,
           ls_flight_con_status   type zspfli_act,
           ls_result              type zcl_zifltcon_mpc_ext=>ts_zi_flightconnectionstype,
           ls_changeset_response  type /iwbep/if_mgw_appl_types=>ty_s_changeset_response.

    "read requests where operation is execute action (EA)
    loop at it_changeset_request assigning field-symbol(<lfs_changeset_request>)
            where operation_type = /iwbep/if_mgw_appl_types=>gcs_operation_type-execute_action.

      "find function name
      lo_func_import_context ?= <lfs_changeset_request>-request_context .
      data(lv_function_import_name) = lo_func_import_context->get_function_import_name( ) .

      if lv_function_import_name = 'CancelFlight' or lv_function_import_name = 'KeepFlight' .

        "read parameters
        lt_parameters = lo_func_import_context->get_parameters( ).
        ls_flight_con_status-carrid = lt_parameters[ name = 'AIRLINE' ]-value .
        ls_flight_con_status-connid = lt_parameters[ name = 'FLIGHTCONNECTION' ]-value .

        "set/reset values
        case lv_function_import_name.
          when 'CancelFlight'.
            ls_flight_con_status-cancelledby = sy-uname .
            ls_flight_con_status-cancelledon = sy-datum .
          when 'KeepFlight'.
            clear ls_flight_con_status-cancelledby  .
            clear ls_flight_con_status-cancelledon  .
        endcase .

        modify zspfli_act from ls_flight_con_status .

        "select new values
        "do you know - even if you haven't yet committed the changes,
        "system will return new data
        "search 'transaction isolation levels' to read more on this
        select single from zi_flightconnections fields *
          where  airline = @ls_flight_con_status-carrid
            and flightconnection = @ls_flight_con_status-connid
          into corresponding fields of @ls_result .

        "prepare response with operation number and respective data,
        "insert in CT_CHANGESET_RESPONSE
        ls_changeset_response-operation_no = <lfs_changeset_request>-operation_no .
        copy_data_to_ref(
           exporting
             is_data = ls_result
           changing
             cr_data = ls_changeset_response-entity_data ).

        insert ls_changeset_response into table ct_changeset_response.
      endif .
    endloop .
  endmethod.

Result

After activation buttons should work

Conclusion

Action can be added to Fiori Element List Report using annotation, code in MPC_EXT and DPC_EXT classes.

Hope you found this blog useful.

As I mentioned earlier I couldn’t find way to add action using BOPF in List Report. If you have managed to do that then please share your experience.

What’s next:

I plan to write next part of this blog.

Action to download file e.g. download sales confirmation output on list of sales order.