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 😉
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.
You mentioned - a lot of your customers are use SEGW instead CDS, for your opinion, which the way better?
Regards,
Che
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 :
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
Good stuff Joseph BERTHE , thanks for sharing those tips!
great content.
regarding tip 1, did you ever try in smart table? I tried last year, no luck.
You rigth it didn't work in table... another feature SAP should add.
Regrads,
Joseph
thanks for verifying
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.
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
Thanks Joseph - added to Fiori elements wiki!
I have this below but when use <Path>monitor_status</Path> , it shows the string values except Path value.. which is a string..
any ideas? my assumption is that i need to make use of UI.DataField but not sure where to add it.. as it giving me exceptions.