In that blog, I will explain all about Actions in Fiori Elements. I said Actions because for Fiori Elements template an OData Function Import stands for Actions.
So what will cover this blog :
I will do the same for the Object Page soon.
Let's start by showing you, on which Function Import I will based my post.
CopySO is the name of my function which is the feature to copy a sale order. It has one input parameter which is SONumber.
After re-generate the SEGW project and clear the metadata, you can implement the function. In the DPC_EXT class, redefine the method /IWBEP/IF_MGW_APPL_SRV_RUNTIME~EXECUTE_ACTION and add any code for the moment.
In your WebIDE project, insert the following annotation to render visible the action:
The result will be this one :
We can move the button on the line by adding the following annotation :
Select a line and click on the button Copy Sale, you should have this behaviour :
It asks you to enter the SONumber which is a mandatory field of your Function Import, that is correct. But in the scenario, you probably want the system automatically put the Document Number in the action.
To do so, you have to name your action's input parameter, the same as your entity. In our example the SONumber should be rename by Vbeln.
After renaming your input parameter, the behaviour should be better. If you want to pass multiple value, the logic is the same, add multiple input with the same name of the main entity.
Ok, it doesn't look like very well. It is normal because for the moment in the Back End we have not yet implemented the EXECUTE_ACTION method. But if we do a debug we should get the rigth key :
The error page we've got is because we have not sent anything from the Back End to the Fiori Element framework. We will continue, step by step to discover all the possibility of those Actions 🙂
Let's carry on with a confirmation popup. In some case we want to inform your end user to take care of a deletion action or something else.
To do so, in the WebIDE add a new annotation by selecting your Function Import :
And then add the annotation IsActionCritical:
Save and execute the application, and look at the difference :
Now we would like to customize the text from that Popup. In your i18n.property file, you can add a line with this key : ACTION_CONFIRM|<FunctionImportName>. In our example it should be this :
The result :
At this stage, you have well customized the front-end part. Now we want our Function Import responding in the rigth manner. To do so, let's go to the BackEnd part and play with the response body.
As you can see the Document Number is shown in the message. If you want to modify this text, you have to add the annotation UI.HeaderInfo like this :
And the popup looks like this :
If the response is success you would like to options :
For the first one, you have to return the Key of the newly created object in the Back End :
In my exemple I select the line 33, and want to navigate to the newly created object (let says 34) after clicking the Copy Sale button :
it should navigate automatically to the object 34:
Hope it will help you to create and use Fiori Elements in a good manner and do a well user experience. My purpose is to show you how to do things without extension.
Enjoy 😉
So what will cover this blog :
- How to embedded Function Import into Fiori Element
- How to make popup message
- How to hack the response message
- Error/Warning message
- Success/Info message
- How to navigate
I will do the same for the Object Page soon.
Function Import to Actions
Let's start by showing you, on which Function Import I will based my post.
CopySO is the name of my function which is the feature to copy a sale order. It has one input parameter which is SONumber.
After re-generate the SEGW project and clear the metadata, you can implement the function. In the DPC_EXT class, redefine the method /IWBEP/IF_MGW_APPL_SRV_RUNTIME~EXECUTE_ACTION and add any code for the moment.
In your WebIDE project, insert the following annotation to render visible the action:
The result will be this one :
We can move the button on the line by adding the following annotation :
<Record Type="UI.DataFieldForAction">
<PropertyValue Property="Action" String="ZJBE_DEMO_SMART_SO_SRV.ZJBE_DEMO_SMART_SO_SRV_Entities/CopySO"/>
<PropertyValue Property="Label" String="{@i18n>COPY_SALE}"/>
<PropertyValue Property="Inline" Bool="true"/>
</Record>Select a line and click on the button Copy Sale, you should have this behaviour :
It asks you to enter the SONumber which is a mandatory field of your Function Import, that is correct. But in the scenario, you probably want the system automatically put the Document Number in the action.
To do so, you have to name your action's input parameter, the same as your entity. In our example the SONumber should be rename by Vbeln.
After renaming your input parameter, the behaviour should be better. If you want to pass multiple value, the logic is the same, add multiple input with the same name of the main entity.
Ok, it doesn't look like very well. It is normal because for the moment in the Back End we have not yet implemented the EXECUTE_ACTION method. But if we do a debug we should get the rigth key :
The error page we've got is because we have not sent anything from the Back End to the Fiori Element framework. We will continue, step by step to discover all the possibility of those Actions 🙂
Confirmation popup
Let's carry on with a confirmation popup. In some case we want to inform your end user to take care of a deletion action or something else.
To do so, in the WebIDE add a new annotation by selecting your Function Import :
And then add the annotation IsActionCritical:
Save and execute the application, and look at the difference :
Now we would like to customize the text from that Popup. In your i18n.property file, you can add a line with this key : ACTION_CONFIRM|<FunctionImportName>. In our example it should be this :
The result :
Handle the Response
At this stage, you have well customized the front-end part. Now we want our Function Import responding in the rigth manner. To do so, let's go to the BackEnd part and play with the response body.
Sucess message
METHOD /iwbep/if_mgw_appl_srv_runtime~execute_action.
DATA(lo_msg_container) = me->mo_context->get_message_container( ).
DATA ls_response TYPE zcl_jbe_demo_smart_so_mpc=>ts_soheader.
CASE iv_action_name.
WHEN 'CopySO'.
lo_msg_container->add_message_text_only(
EXPORTING
iv_msg_type = /iwbep/cl_cos_logger=>success " Message Type - defined by GCS_MESSAGE_TYPE
iv_msg_text = 'The copy is a success' " Message Text
iv_entity_type = 'SOHeader' " Entity type/name
iv_message_target = '/#TRANSIENT#' " Target (reference) (e.g. Property ID) of a message
).
RAISE EXCEPTION TYPE /iwbep/cx_mgw_busi_exception
EXPORTING
message_container = lo_msg_container.
WHEN OTHERS.
ENDCASE.
ENDMETHOD.Warning Message
As you can see the Document Number is shown in the message. If you want to modify this text, you have to add the annotation UI.HeaderInfo like this :
And the popup looks like this :
METHOD /iwbep/if_mgw_appl_srv_runtime~execute_action.
DATA(lo_msg_container) = me->mo_context->get_message_container( ).
DATA ls_response TYPE zcl_jbe_demo_smart_so_mpc=>ts_soheader.
CASE iv_action_name.
WHEN 'CopySO'.
lo_msg_container->add_message_text_only(
EXPORTING
iv_msg_type = /iwbep/cl_cos_logger=>warning " Message Type - defined by GCS_MESSAGE_TYPE
iv_msg_text = 'The copy is a success' " Message Text
iv_entity_type = 'SOHeader' " Entity type/name
iv_message_target = '/#TRANSIENT#' " Target (reference) (e.g. Property ID) of a message
).
RAISE EXCEPTION TYPE /iwbep/cx_mgw_busi_exception
EXPORTING
message_container = lo_msg_container.
WHEN OTHERS.
ENDCASE.
ENDMETHOD.Info message
METHOD /iwbep/if_mgw_appl_srv_runtime~execute_action.
DATA(lo_msg_container) = me->mo_context->get_message_container( ).
DATA ls_response TYPE zcl_jbe_demo_smart_so_mpc=>ts_soheader.
CASE iv_action_name.
WHEN 'CopySO'.
lo_msg_container->add_message_text_only(
EXPORTING
iv_msg_type = /iwbep/cl_cos_logger=>info " Message Type - defined by GCS_MESSAGE_TYPE
iv_msg_text = 'The copy is a success' " Message Text
iv_entity_type = 'SOHeader' " Entity type/name
iv_message_target = '/#TRANSIENT#' " Target (reference) (e.g. Property ID) of a message
).
RAISE EXCEPTION TYPE /iwbep/cx_mgw_busi_exception
EXPORTING
message_container = lo_msg_container.
WHEN OTHERS.
ENDCASE.
ENDMETHOD.Error message
METHOD /iwbep/if_mgw_appl_srv_runtime~execute_action.
DATA(lo_msg_container) = me->mo_context->get_message_container( ).
DATA ls_response TYPE zcl_jbe_demo_smart_so_mpc=>ts_soheader.
CASE iv_action_name.
WHEN 'CopySO'.
lo_msg_container->add_message_text_only(
EXPORTING
iv_msg_type = /iwbep/cl_cos_logger=>error " Message Type - defined by GCS_MESSAGE_TYPE
iv_msg_text = 'The copyhas failed.' " Message Text
iv_entity_type = 'SOHeader' " Entity type/name
iv_message_target = '/#TRANSIENT#' " Target (reference) (e.g. Property ID) of a message
).
RAISE EXCEPTION TYPE /iwbep/cx_mgw_busi_exception
EXPORTING
message_container = lo_msg_container.
WHEN OTHERS.
ENDCASE.
ENDMETHOD.Response to Navigation
If the response is success you would like to options :
- Navigate to the newly created object
- Do nothing, no navigation
For the first one, you have to return the Key of the newly created object in the Back End :
METHOD /iwbep/if_mgw_appl_srv_runtime~execute_action.
DATA ls_response TYPE zcl_jbe_demo_smart_so_mpc=>ts_soheader.
CASE iv_action_name.
WHEN 'CopySO'.
" We assume that 34 is a newly created object
ls_response-vbeln = '34'.
me->copy_data_to_ref(
EXPORTING
is_data = ls_response
CHANGING
cr_data = er_data
).
WHEN OTHERS.
ENDCASE.
ENDMETHOD.In my exemple I select the line 33, and want to navigate to the newly created object (let says 34) after clicking the Copy Sale button :
it should navigate automatically to the object 34:
Conclusion
Hope it will help you to create and use Fiori Elements in a good manner and do a well user experience. My purpose is to show you how to do things without extension.
Enjoy 😉
- SAP Managed Tags:
33 Comments
