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