Skip to Content
Author's profile photo Maksim Rashchynski

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”


loadingDialogDOM.PNG

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.

Assigned Tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hi,

          

      I am new to sap ui5,

      I have a requirement for the flower to display for more time till the master loads it's content.

      can u please ellaborate the step to do the same ?

      Thanks in advance.

      Author's profile photo Michael Appleby
      Michael Appleby

      Please open a Discussion marked as a Question instead of adding a comment.

      Regards, Mike (Moderator)

      SAP Technology RIG

      Author's profile photo Former Member
      Former Member

      how to get that particular blooming flower gif file??progress.gif

      Author's profile photo Maksim Rashchynski
      Maksim Rashchynski
      Blog Post Author

      AFAIR there is no gif, they are set of "petals"

      Author's profile photo Former Member
      Former Member

      You have used progress.gif, its' a gif right?

      Author's profile photo Former Member
      Former Member

      Hi, thanks for the post.

      Do you have the progress.gif file?

      Is it posible to upload an example or put it on JSFiddle?