1

I want to load the third-party module on the click of the sap.m.Button. As the library takes a little time for loading, I want to show the view busy. But it is not working. I want to load the third-party module, and after loading and executing the functionality of the module, I want to set the view busy to false.

Controller:

onPressDownload: function () {
  var view = this.getView();
  view.setBusy(true);
  jQuery.sap.require('pdfmake.build.pdfmake');
  jQuery.sap.require('pdfmake.build.vfs_fonts');
  if (pdfMake) {
    var docDef = "";
    pdfMake.createPdf(docDef).download();
    view.setBusy(false);
  }
},

View:

var oBtn = new sap.m.Button({
  press: [oController.onPressDownload, oController]
});

As jQuery.sap.require makes a synchronous call, view.setBusy should work. But it is not working as expected, and view.setBusy() resets immediately to false. Is there anything I am doing wrong?

Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170
Suhas Bhattu
  • 539
  • 4
  • 17

2 Answers2

0

Issue

All controls (including Views) provide busyIndicatorDelay with the default value of 1000 ms. I.e. if the latency is shorter than 1 second, the app won't display the busy indicator anyway. One second is the recommended delay by Fiori design guideline.src You can reduce it to 0 ms. However, That won't solve the actual problem either because..:

Real Issue

As jQuery.sap.require makes a synchronous call, view.setBusy should work.

Unfortunately, it's the other way around. Because it makes a synchronous call, handling busy state can't work as intended since synchronous requests freeze the main thread / event loop of the browser completely. I.e.:

control.setBusy(true);
// <synchronous calls>;
control.setBusy(false);

is the same as

control.setBusy(true);
control.setBusy(false);

Please stop using the deprecated jQuery.sap.require function and replace it with either sap.ui.require or add the dependency to the sap.ui.define at the top.

onPressDownload: function() {
  this.getView().setBusy(true);
  sap.ui.require([ // Instead of jQuery.sap.require("...")
    "pdfmake/build/pdfmake",
    "pdfmake/build/vfs_fonts",
  ], function(/*...*/) {
    // ...
    this.getView().setBusy(false);
  }.bind(this));
},

See https://stackoverflow.com/a/45277948/5846045

The API sap.ui.require can be used to fetch modules / JS files asynchronously on-demand.

⚠️ Please make sure to enable asynchronous loading of modules in index.html when bootstrapping:

// since 1.58.2
data-sap-ui-libs="sap.ui.core, sap.m, ..."
data-sap-ui-async="true" // replaces preload="async" and xx-async="true"

// for 1.58.1 and below
data-sap-ui-libs="sap.ui.core, sap.m, ..."
data-sap-ui-preload="async"
data-sap-ui-xx-async="true"

If those settings are missing, JS files will still be loaded synchronously!

Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170
  • Hi @Boghyon Hoffmann, I tried this, but it didn't work out. the second file `vfs_fonts` have a size around of 30mb. So on clicking a button, after 10-11 seconds, the view gets busy and then after executing the code inside function, view is set to false. It there anything I need to do so I get view busy after clicking a button until the view busy sets to false? – Suhas Bhattu Apr 24 '19 at 11:53
  • @SuhasBhattu So the busy indicator **does** get displayed now, but the next issue is that it gets displayed only after around 10 sec, right? Does it happen even with the decreased `busyIndicatorDelay`? Are those two files still fetched synchronously or asynchronously (in parallel)? What is the current UI5 version the app is running with? Have you added `data-sap-ui-async="true"` in _index.html_? Please make sure that there aren't any other synchronous requests when `onPressDownload` is executed. – Boghyon Hoffmann Apr 24 '19 at 12:10
  • Hi @Boghyan Hoffmann, apologies for the delay in answering. It works for `data-sap-ui-async="true"`. There's one thing for the `busyIndicatorDelay` is that I am trying to set the negative number so that view gets busy earlier. But it doesn't seem working out. – Suhas Bhattu Apr 26 '19 at 03:42
  • @SuhasBhattu Do you still have the same issue? Let us know if you could solve the problem. Otherwise, I don't think we can help much here with the given information. – Boghyon Hoffmann May 23 '19 at 18:42
-1

This works for me

onPressDownload: function () {
    var view = this.getView();
    view.setBusyIndicatorDelay(0);
    view.setBusy(true);
    setTimeout(function(){
        jQuery.sap.require('pdfmake.build.pdfmake');
        jQuery.sap.require('pdfmake.build.vfs_fonts');
        if (pdfMake) {
            var docDef = "";
            pdfMake.createPdf(docDef).download();
            view.setBusy(false);
       }
    }, 0);
}
Suhas Bhattu
  • 539
  • 4
  • 17