31/10/2022 19:53 Fiori Elements List – Add and Implement Action Button | SAP Blogs

Community Topics Groups Answers Blogs Events Programs Resource

Ask a Question Write a Blog Post Login

Technical Articles

Pawan Kesari
May 31, 2019
| 7 minute read

Fiori Elements List – Add and

Implement Action Button

Follow  29  27  28,048

Recently, I worked on a requirement where we had to add an action button on Fiori

 Like 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
 RSS Feed 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

https://blogs.sap.com/2019/05/31/fiori-elements-list-add-and-implement-action-button/ 1/26
31/10/2022 19:53 Fiori Elements List – Add and Implement Action Button | SAP Blogs

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 =

and spfli.connid =
association [0..1] to U99_I_Airline as _Airline on $projection.A
association [0..1] to U99_IAIRPORT as _AirportFrom on $projection.A
association [0..1] to U99_IAIRPORT as _AirportTo on $projection.A
association [0..1] to S_CityAirport as _CityFrom on $projection.C
association [0..1] to S_CityAirport as _CityTo on $projection.C
{

@ObjectModel.foreignKey.association: '_Airline'

@UI: { lineItem: [{ position: 10 }] , selectionField: [{ positio

key spfli.carrid as Airline,

@UI.lineItem: [{ position: 20 }]

key spfli.connid as FlightConnection,

@ObjectModel.foreignKey.association: '_CityTo'

@UI: { lineItem: [{ position: 40 }] , selectionField: [{ positio

spfli.cityfrom as CityFrom,

@ObjectModel.foreignKey.association: '_AirportFrom'

@UI: { lineItem: [{ position: 50 }] , selectionField: [{ positio

spfli.airpfrom as AirportFrom,

@ObjectModel.foreignKey.association: '_CityTo'

@UI: { lineItem: [{ position: 70 }] , selectionField: [{ positio

spfli.cityto as CityTo,

@ObjectModel.foreignKey.association: '_AirportTo'

@UI: { lineItem: [{ position: 80 }] , selectionField: [{ positio

spfli.airpto as AirportTo,

@UI.lineItem: [{ position: 90 }]

spfli.deptime as DepartureTime,

https://blogs.sap.com/2019/05/31/fiori-elements-list-add-and-implement-action-button/ 2/26
31/10/2022 19:53 Fiori Elements List – Add and Implement Action Button | SAP Blogs

@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

https://blogs.sap.com/2019/05/31/fiori-elements-list-add-and-implement-action-button/ 3/26
31/10/2022 19:53 Fiori Elements List – Add and Implement Action Button | SAP Blogs

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_EXTE
* +------------------------------------------------------------------
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=

https://blogs.sap.com/2019/05/31/fiori-elements-list-add-and-implement-action-button/ 4/26
31/10/2022 19:53 Fiori Elements List – Add and Implement Action Button | SAP Blogs

"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 = 'FlightConnectio
iv_abap_fieldname = 'FLIGHTCONNECTIO
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~c
lo_annotation->add( iv_key = 'action-for' iv_value = 'ZI_FlightCo
lo_annotation = lo_action->/iwbep/if_mgw_odata_annotatabl~create_a
lo_annotation->add( iv_key = 'applicable-path' iv_value = lv_actio

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

....

https://blogs.sap.com/2019/05/31/fiori-elements-list-add-and-implement-action-button/ 5/26
31/10/2022 19:53 Fiori Elements List – Add and Implement Action Button | SAP Blogs

@ObjectModel.foreignKey.association: '_Airline'

@UI: { lineItem: [{ position: 10 } ,

{ type: #FOR_ACTION, invocationGrouping: #CHAN

{ type: #FOR_ACTION, invocationGrouping: #CHAN
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_

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_fl

ls_changeset_response type /iwbep/if_mgw_appl_types=>ty_s_

https://blogs.sap.com/2019/05/31/fiori-elements-list-add-and-implement-action-button/ 6/26
31/10/2022 19:53 Fiori Elements List – Add and Implement Action Button | SAP Blogs

"read requests where operation is execute action (EA)

loop at it_changeset_request assigning field-symbol(<lfs_changeset

where operation_type = /iwbep/if_mgw_appl_types=>gcs_opera

"find function name

lo_func_import_context ?= <lfs_changeset_request>-request_contex
data(lv_function_import_name) = lo_func_import_context->get_fun

if lv_function_import_name = 'CancelFlight' or lv_function_impo

"read parameters

lt_parameters = lo_func_import_context->get_parameters( ).

ls_flight_con_status-carrid = lt_parameters[ name = 'AIRLINE'

ls_flight_con_status-connid = lt_parameters[ name = 'FLIGHTCON

"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>-o
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.

https://blogs.sap.com/2019/05/31/fiori-elements-list-add-and-implement-action-button/ 7/26
31/10/2022 19:53 Fiori Elements List – Add and Implement Action Button | SAP Blogs

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.

Alert Moderator

Assigned Tags

SAP Fiori

ABAP Development

OData

ABAP CDS view

action button

SAP Fiori Elements

SAP Fiori List Report

https://blogs.sap.com/2019/05/31/fiori-elements-list-add-and-implement-action-button/ 8/26