Progress dialog is important part of SAPUI5 application. It prevents user from performing an action while work is in progress and actually shows when action is done.

There is a sap.m.BusyDialog control with ability to configure a dialog with custom icon etc. Works perfectly for standalone applications. But when application is embedded into Fiori Launchpad it would be great to have consistent user experience.

Here is a little how to use Fiori loading dialog in custom application. There is a control with a global ID – “loadingDialog”

So, we can get that flower blossom 😉 With a little help of my old friends – Fiddler and Chrome Developer Tools I figured out that “loadingDialog” is of type sap.ushell.ui.launchpad.LoadingDialog which extends sap.m.BusyDialog.

sap.m.BusyDialog.extend(“sap.ushell.ui.launchpad.LoadingDialog”…

Here is a first trick: you would expect it to implement the same set of open/close methods as a parent, but it actually implements another set: openLoadingScreen and closeLoadingScreen

Second trick: keep a reference to busy dialog in one place and control it with events.

here is some code (code be controller, view or component):

//Init
this.oLoadingDialog = sap.ui.getCore().byId("loadingDialog");
if(!this.oLoadingDialog)
{
     this.oLoadingDialog = new sap.m.BusyDialog( {
          customIcon : "img/progress.gif",
          customIconWidth : "10px",
          customIconHeight : "10px"
     });
}
.......
...getEventBus().subscribe("App", "StartProgressDialog",  this.startProgressDialog, this);
...getEventBus().subscribe("App", "StopProgressDialog",   this.stopProgressDialog, this);
.......
stopProgressDialog : function()
{
     if(jQuery.sap.isDeclared("sap.ushell.ui.launchpad.LoadingDialog")) //or if(sap.ui.getCore().byId("loadingDialog"))
     {
          this.oLoadingDialog.closeLoadingScreen();
     }
     else
     {
     this.oLoadingDialog.close();
     }
},
startProgressDialog : function()
{
     if(jQuery.sap.isDeclared("sap.ushell.ui.launchpad.LoadingDialog")) //or if(sap.ui.getCore().byId("loadingDialog"))
     {
          this.oLoadingDialog.openLoadingScreen();
     }
     else
     {
          this.oLoadingDialog.open();
     }
},

To start a loading dialog we just need to fire an event:

....getEventBus().publish("App", "StartProgressDialog", null);

and

....getEventBus().publish("App", "StopProgressDialog", null);

to stop it.