Skip to Content
Technical Articles

Set Buy Indicator to select drop down/box in xml view – UI5/Fiori


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).


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>



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>



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){;
//Batch response – set busy false
onUsageTypeReceived : function(oEvent){


This is small functionality which I have implemented and achieved my requirement and thought to sharing.


Best Regards,





You must be Logged on to comment or reply to a post.


    nice blog! Thanks for sharing your work and achievement.


    Small recommendation from my side: To close the BusyIndicator the method hide should be used.


    onUsageTypeReceived : function(oEvent){ 

    Best Regards,