Skip to Content
Technical Articles

Fiori Elements: Tips and tricks

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/securedExecution

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 😉

10 Comments
You must be Logged on to comment or reply to a post.
  • Hi Joseph,

    Great tips, thanks and keep blogging. 🙂

    For concatenation, I generally use it in my CDS itself. But ya if someone who is not aware of ABAP CDS, can refer your tips 🙂

    Regards,
    Tejas

    • Hi Tejas Chouhan ,

      I have lot of customers who are not ready for CDS so we do application we the full SEGW. In that way the UI annotation is stand in the Web application (WebIDE).

      Thanks for your comment.

      Joseph

        • Hi,

          Great question, I would say it depend on If you are in HANA you should first starting by using CDS. If you are not with HANA you should use SEGW.

          BUT, I’m currently on a project where I’ve started my List Report in full CDS + Annotation which is pretty good and very time saving regarding Value Help implementation. But the experience shows me so constraints with CDS :

          1. No Function import so you should use SEGW
          2. No way to implement dropdown list for search filter or any other smart field, so you have to use SEGW to add the correct annotation
          3. If you have a search help with multiple key, it is not well supported (but that is a Fiori Elements problem)
          4. AMDP can save your life in some case but not all the time
          5. The last but not least 🙂 If you have an Order Header which have multiple statues (represented by an association 1..*) and you want to filter on the Status it is not possible (at least I didn’t find the solution) with CDS + Fiori Elements you should use SEGW instead.

          When I say “you should or have to use SEGW” in most case it is using the CDS’s References in your project. Whereas the last point is completly doing the project with the entire SEGW.

          I Hope it is clear. Do not hesitate to ask me clarification.

          Regards

          Joseph

  • Hi Joseph,

    I would like a confirmation if you can regarding the below steps that I have done in order to create my fiori App.

    I am trying to create an Fiori app based on the fiori Element  template ‘List report application.

    • First I have created the relevant  CDS views (Basic, consumptions) with relevant annotations ( Action, fields to be displayed…)
    • then I have created a SEGW project and added the Entities via Data Source References (exposures via SADL)
    • Function imports cannot be created in SEGW when using ‘exposures via SADL’: ‘return type’ and ‘return entity set’ cannot be added. So I have added the function imports in the method DEFINE of MPC_EXT and the logic for the Action in method CHANGESET_PROCESS of DPC_EXT
    • Generate the App with the help of webide based on the ‘List report application’ template.  In the annotation Selection popup, I have selected both proposed annotation files (Selected service Metadata and annotation from the CDS view)

    Are these steps correct?

    I have one problem: The action defined are dislayed but are not active.

    thank you for your help

    Best regards

    Christophe