Show loading/Progress bar

[Former Member]

Hi,

I have made a page in ui5 in which there is a button on click of which another page as a popup opens.The problem is page is taking so mkuch of time to display the data so I want to show loading/progress bar.What can be the solution?

[former_member267753]

Hi bhawna,

If you are using UI5 MVC architecture for the page loading in new popup then try this,

1.Write this code in your HTML page:

               <script>

                    var oBusyDialog=new sap.m.BusyDialog("oBusyDialog");

                     oBusyDialog.open();

               </script>

2.And in your controller js:

          onAfterRendering: function() {

                 sap.ui.getCore().getElementById("oBusyDialog").close();

         }

[Former Member]

On this popup page,I have textboxes and a chart but the chart is taking os much time in loading so the entitre page is displayed as white screen until the chart is loaded.So I want to show loader for that.Any solution?

(I was thinking of loading the textboxes first and then chart)but the problem is whole page is loading altogether

[Former Member]

Hi Bhawna,

     This is a suggestion, try this. Open a dialog box and append dom elements to that dialog box (Ref: how to add dom elements into sap ui Panel or di... | SCN). From then u can use jquery to load, wait so on

[saivellanki]

Hi Bhawna,

Let me understand your functionality first.

You have an .irpt page, which has button control, on click of that button you're opening another .irpt page as pop up which has text boxes and chart where the chart is taking lots of time to load. Please correct me if I'm wrong anywhere understanding your functionality.

Now I am hoping that your using AJAX call to call xMII BLS transaction where your written some logic to get filtered transaction data.

Few things I have to get clear here -

1. Is the call Synchronous/Asynchronous i.e., Async: true/false?

2. Are you calling the BLS transaction directly (or) using a Xacute Query template where the transaction is wrapped.

3. How are you passing the url in AJAX call? If it is Xacute query, Something like this - '/XMII/Illuminator?Content-Type=text/json&QueryTemplate=+YourXacutetemplate+'

Please check the sample AJAX below and try (hope busy control will work) -

var url = '/XMII/Illuminator?Content-Type=text/json&QueryTemplate=+YourXacutetemplate+';
url = url + "&Param.1="+selectedWorkCenter+"&Param.2="+selectedPlant+"&Param.3="+selectedGroup;
var timeout = 0;
var beforeSendFunction  = function( xhr ) {
  new sap.ui.core.BusyIndicator.show(0);
  };
$.ajax({
                 async : true,
                 cache : false,
                 url : url,
                 timeout : timeout,
                 beforeSend : beforeSendFunction,
                 success: function(result) {
                                if (!result.Rowsets.FatalError) {
                                               var data = [];
                                               data = result;
                                               new sap.ui.core.BusyIndicator.hide();
                                     }else {
                                               sap.ui.commons.MessageBox.alert(result.Rowsets.FatalError);
                                               new sap.ui.core.BusyIndicator.hide();
                                     }
                 },
                 error: function(error) {
                                sap.ui.commons.MessageBox.alert("error");
                                new sap.ui.core.BusyIndicator.hide();
                 }
  });

Regards,

Sai Vellanki.

[Former Member]

Hi,yes you understood it correctly but there is no ajax call.I am designing a screen for SAP MII in ui5 so its just a query call

[saivellanki]

Hi Bhawna,

How are you calling the query template?

Regards,

Sai Vellanki.

[Former Member]

Hi Sai, I am using inbuilt i5chart of SAP MII 15.0 version. Xacute query is being called but Xacute query in the display template code itself. Here is the line of code to call the xacute query for i5chart. var c1 = new com.sap.xmii.chart.hchart.i5Chart('Sandbox/DisplayTemplates/ShiftWise_HourlyDiff_Data_Chart','Sandbox/Query/ShiftWise_HourlyDiff_Data_XQT',addProps1);

[Former Member]

Hi,

Now have you understood my problem Sai?

