Technical Articles
Set Buy Indicator to select drop down/box in xml view – UI5/Fiori
Introduction:
In this blog post, I would like to explain, how can set busy indicator to any control which is added either in dialog/fragment or view.xml file.
In our project I have created a dialog box with some of the input box and drop down(select/combo box).
Requirement:
I am able to open the dialog on click of “event/button” and for dialog also busy indicator display but once dialog appear then busy indicator getting close.
But the entitySet which I have bounded with Select control its taking some time to load the data and we can’t see anything in drop down so just I want to show the busy indicator for the drop down too.
I want to add more details regarding oData service : As we know all the oData configuration and detail present in “manifest.json” file.
Also I am not calling the oData service manually from the “controller.js” file. Below are the code where we can see I have directly attached the entitySet(/C_OrgUsageTypeVH) to select control in xml dialog.
Sample code without busy indicator:
<Select items=”{/C_OrgUsageTypeVH}” id=”idUsageType”>
<core:Item key=”{OrgUsageType}” text=”{OrgUsageTypeDesc}”></core:Item>
</Select>
Solution :
We can add the events in select control at xml view level inside the “items” aggregation. Below are code and method name.
Methods Name :
1. dataRequested : Trigger when requested for data.
2. dataReceived : Trigger when request is completed.
Sample code with busy indicator:
—————————————————————————————————————————
<Select items=”{path:’/C_OrgUsageTypeVH’, templateShareable:false,
events: { dataRequested: ‘.onUsageTypeRequested’, dataReceived: ‘.onUsageTypeReceived’ }
}” id=”idUsageType”>
<core:Item key=”{FrcElmntOrgUsageType}” text=”{FrcElmntOrgUsageTypeDesc}”></core:Item>
</Select>
————————————————————————————————————————–
In above code I have defined two function name “onUsageTypeRequested” & “onUsageTypeReceived” and for these methods I have added definition in “controller.js” file to set the busy indicator true/false based on request of batch call.
Code in controller.js file:
//Batch request – set busy true
onUsageTypeRequested : function(oEvent){
sap.ui.core.BusyIndicator.show();
},
//Batch response – set busy false
onUsageTypeReceived : function(oEvent){
sap.ui.core.BusyIndicator.hide();
}
This is small functionality which I have implemented and achieved my requirement and thought to sharing.
Best Regards,
Dhiraj
Hi DHIRAJ KUMAR,
nice blog! Thanks for sharing your work and achievement.
Small recommendation from my side: To close the BusyIndicator the method hide should be used.
Best Regards,
Florian
Hi Florian,
I did mistake during copy. Corrected now.
Thanks!
Best Regards,
Dhiraj