Let that flower bloom for you (Using Fiori loading dialog in custom application)

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.