BusyIndicator for navigating between pages - sapui5

Question

I am quite new to SAPUI5 and still learning a lot.
Actually I am trying to set up a busydialog while navigating between two different views.
I already defined the busydialog and set it up on a press-Event after one hits the navigation button. The dialog is showing up, but Iam not really sure about the handling regarding the close event. I thought that onMatchedRoute could help me, but the dialog is not closing. My controller for the first page looks like:
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/core/format/NumberFormat",
"sap/m/BusyDialog"
], function(Controller, NumberFormat) {
"use strict";
var BusyDialogGlobal;
return Controller.extend("sap.turbo.ma.mc.controller.region.americas.AmFinance", {
onInit: function() {
BusyDialogGlobal = new sap.m.BusyDialog("GlobalBusyDialog",{title:"Please wait. . . "});
onHomePress: function() {
var oRouter = this.getOwnerComponent().getRouter();
oRouter.navTo("home");
var getDialog = sap.ui.getCore().byId("GlobalBusyDialog");
getDialog.open();
This part is working. I am not sure about further process handling part to close the busydialog after the second page/view is loaded. Maybe someone has a small snippet or example that could help me out here?

Answer 1

You are not defining your 'BusyDialogGlobal' in a global scope. It is defined in the controller scope for this view. Therefore in your second view probably you cant access it.
Two approaches you can do here (in the order I think are better):
Option 1
Build all your controllers extending a custom 'Base Controller', this way you will have access to its functions from all the children controllers. To do so, create a normal controller, extending from sap/ui/core/mvc/Controller as you have done. Call it 'BaseController' for example and save it in your controllers folder. Then create all your view controllers extending from the BaseController. Something like this:
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("mynamespace.controller.BaseController", {
onInit: function(){
this.BusyDialogGlobal = new sap.m.BusyDialog("GlobalBusyDialog",{title:"Please wait. . . "});
},
presentBusyDialog(){
this.BusyDialogGlobal.open()
}
dismissBusyDialog(){
this.BusyDialogGlobal.close()
}
}
});
Then in your view1.controller.js:
sap.ui.define([
"mynamespace/controller/BaseController"
], function (BaseController) {
"use strict";
return BaseController.extend("mynamespace.controller.View1", {
onNavigate: function(){
//Do your navigation logic here
//...
this.presentBusyDialog();
}
}
});
And in your View2.controller.js
sap.ui.define([
"mynamespace/controller/BaseController"
], function (BaseController) {
"use strict";
return BaseController.extend("mynamespace.controller.View2", {
onInit: function(){
this.dismissBusyDialog();
}
}
});
Option 2
Easier but less elegant, just instantiate the busyDialog in your Component scope and retrieve it from that scope when needed.
To instantiate it from a view controller:
this.getOwnerComponent().BusyDialogGlobal = new sap.m.BusyDialog("GlobalBusyDialog",{title:"Please wait. . . "});
To open it from whatever view controller when needed:
this.getOwnerComponent().BusyDialogGlobal.open()
To close it from whatever view controller when needed:
this.getOwnerComponent().BusyDialogGlobal.close()