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.
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.
Please open a Discussion marked as a Question instead of adding a comment.
Regards, Mike (Moderator)
SAP Technology RIG
how to get that particular blooming flower gif file??progress.gif
AFAIR there is no gif, they are set of “petals”
You have used progress.gif, its’ a gif right?
Hi, thanks for the post.
Do you have the progress.gif file?
Is it posible to upload an example or put it on JSFiddle?