Fiori Elements: Tips and tricks

[Joseph_BERTHE]

Here are some tricks and good stuff to know when you develop with Fiori Elements.

Tips #1: How to concatenate properties

If you want to concatenate dynamic value and string like this :



In your annotation file do the following (the example is on UI.HeaderInfo):

<Record Type="UI.DataField">

	<PropertyValue Property="Value">

		<Apply Function="odata.concat">

			<String>Sales order n°</String>

			<String> </String>

			<Path>Vbeln</Path>

			<String> - </String>

			<Path>Ernam</Path>

		</Apply>

	</PropertyValue>

</Record>

PS: Pay attention to the space in the String tag. If you do the same with the editor, it will suppress the empty space.

Tips #2: Secure execution

Use this.extensionAPI.securedExecution when you want to access to the back end. The advantages are multiple. The framework do lot of thing for you such as :

• checking if there is data changed by providing a popup or not


• Can manage the navigation of the execution


• trigger a busy indicator


• Execute the function after another action currently executed.

You can see it in the API https://ui5.sap.com/#/api/sap.suite.ui.generic.template.ObjectPage.extensionAPI.ExtensionAPI/methods...



How to use it ?

onActionButton: function(){

  var fnReadBackend = function(){

       return new Promise(function(fnResolve, fnReject) {

           this.getView().getModel().read("/<entitySet>", {

                success: function(){

                   fnResolve();

                },

                error: function(){

                    fnReject();

                }

           })

        );

    }.bind(this));

  }.bind(this);



  this.extensionAPI.securedExecution(fnReadBackend, {

   busy: {

    set: true,

    check: false

   },

   dataloss: {

    popup: true,

    navigation: false

   },

   sActionLabel: "My beautiful title."

  });

}

Tips #3: How to send multiple messages from BE

If you want something like this in your Object Page



You have to add multiple message into the message container from the Back End, but do not raise exception ! :

DATA(lo_msg_container) = me->mo_context->get_message_container( ).



lo_msg_container->add_message_text_only(

  EXPORTING

    iv_msg_type               =  /iwbep/cl_cos_logger=>success                

    iv_msg_text               =  'The copy is a success'  

    iv_entity_type            = 'CopySO'

    iv_add_to_response_header = abap_true

).



lo_msg_container->add_message_text_only(

        EXPORTING

          iv_msg_type               =  /iwbep/cl_cos_logger=>error                

          iv_msg_text               =  'The copy is an Erro dude!'                

          iv_entity_type            = 'CopySO' 

          iv_add_to_response_header = abap_true

).

lo_msg_container->add_message_text_only(

      EXPORTING

        iv_msg_type               =  /iwbep/cl_cos_logger=>warning                 

        iv_msg_text               =  'Attention, this is a warn...'  

        iv_entity_type            = 'CopySO'    

        iv_add_to_response_header = abap_true

).



lo_msg_container->add_message_text_only(

          EXPORTING

            iv_msg_type               =  /iwbep/cl_cos_logger=>info                 

            iv_msg_text               =  'o you know the news ?' 

            iv_entity_type            = 'CopySO' 

            iv_add_to_response_header = abap_true

).

PS: If you want those message inside message popover, you have to be in edit mode and then raise those message from Back end.

Tips #4: How to refresh like a sniper

In some case you would like to refresh the model, and you sould probably do something like this :

this.getView().getModel().refresh(true);

By doing this, you will have so performence issue because it will refresh really all the model :). If you want to refresh only a specific table, prefer doing this :

this.extensionAPI.refresh("<id>::Table");

To get the id, use the inspector of Chrome and kook for the id with ::Table. An example of correct ID :

<namesapce_of_your_application>::sap.suite.ui.generic.template.ObjectPage.view.Details::SOHeaders--<FacetID>::Table

Do not forget a mechanism like Side-Effect which is the best way to refresh properties or a specific part of the screen with annotation and not with extension.

Source for Side-Effect: https://ui5.sap.com/#/topic/18b17bdd49d1436fa9172cbb01e26544

Conclusion

In all my project with Fiori Element I use to use those tips ans helps me to finalyse our project. Hope it will help you as well, and If you give me other tips on your comment I will add it in that page.

Enjoy 😉