Skip to Content
Technical Articles
Author's profile photo DHIRAJ KUMAR

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

 

 

 

Assigned Tags

      2 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Florian Vogt
      Florian Vogt

      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.

       

      onUsageTypeReceived : function(oEvent){ 
      
           sap.ui.core.BusyIndicator.hide();
      
      }
      
      

      Best Regards,

      Florian

      Author's profile photo DHIRAJ KUMAR
      DHIRAJ KUMAR
      Blog Post Author

      Hi Florian,

       

      I did mistake during copy. Corrected now.

      Thanks!

       

      Best Regards,

      Dhiraj