Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 

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

 

 

 
2 Comments
Labels in this area