Skip to Content
Actions

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

January 27, 2015 | 1,055 Views |
 fiorihtml5javascriptjsonloading dialogopenui5progress indicator
Follow RSS

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.

To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

  1. 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.

    (0) 

Leave a Reply