Asynchronous function in SAPUI5 - sapui5

Question

I'm using a function to open a dialog in SAPUI5. While this dialog is opening, some data should be set in the local storage of the browser. However, when I add the local storage function, it takes a few seconds to open the dialog.
Is there a way I can make the local storage async? I tried putting the function of the local storage after the opening of the dialog. But it doesn't change anything..
/* WHEN THE USER CLICKS ON AN ASSIGNMENT IN THE CALENDAR */
onClickAssignment: function(oEvent) {
var oAppointment = oEvent.getParameter("appointment");
this.lastAppointment = oAppointment;
if (oAppointment) {
var key = this.byId("PC1").getViewKey();
if (key === "Month") {
if (!this._oDetailsDialog || this._oDetailsDialog === null) {
// show assignment dialog
this._oDetailsDialog = sap.ui.xmlfragment(this.fragmentDetailsId, "be.xxxxxxxxxxx.fragment.viewAssignment", this);
this.getView().addDependent(this._oDetailsDialog);
}
} else {
if (!this._oDetailsDialog || this._oDetailsDialog === null) {
// show subassignment dialog
this._oDetailsDialog = sap.ui.xmlfragment(this.fragmentDetailsId, "be.xxxxxxxxxxx.fragment.viewSubassignment", this);
this.getView().addDependent(this._oDetailsDialog);
}
}
this.oAppBC = oAppointment.getBindingContext();
this._oDetailsDialog.setBindingContext(this.oAppBC);
this._oDetailsDialog.open();
this.lastClickedAssignment = oAppointment.getProperty("assignment");
this.lastClickedSubassignment = oAppointment.getProperty("subassignment");
//SET LOCAL STORAGE
// var stringifiedContext = CircularJSON.stringify(oAppointment.getBindingContext());
// var stringifiedAssignment = CircularJSON.stringify(oAppointment.getProperty("assignment"));
// var stringifiedSubassignment = CircularJSON.stringify(oAppointment.getProperty("subassignment"));
// this.setLocalStorage("context", stringifiedContext);
// this.setLocalStorage("assignment", stringifiedAssignment);
// this.setLocalStorage("subassignment", stringifiedSubassignment);
}
},

Answer 1

You can detach execution of that part of the code from the main execution thread by wrapping it into setTimeout:
/* WHEN THE USER CLICKS ON AN ASSIGNMENT IN THE CALENDAR */
onClickAssignment: function(oEvent) {
var oAppointment = oEvent.getParameter("appointment");
this.lastAppointment = oAppointment;
if (oAppointment) {
var key = this.byId("PC1").getViewKey();
if (key === "Month") {
if (!this._oDetailsDialog || this._oDetailsDialog === null) {
// show assignment dialog
this._oDetailsDialog = sap.ui.xmlfragment(this.fragmentDetailsId, "be.xxxxxxxxxxx.fragment.viewAssignment", this);
this.getView().addDependent(this._oDetailsDialog);
}
} else {
if (!this._oDetailsDialog || this._oDetailsDialog === null) {
// show subassignment dialog
this._oDetailsDialog = sap.ui.xmlfragment(this.fragmentDetailsId, "be.xxxxxxxxxxx.fragment.viewSubassignment", this);
this.getView().addDependent(this._oDetailsDialog);
}
}
this.oAppBC = oAppointment.getBindingContext();
this._oDetailsDialog.setBindingContext(this.oAppBC);
this._oDetailsDialog.open();
this.lastClickedAssignment = oAppointment.getProperty("assignment");
this.lastClickedSubassignment = oAppointment.getProperty("subassignment");
setTimeout(function () {
//SET LOCAL STORAGE
var stringifiedContext = CircularJSON.stringify(oAppointment.getBindingContext());
var stringifiedAssignment = CircularJSON.stringify(oAppointment.getProperty("assignment"));
var stringifiedSubassignment = CircularJSON.stringify(oAppointment.getProperty("subassignment"));
this.setLocalStorage("context", stringifiedContext);
this.setLocalStorage("assignment", stringifiedAssignment);
this.setLocalStorage("subassignment", stringifiedSubassignment);
});
}
},
OR you can also do it after open:
this._oDetailsDialog.attachEventOnce('afterOpen', function () {
//SET LOCAL STORAGE
// ...
});