SAPUI5 Handling busy indicator in function import

Question

I want to include a busy handler in my function import.

First, i set the table to busy. Then when the calling function import is success or error, i will need to put the busy indicator to false.

The thing is, i need to use Promise.all to do that (both in success and error function) . anyone have any idea on how to use Promise.all in this case ?

        aSelectedItems.forEach(function (oSelectedItem) {

            var oParameter = {
                "ShopId": sShopId,
                "ProductId": oTable.getBinding("items").getModel().getProperty(oSelectedItem.getBindingContextPath() + "/ProductId"),
                "ProductUPC": oTable.getBinding("items").getModel().getProperty(oSelectedItem.getBindingContextPath() + "/CompetitorProductUpc")
            };

            this.getView().byId("idSmartTableItems").setBusy(true);

            oFunctionImportModel.callFunction("/AcceptShopItem", {
                method: "GET",
                urlParameters: oParameter,
                success: function () {
                    this.byId("idSmartTableItems").getTable().removeSelections();
                    this.getModel().refresh();
                }.bind(this),
                error: function (oError) {
                    this.clearMessages();
                    var sMessageBoxText = this.getResourceBundle().getText("errorMessageBox");
                    this.showMessage(oError, sMessageBoxText, false);
                }.bind(this)
            });
        }.bind(this));

Answer 1

You can wrap the forEach callback in Promises and save every promise in an array. This way, you can use Promise.all to resolve them.

var aPromises = [];
var oTable = this.byId("idSmartTableItems").getTable();

aSelectedItems.forEach(function (oSelectedItem) {
    aPromises.push(
        new Promise(function(resolve, reject) {
            var oParameter = {
                "ShopId": sShopId,
                "ProductId": oTable.getBinding("items").getModel().getProperty(oSelectedItem.getBindingContextPath() + "/ProductId"),
                "ProductUPC": oTable.getBinding("items").getModel().getProperty(oSelectedItem.getBindingContextPath() + "/CompetitorProductUpc")
            };

            oFunctionImportModel.callFunction("/AcceptShopItem", {
                method: "GET",
                urlParameters: oParameter,
                success: function (oData) {
                    resolve(oData);
                }.bind(this),
                error: function (oError) {
                    reject(oError);
                }.bind(this)
            });
        })
        );
    }.bind(this));

oTable.setBusy(true);

Promise.all(aPromises).then(
    // aData - array of each oData by the success callbacks
    function(aData) {
        oTable.setBusy(false);
        oTable.removeSelections();
        this.getModel().refresh();
    }.bind(this),
    // oError - the first error that happens
    function(oError) {
        oTable.setBusy(false);
        this.clearMessages();
        var sMessageBoxText = this.getResourceBundle().getText("errorMessageBox");
        this.showMessage(oError, sMessageBoxText, false);
    }.bind(this)
);