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

[former_member182372]

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.