@sapui5/sap.ushell 1.138.1 → 1.139.0

package/src/main/js/sap/ushell/components/workPageBuilder/controller/WorkPageBuilder.controller.js

@@ -1,8 +1,8 @@
-//Copyright (c) 2009-2025 SAP SE, All Rights Reserved
+// Copyright (c) 2009-2025 SAP SE, All Rights Reserved
 
 /**
  * @file WorkPageBuilder controller for WorkPageBuilder view
- * @version 1.138.1
+ * @version 1.139.0
  */
 sap.ui.define([
     "sap/base/Log",
@@ -11,7 +11,6 @@ sap.ui.define([
     "sap/base/util/deepExtend",
     "sap/f/GridContainerItemLayoutData",
     "sap/m/library",
-    "sap/ui/core/Component",
     "sap/ui/core/Element",
     "sap/ui/core/Fragment",
     "sap/ui/core/InvisibleMessage",
@@ -30,14 +29,13 @@ sap.ui.define([
     "sap/ushell/components/workPageBuilder/controller/WorkPageBuilder.accessibility",
     "sap/ushell/components/workPageBuilder/controller/WorkPageBuilder.layout",
     "sap/ui/integration/library"
-], function (
+], (
     Log,
     Localization,
     ObjectPath,
     deepExtend,
     GridContainerItemLayoutData,
     mLibrary,
-    Component,
     Element,
     Fragment,
     InvisibleMessage,
@@ -56,24 +54,24 @@ sap.ui.define([
     WorkPageBuilderAccessibility,
     WorkPageBuilderLayoutHelper,
     integrationLibrary
-) {
+) => {
     "use strict";
 
     // shortcut for sap.ui.core.ValueState
-    var ValueState = coreLibrary.ValueState;
+    const ValueState = coreLibrary.ValueState;
 
     // PR: Provider, CO: (Content) Administrator, PG: Page Administrator, US: End User
     // US is commented for now, because we do not have personalization yet.
-    var CONFIGURATION_LEVELS = ["PR", "CO", "PG" /*, "US"*/];
-    var MIN_GRID_COLUMN_WIDTH = 6;
-    var MAX_GRID_COLUMN_WIDTH = 24;
-    var STEP_SIZE = 2;
-    var MAX_COLUMNS_PER_ROW = 4;
+    const CONFIGURATION_LEVELS = ["PR", "CO", "PG" /* , "US" */];
+    const MIN_GRID_COLUMN_WIDTH = 6;
+    const MAX_GRID_COLUMN_WIDTH = 24;
+    const STEP_SIZE = 2;
+    const MAX_COLUMNS_PER_ROW = 4;
 
-    var LoadState = mLibrary.LoadState;
-    var InvisibleMessageMode = coreLibrary.InvisibleMessageMode;
+    const LoadState = mLibrary.LoadState;
+    const InvisibleMessageMode = coreLibrary.InvisibleMessageMode;
 
-    var CardPreviewMode = integrationLibrary.CardPreviewMode;
+    const CardPreviewMode = integrationLibrary.CardPreviewMode;
 
     /**
      * Controller of the WorkPageBuilder view.
@@ -89,7 +87,7 @@ sap.ui.define([
     return Controller.extend("sap.ushell.components.workPageBuilder.controller.WorkPageBuilder", /** @lends sap.ushell.components.workPageBuilder.controller.WorkPageBuilder.prototype */ {
 
         onInit: async function () {
-            var oWorkPage = this.byId("workPage");
+            const oWorkPage = this.byId("workPage");
             this._fnDeleteRowHandler = this.deleteRow.bind(this);
             this._fnDeleteCellHandler = this.deleteCell.bind(this);
             this._fnSaveCardConfiguration = this._onSaveCardEditor.bind(this);
@@ -177,7 +175,7 @@ sap.ui.define([
          * @param {sap.ui.base.Event} oEvent The "borderReached" event of the GridContainer
          */
         onGridContainerBorderReached: function (oEvent) {
-            var oWorkPage = this.byId("workPage");
+            const oWorkPage = this.byId("workPage");
             this.oWorkPageBuilderAccessibility._handleBorderReached(oEvent, oWorkPage);
         },
 
@@ -189,33 +187,33 @@ sap.ui.define([
          * @param {sap.ui.base.Event} oEvent The "addColumn" event.
          */
         onAddColumn: function (oEvent) {
-            var oModel = this.getView().getModel();
-            var oColumnControl = oEvent.getSource();
-            var oRow = oColumnControl.getParent();
-            var iColumnIndex = oRow.indexOfAggregation("columns", oColumnControl);
-            var sRowBindingContextPath = oRow.getBindingContext().getPath();
-            var sColumnPath = sRowBindingContextPath + "/columns/";
-            var sColumnColumnWidthPath = oColumnControl.getBindingContext().getPath() + "/descriptor/value/columnWidth";
-            var aColumnsData = oModel.getProperty(sColumnPath);
-            var iColumnCount = aColumnsData.length;
-            var bAddToLeft = oEvent.getParameter("left");
+            const oModel = this.getView().getModel();
+            const oColumnControl = oEvent.getSource();
+            const oRow = oColumnControl.getParent();
+            const iColumnIndex = oRow.indexOfAggregation("columns", oColumnControl);
+            const sRowBindingContextPath = oRow.getBindingContext().getPath();
+            const sColumnPath = `${sRowBindingContextPath}/columns/`;
+            const sColumnColumnWidthPath = `${oColumnControl.getBindingContext().getPath()}/descriptor/value/columnWidth`;
+            const aColumnsData = oModel.getProperty(sColumnPath);
+            const iColumnCount = aColumnsData.length;
+            const bAddToLeft = oEvent.getParameter("left");
             if (iColumnCount >= MAX_COLUMNS_PER_ROW) {
                 return;
             }
-            var iColumnWidth = oColumnControl.getProperty("columnWidth");
-            var iColSize = Math.floor(iColumnWidth / 2) >= MIN_GRID_COLUMN_WIDTH ? Math.floor(iColumnWidth / 2) : MIN_GRID_COLUMN_WIDTH;
-            var iModulo = iColSize % 2;
+            const iColumnWidth = oColumnControl.getProperty("columnWidth");
+            const iColSize = Math.floor(iColumnWidth / 2) >= MIN_GRID_COLUMN_WIDTH ? Math.floor(iColumnWidth / 2) : MIN_GRID_COLUMN_WIDTH;
+            const iModulo = iColSize % 2;
             oModel.setProperty(sColumnColumnWidthPath, iColSize + iModulo);
 
-            var iIndex = oRow.indexOfAggregation("columns", oColumnControl) + (bAddToLeft === true ? 0 : 1);
-            var oNewColumn = this._createEmptyColumn(iColSize - iModulo);
+            const iIndex = oRow.indexOfAggregation("columns", oColumnControl) + (bAddToLeft === true ? 0 : 1);
+            const oNewColumn = this._createEmptyColumn(iColSize - iModulo);
 
             // Insert the new column by creating a new array to avoid mutation of the original array.
-            var aNewColumnsData = [aColumnsData.slice(0, iIndex), oNewColumn, aColumnsData.slice(iIndex)].flat();
+            const aNewColumnsData = [aColumnsData.slice(0, iIndex), oNewColumn, aColumnsData.slice(iIndex)].flat();
 
-            var iTotalColumns = aNewColumnsData.reduce(function (iAccumulator, oSingleColumn) {
+            const iTotalColumns = aNewColumnsData.reduce((iAccumulator, oSingleColumn) => {
                 return iAccumulator + this._getColumnWidth(oSingleColumn);
-            }.bind(this), 0);
+            }, 0);
 
             if (iTotalColumns > MAX_GRID_COLUMN_WIDTH) {
                 this._calculateColWidths(aNewColumnsData, iColumnIndex, iTotalColumns);
@@ -232,7 +230,7 @@ sap.ui.define([
          * @private
          */
         focusFirstItem: function (oEvent) {
-            var oWorkPage = oEvent.getSource();
+            const oWorkPage = oEvent.getSource();
             this.oWorkPageBuilderAccessibility.focusFirstItem(oWorkPage);
         },
 
@@ -308,13 +306,13 @@ sap.ui.define([
          * @since 1.109.0
          */
         setPageData: function (oPageData) {
-            var oMappedVisualizations = {};
-            var aUsedVisualizations = ObjectPath.get("workPage.usedVisualizations.nodes", oPageData);
-            var oWorkPageContents = ObjectPath.get("workPage.contents", oPageData);
+            let oMappedVisualizations = {};
+            const aUsedVisualizations = ObjectPath.get("workPage.usedVisualizations.nodes", oPageData);
+            const oWorkPageContents = ObjectPath.get("workPage.contents", oPageData);
 
             if (aUsedVisualizations && aUsedVisualizations.length > 0) {
                 // create a map for the usedVisualizations using the id as a key.
-                oMappedVisualizations = aUsedVisualizations.reduce(function (oAcc, oViz) {
+                oMappedVisualizations = aUsedVisualizations.reduce((oAcc, oViz) => {
                     oAcc[oViz.id] = oViz;
                     return oAcc;
                 }, {});
@@ -335,7 +333,7 @@ sap.ui.define([
          * @since 1.109.0
          */
         getPageData: function () {
-            var oMappedVisualizations = this.oModel.getProperty("/data/usedVisualizations") || {};
+            const oMappedVisualizations = this.oModel.getProperty("/data/usedVisualizations") || {};
             return {
                 workPage: {
                     contents: this.oModel.getProperty("/data/workPage"),
@@ -356,7 +354,7 @@ sap.ui.define([
          * @since 1.115.0
          */
         setVisualizationData: function (oVizNodes) {
-            return this.oContentFinderPromise.then(function (oContentFinder) {
+            return this.oContentFinderPromise.then((oContentFinder) => {
                 oContentFinder.setVisualizationData(oVizNodes);
             });
         },
@@ -385,7 +383,7 @@ sap.ui.define([
          * @private
          */
         setCategoryTree: function (aCategoryTree) {
-            return this.oContentFinderPromise.then(function (oContentFinder) {
+            return this.oContentFinderPromise.then((oContentFinder) => {
                 oContentFinder.setCategoryTree(aCategoryTree);
             });
         },
@@ -397,12 +395,12 @@ sap.ui.define([
          * @param {sap.ui.base.Event} oEvent The gridColumnsChange event.
          */
         onGridColumnsChange: function (oEvent) {
-            var iColumnCount = oEvent.getParameter("columns");
-            var oCell = oEvent.getSource();
+            const iColumnCount = oEvent.getParameter("columns");
+            const oCell = oEvent.getSource();
 
-            oCell.getWidgets().filter(function (oItem) {
+            oCell.getWidgets().filter((oItem) => {
                 return oItem.isA("sap.ui.integration.widgets.Card");
-            }).forEach(function (oCard) {
+            }).forEach((oCard) => {
                 oCard.setLayoutData(new GridContainerItemLayoutData({
                     columns: iColumnCount,
                     minRows: 1
@@ -417,25 +415,25 @@ sap.ui.define([
          * @param {sap.ui.base.Event} oEvent The "removeColumn" event.
          */
         onDeleteColumn: function (oEvent) {
-            var oModel = this.getView().getModel();
-            var oColumn = oEvent.getSource();
-            var iColumnWidth = oColumn.getColumnWidth();
-            var oRow = oColumn.getParent();
-            var iColumnIndex = oRow.indexOfAggregation("columns", oColumn);
-            var sRowBindingContextPath = oRow.getBindingContext().getPath();
-            var sColumnPath = sRowBindingContextPath + "/columns/";
-            var aColumns = oModel.getProperty(sColumnPath);
+            const oModel = this.getView().getModel();
+            const oColumn = oEvent.getSource();
+            const iColumnWidth = oColumn.getColumnWidth();
+            const oRow = oColumn.getParent();
+            const iColumnIndex = oRow.indexOfAggregation("columns", oColumn);
+            const sRowBindingContextPath = oRow.getBindingContext().getPath();
+            const sColumnPath = `${sRowBindingContextPath}/columns/`;
+            const aColumns = oModel.getProperty(sColumnPath);
 
             // filter out the column at the iColumnIndex instead of splicing to avoid mutation of the original array.
-            var aNewColumns = aColumns.filter(function (oCol, iIndex) {
+            const aNewColumns = aColumns.filter((oCol, iIndex) => {
                 return iIndex !== iColumnIndex;
             });
 
             // split the columnWidth among remaining cols
-            var iLoopCount = (iColumnWidth / 2);
-            var iIndex = iColumnIndex - 1 < 0 ? iColumnIndex : iColumnIndex - 1;
+            let iLoopCount = (iColumnWidth / 2);
+            let iIndex = iColumnIndex - 1 < 0 ? iColumnIndex : iColumnIndex - 1;
             while (iLoopCount > 0) {
-                var oCurrentColumn = aNewColumns[iIndex];
+                const oCurrentColumn = aNewColumns[iIndex];
                 this._setColumnWidth(oCurrentColumn, (this._getColumnWidth(oCurrentColumn)) + STEP_SIZE);
                 iIndex = ++iIndex >= aNewColumns.length ? 0 : iIndex++;
                 iLoopCount--;
@@ -453,7 +451,7 @@ sap.ui.define([
          *
          */
         onAddFirstRow: function () {
-            var sRowsPath = "/data/workPage/rows/";
+            const sRowsPath = "/data/workPage/rows/";
             this.getView().getModel().setProperty(sRowsPath, [this._createEmptyRow()]);
             this.getOwnerComponent().fireEvent("workPageEdited");
         },
@@ -465,17 +463,17 @@ sap.ui.define([
          * @param {sap.ui.base.Event} oEvent The "addRow" event.
          */
         onAddRow: function (oEvent) {
-            var oModel = this.getView().getModel();
-            var oRow = oEvent.getSource();
-            var oPage = this.byId("workPage");
-            var sRowsPath = "/data/workPage/rows/";
-            var aRows = oModel.getProperty(sRowsPath);
-            var oNewRow = this._createEmptyRow();
+            const oModel = this.getView().getModel();
+            const oRow = oEvent.getSource();
+            const oPage = this.byId("workPage");
+            const sRowsPath = "/data/workPage/rows/";
+            const aRows = oModel.getProperty(sRowsPath);
+            const oNewRow = this._createEmptyRow();
 
-            var iIndex = oPage.indexOfAggregation("rows", oRow) + (oEvent.getParameter("bottom") === true ? 1 : 0);
+            const iIndex = oPage.indexOfAggregation("rows", oRow) + (oEvent.getParameter("bottom") === true ? 1 : 0);
 
             // Insert the new row into the array by creating a new array to avoid mutation.
-            var aNewRows = [aRows.slice(0, iIndex), oNewRow, aRows.slice(iIndex)].flat();
+            const aNewRows = [aRows.slice(0, iIndex), oNewRow, aRows.slice(iIndex)].flat();
 
             oModel.setProperty(sRowsPath, aNewRows);
             this.getOwnerComponent().fireEvent("workPageEdited");
@@ -488,24 +486,24 @@ sap.ui.define([
          * @param {sap.ui.base.Event} oEvent The "columnResized" event.
          */
         onResize: function (oEvent) {
-            var iDiff = oEvent.getParameter("posXDiff");
-            var oColumn = oEvent.getSource();
-            var oRow = oColumn.getParent();
-            var iSingleColumnWidthPx = oRow.getSingleColumnWidth();
+            const iDiff = oEvent.getParameter("posXDiff");
+            const oColumn = oEvent.getSource();
+            const oRow = oColumn.getParent();
+            const iSingleColumnWidthPx = oRow.getSingleColumnWidth();
 
             if (iSingleColumnWidthPx <= 0) { return; }
 
-            var bRtl = Localization.getRTL();
-            var fDeltaFromOrigin = iDiff / iSingleColumnWidthPx;
+            const bRtl = Localization.getRTL();
+            const fDeltaFromOrigin = iDiff / iSingleColumnWidthPx;
 
             if (fDeltaFromOrigin > -1 && fDeltaFromOrigin < 1) { return; }
 
-            var iColumnsDelta = fDeltaFromOrigin < 0 ? Math.floor(iDiff / iSingleColumnWidthPx) : Math.ceil(iDiff / iSingleColumnWidthPx);
-            var sDragDirection = iColumnsDelta >= 0 ? "right" : "left";
-            var iFlexStep = sDragDirection === "right" ? STEP_SIZE : -STEP_SIZE;
-            var iRightColumnIndex = oRow.indexOfAggregation("columns", oColumn);
-            var iLeftColumnIndex = iRightColumnIndex - 1;
-            var aColumnFlexValues = oRow.getColumnFlexValues();
+            const iColumnsDelta = fDeltaFromOrigin < 0 ? Math.floor(iDiff / iSingleColumnWidthPx) : Math.ceil(iDiff / iSingleColumnWidthPx);
+            const sDragDirection = iColumnsDelta >= 0 ? "right" : "left";
+            let iFlexStep = sDragDirection === "right" ? STEP_SIZE : -STEP_SIZE;
+            const iRightColumnIndex = oRow.indexOfAggregation("columns", oColumn);
+            const iLeftColumnIndex = iRightColumnIndex - 1;
+            const aColumnFlexValues = oRow.getColumnFlexValues();
 
             iFlexStep = bRtl ? iFlexStep : -iFlexStep;
 
@@ -537,8 +535,8 @@ sap.ui.define([
          * @since 1.118.0
          */
         _resizeAllowed: function (iColumnCount, iLeftFlex, iRightFlex, iFlexStep) {
-            var oViewSettingsModel = this.getView().getModel("viewSettings");
-            var iColumnMinFlex = oViewSettingsModel.getProperty("/currentBreakpoint/columnMinFlex");
+            const oViewSettingsModel = this.getView().getModel("viewSettings");
+            const iColumnMinFlex = oViewSettingsModel.getProperty("/currentBreakpoint/columnMinFlex");
 
             // resize to left would result in too small column on the left
             if (iLeftFlex - iFlexStep < iColumnMinFlex) { return false; }
@@ -546,7 +544,7 @@ sap.ui.define([
             // resize to right would result in too small column on the right
             if (iRightFlex + iFlexStep < iColumnMinFlex) { return false; }
 
-            var iMaxColumnsPerRow = oViewSettingsModel.getProperty("/currentBreakpoint/maxColumnsPerRow");
+            const iMaxColumnsPerRow = oViewSettingsModel.getProperty("/currentBreakpoint/maxColumnsPerRow");
 
             // no resize allowed if there is a line break for WorkPageRows
             if (iColumnCount > iMaxColumnsPerRow) { return false; }
@@ -571,10 +569,10 @@ sap.ui.define([
          * @returns {Promise} A promise resolving when the dialog was opened or the card was deleted.
          */
         onDeleteCell: function (oEvent) {
-            var oCell = oEvent.getSource().getParent().getParent();
+            const oCell = oEvent.getSource().getParent().getParent();
 
             // No dialog is shown if the ell contains only a card.
-            var aWidgets = oCell.getWidgets();
+            const aWidgets = oCell.getWidgets();
             if (aWidgets?.[0] && aWidgets.length === 1 && aWidgets[0].isA("sap.ui.integration.widgets.Card")) {
                 return this.deleteCell(oEvent, {
                     cell: oCell,
@@ -584,25 +582,25 @@ sap.ui.define([
 
             // Show dialog for all other widgets.
             if (!this.oDeleteCell) {
-                var oRootView = this.getOwnerComponent().getRootControl();
+                const oRootView = this.getOwnerComponent().getRootControl();
                 this.oDeleteCell = Fragment.load({
                     id: oRootView.createId("cellDeleteDialog"),
                     name: "sap.ushell.components.workPageBuilder.view.WorkPageCellDeleteDialog",
                     controller: this
-                }).then(function (oDialog) {
+                }).then((oDialog) => {
                     oDialog.setModel(this.getView().getModel("i18n"), "i18n");
                     return oDialog;
-                }.bind(this));
+                });
             }
 
-            return this.oDeleteCell.then(function (oDialog) {
+            return this.oDeleteCell.then((oDialog) => {
                 oDialog.getBeginButton().detachEvent("press", this._fnDeleteCellHandler);
                 oDialog.getBeginButton().attachEvent("press", {
                     cell: oCell,
                     dialog: true
                 }, this._fnDeleteCellHandler);
                 oDialog.open();
-            }.bind(this));
+            });
         },
 
         /**
@@ -615,22 +613,22 @@ sap.ui.define([
          * @returns {Promise} A promise resolving when the cell has been deleted.
          */
         deleteCell: function (oEvent, cellData) {
-            var oCell = cellData.cell;
-            var oModel = this.getView().getModel();
-            var oColumn = oCell.getParent();
-            var iCellIndex = oColumn.indexOfAggregation("cells", oCell);
-            var sCellsPath = oColumn.getBindingContext().getPath() + "/cells";
-            var aCells = oModel.getProperty(sCellsPath);
+            const oCell = cellData.cell;
+            const oModel = this.getView().getModel();
+            const oColumn = oCell.getParent();
+            const iCellIndex = oColumn.indexOfAggregation("cells", oCell);
+            const sCellsPath = `${oColumn.getBindingContext().getPath()}/cells`;
+            const aCells = oModel.getProperty(sCellsPath);
 
             // Filter out the cell at iCellIndex instead of splicing to avoid mutation of the original array.
-            var aNewCells = aCells.filter(function (oOriginalCell, iIndex) {
+            const aNewCells = aCells.filter((oOriginalCell, iIndex) => {
                 return iIndex !== iCellIndex;
             });
 
             oModel.setProperty(sCellsPath, aNewCells);
             this.getOwnerComponent().fireEvent("workPageEdited");
             if (cellData.dialog) {
-                return this.oDeleteCell.then(function (oDialog) {
+                return this.oDeleteCell.then((oDialog) => {
                     oDialog.close();
                 });
             }
@@ -644,16 +642,16 @@ sap.ui.define([
          * @param {sap.ushell.ui.launchpad.VizInstanceCdm|sap.ushell.ui.launchpad.VizInstanceLink} oVizInstance the viz instance.
          */
         _deleteVisualization: function (oVizInstance) {
-            var oCell = oVizInstance.getParent().getParent();
-            var oVizInstanceContext = oVizInstance.getBindingContext();
-            var sVizInstancePath = oVizInstanceContext.getPath();
-            var oModel = this.getView().getModel();
-            var sWidgetsPath = sVizInstancePath.substring(0, sVizInstancePath.lastIndexOf("/"));
-            var iWidgetIndex = oCell.indexOfAggregation("widgets", oVizInstance);
-            var aWidgets = oModel.getProperty(sWidgetsPath);
+            const oCell = oVizInstance.getParent().getParent();
+            const oVizInstanceContext = oVizInstance.getBindingContext();
+            const sVizInstancePath = oVizInstanceContext.getPath();
+            const oModel = this.getView().getModel();
+            const sWidgetsPath = sVizInstancePath.substring(0, sVizInstancePath.lastIndexOf("/"));
+            const iWidgetIndex = oCell.indexOfAggregation("widgets", oVizInstance);
+            const aWidgets = oModel.getProperty(sWidgetsPath);
 
             // Filter out the widget at iWidgetIndex instead of splicing to avoid mutation of the original array.
-            var aNewWidgets = aWidgets.filter(function (oWidget, iIndex) {
+            const aNewWidgets = aWidgets.filter((oWidget, iIndex) => {
                 return iIndex !== iWidgetIndex;
             });
 
@@ -711,7 +709,7 @@ sap.ui.define([
             const oSource = oEvent.getSource(); // WorkPageColumn
             const oResourceBundle = this.getView().getModel("i18n").getResourceBundle();
 
-            return this.oContentFinderPromise.then(function (oContentFinderComponent) {
+            return this.oContentFinderPromise.then((oContentFinderComponent) => {
                 oContentFinderComponent.attachVisualizationsAdded(oSource, this._onAddVisualization, this);
                 oContentFinderComponent.attachVisualizationFilterApplied(oSource, this._onVisualizationFilterApplied, this);
                 oContentFinderComponent.show({
@@ -732,7 +730,7 @@ sap.ui.define([
                         ]
                     }
                 });
-            }.bind(this));
+            });
         },
 
         /**
@@ -747,7 +745,7 @@ sap.ui.define([
             const oSource = oEvent.getSource().getParent().getParent(); // WorkPageCell
             const oResourceBundle = this.getView().getModel("i18n").getResourceBundle();
 
-            return this.oContentFinderPromise.then(function (oContentFinderComponent) {
+            return this.oContentFinderPromise.then((oContentFinderComponent) => {
                 oContentFinderComponent.setContextData({ restrictedVisualizations: this._getRestrictedVisualizationIds(oSource) });
                 oContentFinderComponent.attachVisualizationsAdded(oSource, this._onAddVisualization, this);
                 oContentFinderComponent.attachVisualizationFilterApplied(oSource, this._onVisualizationFilterApplied, this);
@@ -764,7 +762,7 @@ sap.ui.define([
                         ]
                     }
                 });
-            }.bind(this));
+            });
         },
 
         /**
@@ -777,7 +775,7 @@ sap.ui.define([
          * @private
          */
         _getRestrictedVisualizationIds: function (oCell) {
-            return oCell.getWidgets().map(function (oWidget) {
+            return oCell.getWidgets().map((oWidget) => {
                 if (oWidget.isA("sap.ushell.ui.launchpad.VizInstanceCdm")) {
                     return oWidget.getProperty("vizRefId");
                 }
@@ -794,17 +792,17 @@ sap.ui.define([
          */
         _onAddVisualization: function (oEvent, oSource) {
             const oModel = this.getView().getModel();
-            var aSelectedVisualizations = oEvent.getParameter("visualizations");
+            const aSelectedVisualizations = oEvent.getParameter("visualizations");
 
             if (aSelectedVisualizations.length > 0) {
-                aSelectedVisualizations.forEach(function (oVisualization) {
-                    var sVizSelectedItemPath = "/data/usedVisualizations/" + oVisualization.id;
+                aSelectedVisualizations.forEach((oVisualization) => {
+                    const sVizSelectedItemPath = `/data/usedVisualizations/${oVisualization.id}`;
                     if (!oModel.getProperty(sVizSelectedItemPath)) {
                         oModel.setProperty(sVizSelectedItemPath, oVisualization.vizData);
                     }
                 });
 
-                var aWidgetData = this._instantiateWidgetData(aSelectedVisualizations);
+                const aWidgetData = this._instantiateWidgetData(aSelectedVisualizations);
 
                 if (oSource.isA("sap.ushell.components.workPageBuilder.controls.WorkPageCell")) {
                     this._setCellData(oSource, aWidgetData);
@@ -813,7 +811,6 @@ sap.ui.define([
                     this._setColumnData(oSource, aWidgetData);
                 }
             }
-
         },
 
         /**
@@ -825,10 +822,10 @@ sap.ui.define([
          * @private
          */
         _instantiateWidgetData: function (aSelectedVisualizations) {
-            var aIds = [];
-            var sId;
+            let aIds = [];
+            let sId;
 
-            return aSelectedVisualizations.map(function (oTile) {
+            return aSelectedVisualizations.map((oTile) => {
                 sId = this._generateUniqueId(aIds);
                 aIds = aIds.concat([sId]);
                 return {
@@ -837,7 +834,7 @@ sap.ui.define([
                         id: oTile.vizData.id
                     }
                 };
-            }.bind(this));
+            });
         },
 
         /**
@@ -850,8 +847,8 @@ sap.ui.define([
          */
         _setCellData: function (oCell, aWidgetData) {
             const oModel = this.getView().getModel();
-            var sCellPath = oCell.getBindingContext().getPath();
-            var oCellData = Object.assign({}, oModel.getProperty(sCellPath));
+            const sCellPath = oCell.getBindingContext().getPath();
+            const oCellData = Object.assign({}, oModel.getProperty(sCellPath));
 
             oCellData.widgets = oCellData.widgets.concat(aWidgetData);
 
@@ -904,27 +901,27 @@ sap.ui.define([
          * @param {sap.ui.base.Event} oEvent The "deleteRow" event.
          */
         onDeleteRow: function (oEvent) {
-            var oRootView = this.getOwnerComponent().getRootControl();
-            var oWorkPageRowContext = oEvent.getSource().getBindingContext();
+            const oRootView = this.getOwnerComponent().getRootControl();
+            const oWorkPageRowContext = oEvent.getSource().getBindingContext();
 
             if (!this.oLoadDeleteDialog) {
                 this.oLoadDeleteDialog = Fragment.load({
                     id: oRootView.createId("rowDeleteDialog"),
                     name: "sap.ushell.components.workPageBuilder.view.WorkPageRowDeleteDialog",
                     controller: this
-                }).then(function (oDialog) {
+                }).then((oDialog) => {
                     oDialog.setModel(this.getView().getModel("i18n"), "i18n");
                     return oDialog;
-                }.bind(this));
+                });
             }
 
-            return this.oLoadDeleteDialog.then(function (oDialog) {
+            return this.oLoadDeleteDialog.then((oDialog) => {
                 oDialog.getBeginButton().detachEvent("press", this._fnDeleteRowHandler);
                 oDialog.getBeginButton().attachEvent("press", {
                     rowContext: oWorkPageRowContext
                 }, this._fnDeleteRowHandler);
                 oDialog.open();
-            }.bind(this));
+            });
         },
 
         /**
@@ -936,19 +933,19 @@ sap.ui.define([
          * @param {object} oRowData Object containing the WorkPageRow context to delete.
          */
         deleteRow: function (oEvent, oRowData) {
-            var oModel = this.getView().getModel();
-            var oWorkPageRowContext = oRowData.rowContext;
-            var aRows = oModel.getProperty("/data/workPage/rows");
-            var oRowContextData = oWorkPageRowContext.getObject();
+            const oModel = this.getView().getModel();
+            const oWorkPageRowContext = oRowData.rowContext;
+            const aRows = oModel.getProperty("/data/workPage/rows");
+            const oRowContextData = oWorkPageRowContext.getObject();
 
             // Filter out the row with the given id to avoid mutation of the original array.
-            var aFilteredRows = aRows.filter(function (oRow) {
+            const aFilteredRows = aRows.filter((oRow) => {
                 return oRow.id !== oRowContextData.id;
             });
 
             oModel.setProperty("/data/workPage/rows", aFilteredRows);
             this.getOwnerComponent().fireEvent("workPageEdited");
-            return this.oLoadDeleteDialog.then(function (oDialog) {
+            return this.oLoadDeleteDialog.then((oDialog) => {
                 oDialog.close();
             });
         },
@@ -958,7 +955,7 @@ sap.ui.define([
          * @returns {Promise} A promise resolving when the dialog has been closed
          */
         onRowDeleteCancel: function () {
-            return this.oLoadDeleteDialog.then(function (oDialog) {
+            return this.oLoadDeleteDialog.then((oDialog) => {
                 oDialog.close();
             });
         },
@@ -969,7 +966,7 @@ sap.ui.define([
          * @returns {Promise} A promise resolving when the dialog has been closed
          */
         onCellDeleteCancel: function () {
-            return this.oDeleteCell.then(function (oDialog) {
+            return this.oDeleteCell.then((oDialog) => {
                 oDialog.close();
             });
         },
@@ -1001,24 +998,24 @@ sap.ui.define([
          * @returns {sap.ushell.ui.launchpad.VizInstance|sap.m.GenericTile|sap.ui.integration.widgets.Card} The resulting control.
          */
         widgetFactory: function (sWidgetId, oWidgetContext) {
-            var sVizId = oWidgetContext.getProperty("visualization/id");
+            const sVizId = oWidgetContext.getProperty("visualization/id");
 
             if (!sVizId) {
                 Log.error("No vizId found in widget context.");
                 return this._createErrorTile();
             }
 
-            var oVizData = this.getView().getModel().getProperty("/data/usedVisualizations/" + sVizId);
+            const oVizData = this.getView().getModel().getProperty(`/data/usedVisualizations/${sVizId}`);
 
             if (!oVizData || !oVizData.type) {
-                Log.error("No viz or vizType found for vizId " + sVizId);
+                Log.error(`No viz or vizType found for vizId ${sVizId}`);
                 return this._createErrorTile();
             }
 
-            var aWidgetConfigurations = oWidgetContext.getProperty("configurations") || [];
-            var aVizConfigurations = oVizData.configurations || [];
-            var aMergedAndSortedConfigurations = this._getMergedAndSortedConfigurations(aWidgetConfigurations, aVizConfigurations);
-            var sWidgetContextPath = oWidgetContext.getPath();
+            const aWidgetConfigurations = oWidgetContext.getProperty("configurations") || [];
+            const aVizConfigurations = oVizData.configurations || [];
+            const aMergedAndSortedConfigurations = this._getMergedAndSortedConfigurations(aWidgetConfigurations, aVizConfigurations);
+            const sWidgetContextPath = oWidgetContext.getPath();
 
             switch (oVizData.type) {
                 case "sap.card":
@@ -1033,7 +1030,7 @@ sap.ui.define([
                 case "ssuite.smartbusiness.tiles.comparison":
                     return this._createVizInstance(oVizData);
                 default:
-                    Log.error("Unknown type for widget " + oVizData.type);
+                    Log.error(`Unknown type for widget ${oVizData.type}`);
                     return this._createErrorTile();
             }
         },
@@ -1063,15 +1060,15 @@ sap.ui.define([
 
             // First, widget configurations and viz configurations are merged for each level in CONFIGURATION_LEVELS
             // Second, the merged configurations are sorted
-            var oConfigurations = CONFIGURATION_LEVELS.reduce(function (oMergedConfigurations, sLevel) {
-                var oWidgetConfigByLevel = aWidgetConfigurations.find(function (oWidgetConfig) {
+            const oConfigurations = CONFIGURATION_LEVELS.reduce((oMergedConfigurations, sLevel) => {
+                const oWidgetConfigByLevel = aWidgetConfigurations.find((oWidgetConfig) => {
                     return oWidgetConfig.level === sLevel;
                 });
-                var oVizConfigByLevel = aVizConfigurations.find(function (oVizConfig) {
+                const oVizConfigByLevel = aVizConfigurations.find((oVizConfig) => {
                     return oVizConfig.level === sLevel;
                 });
 
-                var oMergedConfigurationsByLevel = deepExtend({}, oVizConfigByLevel, oWidgetConfigByLevel);
+                const oMergedConfigurationsByLevel = deepExtend({}, oVizConfigByLevel, oWidgetConfigByLevel);
 
                 if (Object.keys(oMergedConfigurationsByLevel).length > 0) {
                     oMergedConfigurations[sLevel] = oMergedConfigurationsByLevel;
@@ -1083,7 +1080,6 @@ sap.ui.define([
             return this._sortConfigurations(Object.values(oConfigurations));
         },
 
-
         /**
          * Sort the widget's configuration by level: PR: Provider, CO: (Content) Administrator, PG: Page Administrator, US: End User
          *
@@ -1094,12 +1090,12 @@ sap.ui.define([
          */
 
         _sortConfigurations: function (aConfigurations) {
-            var oSortedConfigurations = aConfigurations && aConfigurations.sort(function (oWidgetConfigA, oWidgetConfigB) {
+            const oSortedConfigurations = aConfigurations && aConfigurations.sort((oWidgetConfigA, oWidgetConfigB) => {
                 return CONFIGURATION_LEVELS.indexOf(oWidgetConfigA.level) - CONFIGURATION_LEVELS.indexOf(oWidgetConfigB.level);
             });
 
             // PR —> CO —> PG —> US
-            return oSortedConfigurations.map(function (oWidgetConfiguration) {
+            return oSortedConfigurations.map((oWidgetConfiguration) => {
                 return oWidgetConfiguration.settings.value;
             });
         },
@@ -1122,7 +1118,7 @@ sap.ui.define([
                 delete oExtendedVizData._siteData.targetURL;
             }
 
-            var oVizInstance = this.oWorkPageVizInstantiation.createVizInstance(oExtendedVizData);
+            const oVizInstance = this.oWorkPageVizInstantiation.createVizInstance(oExtendedVizData);
 
             if (!oVizInstance) {
                 Log.error("No VizInstance was created.");
@@ -1172,8 +1168,8 @@ sap.ui.define([
          * @param {sap.ui.base.Event} oEvent The press event.
          */
         onVisualizationPress: function (oEvent) {
-            var sScope = oEvent.getParameter("scope");
-            var sAction = oEvent.getParameter("action");
+            const sScope = oEvent.getParameter("scope");
+            const sAction = oEvent.getParameter("action");
 
             if (sScope === "Actions" && sAction === "Remove") {
                 this._deleteVisualization(oEvent.getSource());
@@ -1192,11 +1188,11 @@ sap.ui.define([
          * @private
          */
         _createCard: function (oViz = {}, aWidgetConfigurations = [], aManifestChangesToApply = [], sWidgetContextPath = "") {
-            var oOptions = {};
-            var bHasDescriptor = oViz.descriptor && oViz.descriptor.value && oViz.descriptor.value["sap.card"];
-            var bHasDescriptorResources = oViz.descriptorResources && (oViz.descriptorResources.baseUrl || oViz.descriptorResources.descriptorPath);
-            var bPgLevelConfigurationsExist = aWidgetConfigurations.some(function (oConfig) { return oConfig.level === "PG"; });
-            var bIsConfigurable;
+            const oOptions = {};
+            const bHasDescriptor = oViz.descriptor && oViz.descriptor.value && oViz.descriptor.value["sap.card"];
+            const bHasDescriptorResources = oViz.descriptorResources && (oViz.descriptorResources.baseUrl || oViz.descriptorResources.descriptorPath);
+            const bPgLevelConfigurationsExist = aWidgetConfigurations.some((oConfig) => { return oConfig.level === "PG"; });
+            let bIsConfigurable;
 
             if (!bHasDescriptor && !bHasDescriptorResources) {
                 Log.error("No descriptor or descriptorResources for Card");
@@ -1228,10 +1224,10 @@ sap.ui.define([
                 oOptions.baseUrl += "/";
             }
 
-            var oCard = new Card(oOptions);
+            const oCard = new Card(oOptions);
 
             if (bIsConfigurable) {
-                var oConfigureActionDefinition = this._createCardConfigurationActionDefinition(
+                const oConfigureActionDefinition = this._createCardConfigurationActionDefinition(
                     oCard,
                     sWidgetContextPath,
                     this._openCardConfigurationEditor.bind(this)
@@ -1240,7 +1236,7 @@ sap.ui.define([
             }
 
             if (bPgLevelConfigurationsExist) {
-                var oResetActionDefinition = this._createCardResetActionDefinition(
+                const oResetActionDefinition = this._createCardResetActionDefinition(
                     aWidgetConfigurations,
                     sWidgetContextPath,
                     this._openResetCardConfigurationDialog.bind(this)
@@ -1335,9 +1331,9 @@ sap.ui.define([
                 this.oCardEditorDialogPromise = this._createCardEditorDialog(oContextData.card);
             }
 
-            var oCardEditorPromise = this._createCardEditor(oContextData.card);
+            const oCardEditorPromise = this._createCardEditor(oContextData.card);
 
-            return Promise.all([oCardEditorPromise, this.oCardEditorDialogPromise]).then(function (aInstances) {
+            return Promise.all([oCardEditorPromise, this.oCardEditorDialogPromise]).then((aInstances) => {
                 this.oCardEditorDialog = aInstances[1];
                 this.oCardEditorDialog.removeAllContent();
                 this.oCardEditorDialog.getBeginButton()
@@ -1346,10 +1342,9 @@ sap.ui.define([
                 this._setCardDialogTitle(this.oCardEditorDialog, oContextData.card);
                 this.oCardEditorDialog.addContent(aInstances[0]);
                 this.oCardEditorDialog.open();
-            }.bind(this));
+            });
         },
 
-
         /**
          * Opens the card reset dialog and attaches the reset button handler.
          *
@@ -1369,14 +1364,14 @@ sap.ui.define([
                 this.oCardResetDialogPromise = this._createResetCardConfigurationDialog();
             }
 
-            return this.oCardResetDialogPromise.then(function (oCardResetDialog) {
+            return this.oCardResetDialogPromise.then((oCardResetDialog) => {
                 this.oCardResetDialog = oCardResetDialog;
                 this.getView().addDependent(this.oCardResetDialog);
                 this.oCardResetDialog.getBeginButton()
                     .detachPress(this._fnResetCardConfiguration)
                     .attachPress(oContextData, this._fnResetCardConfiguration);
                 this.oCardResetDialog.open();
-            }.bind(this));
+            });
         },
 
         /**
@@ -1387,10 +1382,10 @@ sap.ui.define([
          * @private
          */
         _onResetCardConfigurations: function (oEvent, oContextData) {
-            var oDialog = oEvent.getSource().getParent();
-            var aWidgetConfigurations = oContextData.widgetConfigurations;
-            var sWidgetConfigurationsPath = oContextData.widgetContextPath + "/configurations";
-            var aRemainingConfigurations = aWidgetConfigurations.filter(function (oConfig) {
+            const oDialog = oEvent.getSource().getParent();
+            const aWidgetConfigurations = oContextData.widgetConfigurations;
+            const sWidgetConfigurationsPath = `${oContextData.widgetContextPath}/configurations`;
+            const aRemainingConfigurations = aWidgetConfigurations.filter((oConfig) => {
                 return oConfig.level !== "PG";
             });
 
@@ -1409,15 +1404,15 @@ sap.ui.define([
          * @private
          */
         _createResetCardConfigurationDialog: function () {
-            var oI18nBundle = this.getView().getModel("i18n").getResourceBundle();
-            var sDialogTitle = oI18nBundle.getText("WorkPage.CardEditor.DeleteConfigurationDialog.Title");
-            var sDialogContent = oI18nBundle.getText("WorkPage.CardEditor.DeleteConfigurationDialog.Content");
-            var sBeginButtonText = oI18nBundle.getText("WorkPage.CardEditor.DeleteConfigurationDialog.Accept");
-            var sEndButtonText = oI18nBundle.getText("WorkPage.CardEditor.DeleteConfigurationDialog.Deny");
+            const oI18nBundle = this.getView().getModel("i18n").getResourceBundle();
+            const sDialogTitle = oI18nBundle.getText("WorkPage.CardEditor.DeleteConfigurationDialog.Title");
+            const sDialogContent = oI18nBundle.getText("WorkPage.CardEditor.DeleteConfigurationDialog.Content");
+            const sBeginButtonText = oI18nBundle.getText("WorkPage.CardEditor.DeleteConfigurationDialog.Accept");
+            const sEndButtonText = oI18nBundle.getText("WorkPage.CardEditor.DeleteConfigurationDialog.Deny");
 
             return new Promise((resolve, reject) => {
                 sap.ui.require(["sap/m/Dialog", "sap/m/Button", "sap/m/Text"], (Dialog, Button, Text) => {
-                    var oDialog = new Dialog({
+                    const oDialog = new Dialog({
                         id: this.createId("cardConfigurationResetDialog"),
                         type: mLibrary.DialogType.Message,
                         state: ValueState.Warning,
@@ -1448,8 +1443,8 @@ sap.ui.define([
          * @private
          */
         _setCardDialogTitle: function (oDialog, oCard) {
-            var oI18nBundle = this.getView().getModel("i18n").getResourceBundle();
-            var sCardEditorTitle = this._getCardTitle(oCard)
+            const oI18nBundle = this.getView().getModel("i18n").getResourceBundle();
+            const sCardEditorTitle = this._getCardTitle(oCard)
                 ? oI18nBundle.getText("WorkPage.CardEditor.Title", [this._getCardTitle(oCard)])
                 : oI18nBundle.getText("WorkPage.CardEditor.Title.NoCardTitle");
             oDialog.setTitle(sCardEditorTitle);
@@ -1476,7 +1471,7 @@ sap.ui.define([
                                 })
                             );
                         },
-                            fReject
+                        fReject
                         );
                     },
                     fReject
@@ -1492,13 +1487,13 @@ sap.ui.define([
          * @private
          */
         _createCardEditorDialog: function (oCard) {
-            var oI18nBundle = this.getView().getModel("i18n").getResourceBundle();
-            var sCardEditorSaveText = oI18nBundle.getText("WorkPage.CardEditor.Save");
-            var sCardEditorCancelText = oI18nBundle.getText("WorkPage.CardEditor.Cancel");
+            const oI18nBundle = this.getView().getModel("i18n").getResourceBundle();
+            const sCardEditorSaveText = oI18nBundle.getText("WorkPage.CardEditor.Save");
+            const sCardEditorCancelText = oI18nBundle.getText("WorkPage.CardEditor.Cancel");
 
             return new Promise((resolve, reject) => {
                 sap.ui.require(["sap/m/Dialog", "sap/m/Button"], (Dialog, Button) => {
-                    var oDialog = new Dialog({
+                    const oDialog = new Dialog({
                         id: this.createId("cardEditorDialog"),
                         contentWidth: "40rem",
                         beginButton: new Button({
@@ -1538,14 +1533,14 @@ sap.ui.define([
          * @private
          */
         _onSaveCardEditor: function (oEvent, sWidgetContextPath) {
-            var oDialog = oEvent.getSource().getParent();
-            var oCardEditor = oDialog.getContent()[0];
-            var oCard = oCardEditor.getCard();
-            var sWidgetConfigurationsPath = sWidgetContextPath + "/configurations";
-            var oCurrentSettings = oCardEditor.getCurrentSettings();
-            var aWidgetConfigurations = this.oModel.getProperty(sWidgetConfigurationsPath) || [];
-
-            var oWidgetConfiguration = aWidgetConfigurations.find(function (oConfiguration) {
+            const oDialog = oEvent.getSource().getParent();
+            const oCardEditor = oDialog.getContent()[0];
+            const oCard = oCardEditor.getCard();
+            const sWidgetConfigurationsPath = `${sWidgetContextPath}/configurations`;
+            const oCurrentSettings = oCardEditor.getCurrentSettings();
+            let aWidgetConfigurations = this.oModel.getProperty(sWidgetConfigurationsPath) || [];
+
+            let oWidgetConfiguration = aWidgetConfigurations.find((oConfiguration) => {
                 return oConfiguration.level === "PG";
             });
 
@@ -1559,7 +1554,7 @@ sap.ui.define([
                 };
                 aWidgetConfigurations.push(oWidgetConfiguration);
             } else {
-                aWidgetConfigurations = aWidgetConfigurations.map(function (oConfiguration) {
+                aWidgetConfigurations = aWidgetConfigurations.map((oConfiguration) => {
                     if (oConfiguration.level === "PG") {
                         oConfiguration.settings.value = deepExtend({}, oConfiguration.settings.value, oCurrentSettings);
                     }
@@ -1605,14 +1600,14 @@ sap.ui.define([
          * @private
          */
         onCellDrop: function (oEvent) {
-            var oSourceCell = oEvent.getParameter("draggedControl");
-            var oTargetCell = oEvent.getParameter("droppedControl");
-            var sDropPosition = oEvent.getParameter("dropPosition");
-            var oSourceColumn = oSourceCell.getParent();
-            var oTargetColumn = oTargetCell.getParent();
+            const oSourceCell = oEvent.getParameter("draggedControl");
+            const oTargetCell = oEvent.getParameter("droppedControl");
+            const sDropPosition = oEvent.getParameter("dropPosition");
+            const oSourceColumn = oSourceCell.getParent();
+            const oTargetColumn = oTargetCell.getParent();
 
-            var iSourceIndex = oSourceColumn.indexOfAggregation("cells", oSourceCell);
-            var iTargetIndex = oTargetColumn.indexOfAggregation("cells", oTargetCell);
+            const iSourceIndex = oSourceColumn.indexOfAggregation("cells", oSourceCell);
+            let iTargetIndex = oTargetColumn.indexOfAggregation("cells", oTargetCell);
 
             // Increase the drop position if the dragged element is moved below the target element.
             if (sDropPosition === "After") {
@@ -1631,12 +1626,12 @@ sap.ui.define([
          * @private
          */
         onCellDropOnEmptyColumn: function (oEvent) {
-            var oSourceCell = oEvent.getParameter("draggedControl");
-            var oTargetColumn = oEvent.getParameter("droppedControl");
-            var oSourceColumn = oSourceCell.getParent();
+            const oSourceCell = oEvent.getParameter("draggedControl");
+            const oTargetColumn = oEvent.getParameter("droppedControl");
+            const oSourceColumn = oSourceCell.getParent();
 
-            var iSourceIndex = oSourceColumn.indexOfAggregation("cells", oSourceCell);
-            var iTargetIndex = 0;
+            const iSourceIndex = oSourceColumn.indexOfAggregation("cells", oSourceCell);
+            const iTargetIndex = 0;
 
             this._moveCell(oSourceColumn, oTargetColumn, iSourceIndex, iTargetIndex);
         },
@@ -1710,7 +1705,7 @@ sap.ui.define([
          */
         _moveVisualizationToCellOrColumn: function (oVisualization, oSourceCell, oTargetControl, iPositionInTargetColumn) {
             const oModel = this.getView().getModel();
-            const sCellWidgetsPath = oSourceCell.getBindingContext().getPath() + "/widgets";
+            const sCellWidgetsPath = `${oSourceCell.getBindingContext().getPath()}/widgets`;
             const aCellWidgets = oModel.getProperty(sCellWidgetsPath);
             const iIndexInSourceCell = oSourceCell.indexOfAggregation("widgets", oVisualization);
             const sSourceVisPath = oVisualization.getBindingContext().getPath();
@@ -1743,15 +1738,15 @@ sap.ui.define([
          * @since 1.116.0
          */
         _moveCell: function (oSourceColumn, oTargetColumn, iSourceIndex, iTargetIndex) {
-            var oModel = this.getView().getModel();
+            const oModel = this.getView().getModel();
 
-            var bSameContainer = oTargetColumn.getId() === oSourceColumn.getId();
+            const bSameContainer = oTargetColumn.getId() === oSourceColumn.getId();
 
-            var sSourceColumnCellsPath = oSourceColumn.getBindingContext().getPath() + "/cells";
-            var sTargetColumnCellsPath = oTargetColumn.getBindingContext().getPath() + "/cells";
+            const sSourceColumnCellsPath = `${oSourceColumn.getBindingContext().getPath()}/cells`;
+            const sTargetColumnCellsPath = `${oTargetColumn.getBindingContext().getPath()}/cells`;
 
-            var aSourceColumnCells = oModel.getProperty(sSourceColumnCellsPath);
-            var aTargetColumnCells = oModel.getProperty(sTargetColumnCellsPath);
+            const aSourceColumnCells = oModel.getProperty(sSourceColumnCellsPath);
+            let aTargetColumnCells = oModel.getProperty(sTargetColumnCellsPath);
 
             if (bSameContainer) {
                 // Decrease drop position if the dragged element is taken from before the drop position in the same container.
@@ -1765,7 +1760,7 @@ sap.ui.define([
             }
 
             // Filter the dragged item from the source array instead of splicing to avoid mutation.
-            var aNewDragColumnCells = aSourceColumnCells.filter(function (oWidget, iIndex) {
+            const aNewDragColumnCells = aSourceColumnCells.filter((oWidget, iIndex) => {
                 return iIndex !== iSourceIndex;
             });
 
@@ -1775,7 +1770,7 @@ sap.ui.define([
             }
 
             // Insert the dragged object into a new target array to avoid mutation.
-            var aNewDropColumnCells = [aTargetColumnCells.slice(0, iTargetIndex), aSourceColumnCells[iSourceIndex], aTargetColumnCells.slice(iTargetIndex)].flat();
+            const aNewDropColumnCells = [aTargetColumnCells.slice(0, iTargetIndex), aSourceColumnCells[iSourceIndex], aTargetColumnCells.slice(iTargetIndex)].flat();
 
             oModel.setProperty(sSourceColumnCellsPath, aNewDragColumnCells);
             oModel.setProperty(sTargetColumnCellsPath, aNewDropColumnCells);
@@ -1790,11 +1785,11 @@ sap.ui.define([
          * @param {sap.ui.base.Event} oEvent The drop event.
          */
         onWidgetOnCellDrop: function (oEvent) {
-            var oDragged = oEvent.getParameter("draggedControl");
-            var oSourceCell = oDragged.getParent().getParent();
-            var oTargetCell = oEvent.getParameter("droppedControl");
-            var iDragPosition = oSourceCell.indexOfAggregation("widgets", oDragged);
-            var iDropPosition = oTargetCell.getBindingContext().getProperty("widgets").length;
+            const oDragged = oEvent.getParameter("draggedControl");
+            const oSourceCell = oDragged.getParent().getParent();
+            const oTargetCell = oEvent.getParameter("droppedControl");
+            const iDragPosition = oSourceCell.indexOfAggregation("widgets", oDragged);
+            const iDropPosition = oTargetCell.getBindingContext().getProperty("widgets").length;
 
             this._moveVisualization(oSourceCell, oTargetCell, iDragPosition, iDropPosition);
         },
@@ -1820,16 +1815,16 @@ sap.ui.define([
          * @param {sap.ui.base.Event} oEvent The drop event.
          */
         onGridDrop: function (oEvent) {
-            var oTargetCell = oEvent.getSource();
-            var oDragged = oEvent.getParameter("draggedControl");
-            var oDropped = oEvent.getParameter("droppedControl");
-            var sInsertPosition = oEvent.getParameter("dropPosition");
-            var oSourceCell = oDragged.getParent().getParent();
+            const oTargetCell = oEvent.getSource();
+            const oDragged = oEvent.getParameter("draggedControl");
+            const oDropped = oEvent.getParameter("droppedControl");
+            const sInsertPosition = oEvent.getParameter("dropPosition");
+            const oSourceCell = oDragged.getParent().getParent();
 
-            var iDragPosition = oSourceCell.indexOfAggregation("widgets", oDragged);
-            var iDropPosition = oTargetCell.indexOfAggregation("widgets", oDropped);
+            const iDragPosition = oSourceCell.indexOfAggregation("widgets", oDragged);
+            let iDropPosition = oTargetCell.indexOfAggregation("widgets", oDropped);
 
-            var bSameContainer = oTargetCell.getId() === oSourceCell.getId();
+            const bSameContainer = oTargetCell.getId() === oSourceCell.getId();
 
             // Increase the drop position if the dragged element is moved to the right.
             if (sInsertPosition === "After") {
@@ -1863,19 +1858,19 @@ sap.ui.define([
          * @private
          */
         _moveVisualization: function (oSourceCell, oTargetCell, iDragPosition, iDropPosition) {
-            var oModel = this.getView().getModel();
+            const oModel = this.getView().getModel();
 
-            var sDragContainerWidgetsPath = oSourceCell.getBindingContext().getPath() + "/widgets";
-            var sDropContainerWidgetsPath = oTargetCell.getBindingContext().getPath() + "/widgets";
-            var bSameCell = sDragContainerWidgetsPath === sDropContainerWidgetsPath;
+            const sDragContainerWidgetsPath = `${oSourceCell.getBindingContext().getPath()}/widgets`;
+            const sDropContainerWidgetsPath = `${oTargetCell.getBindingContext().getPath()}/widgets`;
+            const bSameCell = sDragContainerWidgetsPath === sDropContainerWidgetsPath;
 
-            var aDragContainerWidgets = oModel.getProperty(sDragContainerWidgetsPath);
-            var aDropContainerWidgets = oModel.getProperty(sDropContainerWidgetsPath);
+            const aDragContainerWidgets = oModel.getProperty(sDragContainerWidgetsPath);
+            let aDropContainerWidgets = oModel.getProperty(sDropContainerWidgetsPath);
 
-            var oDraggedObject = aDragContainerWidgets[iDragPosition];
+            const oDraggedObject = aDragContainerWidgets[iDragPosition];
 
             // Filter the dragged item from the source array instead of splicing to avoid mutation.
-            var aNewDragContainerWidgets = aDragContainerWidgets.filter(function (oWidget, iIndex) {
+            const aNewDragContainerWidgets = aDragContainerWidgets.filter((oWidget, iIndex) => {
                 return iIndex !== iDragPosition;
             });
 
@@ -1885,7 +1880,7 @@ sap.ui.define([
             }
 
             // Insert the dragged object into a new target array to avoid mutation.
-            var aNewDropContainerWidgets = [aDropContainerWidgets.slice(0, iDropPosition), oDraggedObject, aDropContainerWidgets.slice(iDropPosition)].flat();
+            const aNewDropContainerWidgets = [aDropContainerWidgets.slice(0, iDropPosition), oDraggedObject, aDropContainerWidgets.slice(iDropPosition)].flat();
 
             oModel.setProperty(sDragContainerWidgetsPath, aNewDragContainerWidgets);
             oModel.setProperty(sDropContainerWidgetsPath, aNewDropContainerWidgets);
@@ -1901,11 +1896,11 @@ sap.ui.define([
          * @returns {boolean} The result indicating if tileMode is active.
          */
         tileMode: function (aWidgets) {
-            var oModel = this.getView().getModel();
-            var oUsedViz;
+            const oModel = this.getView().getModel();
+            let oUsedViz;
 
-            return !!aWidgets && (aWidgets.length > 1 || !aWidgets.some(function (oWidget) {
-                oUsedViz = oModel.getProperty("/data/usedVisualizations/" + ObjectPath.get("visualization.id", oWidget));
+            return !!aWidgets && (aWidgets.length > 1 || !aWidgets.some((oWidget) => {
+                oUsedViz = oModel.getProperty(`/data/usedVisualizations/${ObjectPath.get("visualization.id", oWidget)}`);
                 return ObjectPath.get("type", oUsedViz) === "sap.card";
             }));
         },
@@ -1932,11 +1927,11 @@ sap.ui.define([
          * @private
          */
         _updateModelWithColumnWidths: function (oRow, iLeftColumnIndex, iRightColumnIndex, iNewLeftColumnWidth, iNewRightColumnWidth) {
-            var oModel = this.getView().getModel();
-            var oRowBindingContext = oRow.getBindingContext();
-            var sRowBindingContextPath = oRowBindingContext.getPath();
-            var sLeftColumnPath = sRowBindingContextPath + "/columns/" + iLeftColumnIndex + "/descriptor/value/columnWidth";
-            var sRightColumnPath = sRowBindingContextPath + "/columns/" + iRightColumnIndex + "/descriptor/value/columnWidth";
+            const oModel = this.getView().getModel();
+            const oRowBindingContext = oRow.getBindingContext();
+            const sRowBindingContextPath = oRowBindingContext.getPath();
+            const sLeftColumnPath = `${sRowBindingContextPath}/columns/${iLeftColumnIndex}/descriptor/value/columnWidth`;
+            const sRightColumnPath = `${sRowBindingContextPath}/columns/${iRightColumnIndex}/descriptor/value/columnWidth`;
             oModel.setProperty(sLeftColumnPath, iNewLeftColumnWidth);
             oModel.setProperty(sRightColumnPath, iNewRightColumnWidth);
         },
@@ -1972,7 +1967,7 @@ sap.ui.define([
          * @private
          */
         _calculateColWidths: function (aColumns, iColumnIndex, iTotalColumns) {
-            var oColumn = aColumns[iColumnIndex];
+            const oColumn = aColumns[iColumnIndex];
 
             if (this._getColumnWidth(oColumn) - STEP_SIZE >= MIN_GRID_COLUMN_WIDTH) {
                 this._setColumnWidth(oColumn, this._getColumnWidth(oColumn) - STEP_SIZE);
@@ -1980,7 +1975,7 @@ sap.ui.define([
             }
 
             if (iTotalColumns > MAX_GRID_COLUMN_WIDTH) {
-                var nextIndex = iColumnIndex - 1 >= 0 ? iColumnIndex - 1 : aColumns.length - 1;
+                const nextIndex = iColumnIndex - 1 >= 0 ? iColumnIndex - 1 : aColumns.length - 1;
                 this._calculateColWidths(aColumns, nextIndex, iTotalColumns);
             }
 
@@ -2040,12 +2035,12 @@ sap.ui.define([
                 this.oHost._setContainer(this.getOwnerComponent().getUshellContainer());
                 // create a property binding for navigationDisabled to forward to host if a model is present.
                 if (this.oModel) {
-                    var oNavDisabledBinding = this.oModel.bindProperty("/navigationDisabled");
+                    const oNavDisabledBinding = this.oModel.bindProperty("/navigationDisabled");
                     this.oHost._setNavigationDisabled(oNavDisabledBinding.getValue());
                     // listen to changes on navigationDisabled and propagate to host
-                    oNavDisabledBinding.attachChange(function (oEvent) {
+                    oNavDisabledBinding.attachChange((oEvent) => {
                         this.oHost._setNavigationDisabled(oEvent.getSource().getValue());
-                    }.bind(this));
+                    });
                 }
             }
         },
@@ -2085,26 +2080,26 @@ sap.ui.define([
          */
         _generateUniqueId: function (aExistingIds) {
             // make a copy to not change the passed array.
-            var aIds = (aExistingIds || []).concat([]);
-            var oWorkPage = this.oModel.getProperty("/data/workPage");
-            var fnCollectIds = this._collectIds.bind(this);
+            let aIds = (aExistingIds || []).concat([]);
+            const oWorkPage = this.oModel.getProperty("/data/workPage");
+            const fnCollectIds = this._collectIds.bind(this);
 
             aIds = aIds.concat(fnCollectIds(oWorkPage));
 
-            (oWorkPage.rows || []).forEach(function (oRow) {
+            (oWorkPage.rows || []).forEach((oRow) => {
                 aIds = aIds.concat(fnCollectIds(oRow));
-                (oRow.columns || []).forEach(function (oColumn) {
+                (oRow.columns || []).forEach((oColumn) => {
                     aIds = aIds.concat(fnCollectIds(oColumn));
-                    (oColumn.cells || []).forEach(function (oCell) {
+                    (oColumn.cells || []).forEach((oCell) => {
                         aIds = aIds.concat(fnCollectIds(oCell));
-                        (oCell.widgets || []).forEach(function (oWidget) {
+                        (oCell.widgets || []).forEach((oWidget) => {
                             aIds = aIds.concat(fnCollectIds(oWidget));
                         });
                     });
                 });
             });
 
-            aIds = aIds.filter(function (sId) {
+            aIds = aIds.filter((sId) => {
                 return !!sId;
             });
 
@@ -2120,10 +2115,10 @@ sap.ui.define([
          * @since 1.116.0
          */
         _collectIds: function (oEntity) {
-            var aIds = [oEntity.id];
-            var aSettings = oEntity.configurations || [];
+            const aIds = [oEntity.id];
+            const aSettings = oEntity.configurations || [];
 
-            var aConfigIds = aSettings.map(function (oConfig) {
+            const aConfigIds = aSettings.map((oConfig) => {
                 return oConfig.id;
             });