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