[vikram_putta]

This message was moderated.

[saivellanki]

Hi Bhawna,

Not sure, what pop-up you're mentioning. But, I tried to assume few scenarios

First of all you have to declare a global variable for BusyDialog, so that you can re-use the same wherever you want

var oBusyDialog = new sap.m.BusyDialog("GlobalBusyDialog", {title : "Please wait..."});

First Scenario -

On click of button, you're showing a page in a Dialog pop-up, then you could try this -  Plunker - DialogBusySample

Second Scenario -

You're navigating between the pages , then you could try this - Plunker - NavigationBusy

Third Scenario -

If at all nothing from the above scenarios that you are expecting, then you could try this for page control -

var oPage = new sap.m.Page();
oPage.addEventDelegate({
          onBeforeShow: function(oEvent){
          var oBusyDialog = sap.ui.getCore().byId("GlobalBusyDialog");
          oBusyDialog.open();
          },
          onAfterShow: function(oEvent){
          var oBusyDialog = sap.ui.getCore().byId("GlobalBusyDialog");
          oBusyDialog.close();
          }
},oPage);

Regards,

Sai Vellanki.

[Former Member]

Hi.Thanks for your response.:).First of all I am using desktop app so I think BusyDialog will not work.

On my main page,i have  used code like this

var oButton3 = new sap.ui.commons.Button("b6",{

  text : "D",

  width: "140px" ,

  press: function() {

var URL = "/XMII/CM/Sandbox/bhawna_1/3sep/DGridWithDataDisplay_Shift_HourlyDiff_Chart.irpt?"+LocationVal3+"?"+LocationVal2+"?"+LocationVal1+"?"+LocationVal+"?"+ShiftVal+"?"+LocationVal5;

window.open(URL,"DrillDownWindow","dialogWidth:1300px; dialogHeight:950px; center:1; scroll:1; status:0");

       }

});

and I have made a differenmt file for this above popup in which charts and textboxes are defined.

Now when I run webpage and click the above button then blank screen apperas for about 1 min and then data get loaded.Could you please help me now if you have got the scenerio.

[saivellanki]

Hi Bhawna,

Then you can use jQuery events for this.

In your DGridWithDataDisplay_Shift_HourlyDiff_Chart.irpt page, place this code -

$(document).ready(function() {
  sap.ui.core.BusyIndicator.show(0);
});
$(window).load(function(){
  sap.ui.core.BusyIndicator.hide();
});

Regards,

Sai Vellanki.

[Former Member]

Thanks for you continuous response.But its not responding.I wrote the code but it is showing same functionality

[saivellanki]

Hi Bhawna,

Can you tell me what layout are you using for DGridWithDataDisplay_Shift_HourlyDiff_Chart.irpt page?

Is it Matrix Layout?

Regards,

Sai Vellanki.

[Former Member]

Sorry I havenot used any matrix layout.Simply I put them on <div>

[Former Member]

These will show the loading (busy) state of page before page loads

sap.ui.core.BusyIndicator.show(0);
...
sap.ui.core.BusyIndicator.hide();

for reference see: JS Bin - Collaborative JavaScript Debugging

[Former Member]

My situation is something different.I dont want to click anywhere.I want the page to show busy before it is loaded as it is taking too much tym in loading

[frankluzat]

Ok, you were talking about a popup.

A popup is usually triggered by a user action.

Anyway, why can't you set the busy flag directly when you create the popup?

[frankluzat]

Hi bhawna,

You can use the "Busy Indicator" to show the user that he has to wait for a long lasting operation to finish.

SAPUI5 SDK - Demo Kit

Just use the setBusy method on your control / page / dialog or anything else inheriting from sap.ui.core.Control or any of its descendants.

If a control is set to busy then its contents are covered by a grayish overlay and the busy indicator animation appears.

You should also refer to the demo app in the "Explored" section.

SAPUI5 Explored