@sapui5/sap.ushell 1.115.1 → 1.117.0

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

@@ -2,7 +2,7 @@
 
 /**
  * @file WorkPageBuilder controller for WorkPageBuilder view
- * @version 1.115.1
+ * @version 1.117.0
  */
 sap.ui.define([
     "sap/base/Log",
@@ -11,26 +11,25 @@ sap.ui.define([
     "sap/f/GridContainerItemLayoutData",
     "sap/m/library",
     "sap/ui/core/Component",
+    "sap/ui/core/Configuration",
     "sap/ui/core/Core",
     "sap/ui/core/Fragment",
     "sap/ui/core/InvisibleMessage",
     "sap/ui/core/library",
     "sap/ui/core/mvc/Controller",
-    "sap/ui/core/theming/Parameters",
     "sap/ui/integration/ActionDefinition",
     "sap/ushell/components/workPageBuilder/controller/WorkPageHost",
-    "sap/ui/integration/designtime/editor/CardEditor",
     "sap/ui/integration/widgets/Card",
     "sap/ui/model/json/JSONModel",
-    "sap/ushell/Config",
-    "sap/ushell/EventHub",
     "sap/ushell/adapters/cdm/v3/_LaunchPage/readUtils",
     "sap/ushell/adapters/cdm/v3/_LaunchPage/readVisualizations",
     "sap/ushell/adapters/cdm/v3/utilsCdm",
-    "sap/ushell/resources",
     "sap/ushell/services/_VisualizationInstantiation/VizInstanceCdm",
     "sap/ushell/utils",
-    "sap/ushell/components/workPageBuilder/controller/WorkPageBuilder.accessibility"
+    "sap/ushell/components/workPageBuilder/controller/WorkPageBuilder.accessibility",
+    "sap/ushell/components/workPageBuilder/controller/WorkPageBuilder.layout",
+    "sap/ui/integration/library",
+    "sap/ushell/EventHub"
 ], function (
     Log,
     ObjectPath,
@@ -38,26 +37,25 @@ sap.ui.define([
     GridContainerItemLayoutData,
     mLibrary,
     Component,
+    Configuration,
     Core,
     Fragment,
     InvisibleMessage,
     coreLibrary,
     Controller,
-    Parameters,
     ActionDefinition,
     WorkPageHost,
-    CardEditor,
     Card,
     JSONModel,
-    Config,
-    EventHub,
     readUtils,
     readVisualizations,
     utilsCdm,
-    resources,
     VizInstanceCdm,
     utils,
-    WorkPageBuilderAccessibility
+    WorkPageBuilderAccessibility,
+    WorkPageBuilderLayoutHelper,
+    integrationLibrary,
+    EventHub
 ) {
     "use strict";
 
@@ -72,6 +70,8 @@ sap.ui.define([
     var LoadState = mLibrary.LoadState;
     var InvisibleMessageMode = coreLibrary.InvisibleMessageMode;
 
+    var CardPreviewMode = integrationLibrary.CardPreviewMode;
+
     /**
      * Controller of the WorkPageBuilder view.
      *
@@ -87,37 +87,30 @@ sap.ui.define([
         /** @lends sap.ushell.components.workPageBuilder.controller.WorkPageBuilder.prototype */ {
 
             onInit: function () {
+                var oWorkPage = this.byId("sapCepWorkPage");
                 this._fnDeleteRowHandler = this.deleteRow.bind(this);
                 this._fnSaveCardConfiguration = this._onSaveCardEditor.bind(this);
+                this._fnResetCardConfiguration = this._onResetCardConfigurations.bind(this);
 
                 this.oModel = new JSONModel({
                     maxColumns: MAX_COLUMNS_PER_ROW,
                     editMode: false,
+                    previewMode: true,
                     loaded: false,
                     navigationDisabled: false,
                     showFooter: false,
+                    showPageTitle: true,
                     data: {
-                        WorkPage: null,
-                        Visualizations: [],
-                        UsedVisualizations: []
+                        workPage: null,
+                        visualizations: [],
+                        usedVisualizations: []
                     }
                 });
                 this.oModel.setSizeLimit(Infinity);
                 this._saveHost();
 
-                this._oViewSettingsModel = new JSONModel({
-                    gridContainerGap: {},
-                    gridContainerRowSize: {}
-                });
-                this.getView().setModel(this._oViewSettingsModel, "viewSettings");
-
-                var fnBoundSetGridContainerSizes = this._setGridContainerSizes.bind(this);
-                Config.on("/core/home/sizeBehavior").do(fnBoundSetGridContainerSizes);
-                EventHub.on("themeChanged").do(fnBoundSetGridContainerSizes);
-                this._setGridContainerSizes();
-
-                this.byId("sapCepWorkPage").bindElement({
-                    path: "/data/WorkPage"
+                oWorkPage.bindElement({
+                    path: "/data/workPage"
                 });
 
                 this.oWorkPageBuilderAccessibility = new WorkPageBuilderAccessibility();
@@ -126,6 +119,9 @@ sap.ui.define([
                     .then(function (oVisualizationInstantiation) {
                         this._oVizInstantiationService = oVisualizationInstantiation;
                         this.getView().setModel(this.oModel);
+
+                        WorkPageBuilderLayoutHelper.register(oWorkPage);
+                        this.getView().setModel(WorkPageBuilderLayoutHelper.getModel(), "viewSettings");
                     }.bind(this));
             },
 
@@ -154,8 +150,8 @@ sap.ui.define([
                 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/columnWidth";
+                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");
@@ -184,6 +180,18 @@ sap.ui.define([
                 this.getOwnerComponent().fireEvent("workPageEdited");
             },
 
+            /**
+             * Sets the focus on the first item in the first GridContainer on the WorkPage.
+             *
+             * @param {sap.base.Event} oEvent The afterRendering event.
+             * @since 1.116.0
+             * @private
+             */
+            focusFirstItem: function (oEvent) {
+                var oWorkPage = oEvent.getSource();
+                this.oWorkPageBuilderAccessibility.focusFirstItem(oWorkPage);
+            },
+
             /**
              * Set the editMode to true or false
              * @param {boolean} bEditMode true or false
@@ -195,6 +203,27 @@ sap.ui.define([
                 this.oModel.setProperty("/editMode", !!bEditMode);
             },
 
+            /**
+             * Set the previewMode to true or false
+             * @param {boolean} bPreviewMode true or false
+             *
+             * @private
+             * @since 1.116.0
+             */
+            setPreviewMode: function (bPreviewMode) {
+                this.oModel.setProperty("/previewMode", !!bPreviewMode);
+            },
+
+            /**
+             * Get the previewMode property from the model
+             * @returns {boolean} the previewMode property value
+             * @private
+             * @since 1.116.0
+             */
+            getPreviewMode: function () {
+                return this.oModel.getProperty("/previewMode");
+            },
+
             /**
              * Get the editMode property from the model
              * @returns {boolean} the editMode property value
@@ -216,46 +245,57 @@ sap.ui.define([
                 this.oModel.setProperty("/showFooter", !!bVisible);
             },
 
+            /**
+             * Set the showPageTitle property to true or false
+             * @param {boolean} bVisible true or false
+             *
+             * @private
+             * @since 1.116.0
+             */
+            setShowPageTitle: function (bVisible) {
+                this.oModel.setProperty("/showPageTitle", !!bVisible);
+            },
+
             /**
              * Set the model data with the WorkPage data
-             * @param {{WorkPage: object, UsedVisualizations: object[]}} oPageData WorkPage data object
+             * @param {{workPage: object, usedVisualizations: object[]}} oPageData WorkPage data object
              *
              * @private
              * @since 1.109.0
              */
             setPageData: function (oPageData) {
                 var oMappedVisualizations = {};
-                var aUsedVisualizations = ObjectPath.get("WorkPage.UsedVisualizations.nodes", oPageData);
-                var oWorkPageContents = ObjectPath.get("WorkPage.Contents", oPageData);
+                var aUsedVisualizations = ObjectPath.get("workPage.usedVisualizations.nodes", oPageData);
+                var oWorkPageContents = ObjectPath.get("workPage.contents", oPageData);
 
                 if (aUsedVisualizations && aUsedVisualizations.length > 0) {
-                    // create a map for the UsedVisualizations using the Id as a key.
+                    // create a map for the usedVisualizations using the id as a key.
                     oMappedVisualizations = aUsedVisualizations.reduce(function (oAcc, oViz) {
-                        oAcc[oViz.Id] = oViz;
+                        oAcc[oViz.id] = oViz;
                         return oAcc;
                     }, {});
                 }
 
-                this.oModel.setProperty("/data/UsedVisualizations", oMappedVisualizations);
-                this.oModel.setProperty("/data/WorkPage", oWorkPageContents);
+                this.oModel.setProperty("/data/usedVisualizations", oMappedVisualizations);
+                this.oModel.setProperty("/data/workPage", oWorkPageContents);
                 this.oModel.setProperty("/loaded", true);
             },
 
             /**
              * Get the WorkPage data from the model.
-             * It must also include the UsedVisualizations array, because of the reuse scenario.
+             * It must also include the usedVisualizations array, because of the reuse scenario.
              * It is necessary that the same data structure is returned that is put into setPageData.
              *
-             * @returns {{WorkPage: {Contents: object, UsedVisualizations: {nodes: object[]} }}} The WorkPage data to save.
+             * @returns {{workPage: {contents: object, usedVisualizations: {nodes: object[]} }}} The WorkPage data to save.
              * @private
              * @since 1.109.0
              */
             getPageData: function () {
-                var oMappedVisualizations = this.oModel.getProperty("/data/UsedVisualizations") || {};
+                var oMappedVisualizations = this.oModel.getProperty("/data/usedVisualizations") || {};
                 return {
-                    WorkPage: {
-                        Contents: this.oModel.getProperty("/data/WorkPage"),
-                        UsedVisualizations: {
+                    workPage: {
+                        contents: this.oModel.getProperty("/data/workPage"),
+                        usedVisualizations: {
                             nodes: Object.values(oMappedVisualizations)
                         }
                     }
@@ -265,7 +305,7 @@ sap.ui.define([
             /**
              * Set the visualization data for the ContentFinder.
              *
-             * @param {{Visualizations: {nodes: object[]}}} oVizNodes an Array of Visualizations' objects
+             * @param {{visualizations: {nodes: object[]}}} oVizNodes an Array of Visualizations' objects
              * @returns {Promise} A promise resolving when the data has been set to the contentFinder
              *
              * @private
@@ -280,7 +320,7 @@ sap.ui.define([
             /**
              * Set the paginated visualization data for the ContentFinder.
              *
-             * @param {{Visualizations: {nodes: object[]}}} oVizNodes an Array of Visualizations' objects
+             * @param {{visualizations: {nodes: object[]}}} oVizNodes an Array of Visualizations' objects
              * @returns {Promise} A promise resolving when the data has been set to the contentFinder
              *
              * @private
@@ -325,7 +365,7 @@ sap.ui.define([
                 var oRow = oColumn.getParent();
                 var iColumnIndex = oRow.indexOfAggregation("columns", oColumn);
                 var sRowBindingContextPath = oRow.getBindingContext().getPath();
-                var sColumnPath = sRowBindingContextPath + "/Columns/";
+                var sColumnPath = sRowBindingContextPath + "/columns/";
                 var aColumns = oModel.getProperty(sColumnPath);
 
                 // filter out the column at the iColumnIndex instead of splicing to avoid mutation of the original array.
@@ -353,7 +393,7 @@ sap.ui.define([
              *
              */
             onAddFirstRow: function () {
-                var sRowsPath = "/data/WorkPage/Rows/";
+                var sRowsPath = "/data/workPage/rows/";
                 this.getView().getModel().setProperty(sRowsPath, [this._createEmptyRow()]);
                 this.getOwnerComponent().fireEvent("workPageEdited");
             },
@@ -368,7 +408,7 @@ sap.ui.define([
                 var oModel = this.getView().getModel();
                 var oRow = oEvent.getSource();
                 var oPage = this.byId("sapCepWorkPage");
-                var sRowsPath = "/data/WorkPage/Rows/";
+                var sRowsPath = "/data/workPage/rows/";
                 var aRows = oModel.getProperty(sRowsPath);
                 var oNewRow = this._createEmptyRow();
 
@@ -437,7 +477,7 @@ sap.ui.define([
                 var oModel = this.getView().getModel();
                 var oColumn = oCell.getParent();
                 var iCellIndex = oColumn.indexOfAggregation("cells", oCell);
-                var sCellsPath = oColumn.getBindingContext().getPath() + "/Cells";
+                var sCellsPath = oColumn.getBindingContext().getPath() + "/cells";
                 var aCells = oModel.getProperty(sCellsPath);
 
                 // Filter out the cell at iCellIndex instead of splicing to avoid mutation of the original array.
@@ -501,7 +541,6 @@ sap.ui.define([
 
                 var aWidgetGroups = [{
                     id: "applicationWidgets",
-                    title: oResourceBundle.getText("ContentFinder.Categories.Applications.Title"),
                     widgets: [{
                         id: "widgets-tiles",
                         title: oResourceBundle.getText("ContentFinder.Widgets.Tiles.Title"),
@@ -619,7 +658,7 @@ sap.ui.define([
 
                 if (aSelectedVisualizations.length > 0) {
                     aSelectedVisualizations.forEach(function (oVisualization) {
-                        var sVizSelectedItemPath = "/data/UsedVisualizations/" + oVisualization.id;
+                        var sVizSelectedItemPath = "/data/usedVisualizations/" + oVisualization.id;
                         if (!this.oModel.getProperty(sVizSelectedItemPath)) {
                             this.oModel.setProperty(sVizSelectedItemPath, oVisualization.vizData);
                         }
@@ -653,12 +692,9 @@ sap.ui.define([
                     sId = this._generateUniqueId(aIds);
                     aIds = aIds.concat([sId]);
                     return {
-                        Id: sId,
-                        DescriptorSchemaVersion: "3.2.0",
-                        Descriptor: {},
-                        Visualization: {
-                            Id: oTile.vizData.Id,
-                            Type: oTile.type
+                        id: sId,
+                        visualization: {
+                            id: oTile.vizData.id
                         }
                     };
                 }.bind(this));
@@ -676,7 +712,7 @@ sap.ui.define([
                 var sCellPath = oCell.getBindingContext().getPath();
                 var oCellData = Object.assign({}, this.oModel.getProperty(sCellPath));
 
-                oCellData.Widgets = oCellData.Widgets.concat(aWidgetData);
+                oCellData.widgets = oCellData.widgets.concat(aWidgetData);
 
                 this.oModel.setProperty(sCellPath, oCellData);
                 this.onWidgetAdded();
@@ -694,15 +730,17 @@ sap.ui.define([
                 var sColumnPath = oColumn.getBindingContext().getPath();
                 var oColumnData = Object.assign({}, this.oModel.getProperty(sColumnPath));
 
-                if (!oColumnData.Cells) {
-                    oColumnData.Cells = [];
+                if (!oColumnData.cells) {
+                    oColumnData.cells = [];
                 }
 
-                oColumnData.Cells = oColumnData.Cells.concat([{
-                    Id: this._generateUniqueId(),
-                    DescriptorSchemaVersion: "3.2.0",
-                    Descriptor: {},
-                    Widgets: aWidgetData.concat([])
+                oColumnData.cells = oColumnData.cells.concat([{
+                    id: this._generateUniqueId(),
+                    descriptor: {
+                        value: {},
+                        schemaVersion: "3.2.0"
+                    },
+                    widgets: aWidgetData.concat([])
                 }]);
 
                 this.oModel.setProperty(sColumnPath, oColumnData);
@@ -750,15 +788,15 @@ sap.ui.define([
             deleteRow: function (oEvent, oRowData) {
                 var oModel = this.getView().getModel();
                 var oWorkPageRowContext = oRowData.rowContext;
-                var aRows = oModel.getProperty("/data/WorkPage/Rows");
+                var aRows = oModel.getProperty("/data/workPage/rows");
                 var oRowContextData = oWorkPageRowContext.getObject();
 
                 // Filter out the row with the given id to avoid mutation of the original array.
                 var aFilteredRows = aRows.filter(function (oRow) {
-                    return oRow.Id !== oRowContextData.Id;
+                    return oRow.id !== oRowContextData.id;
                 });
 
-                oModel.setProperty("/data/WorkPage/Rows", aFilteredRows);
+                oModel.setProperty("/data/workPage/rows", aFilteredRows);
                 this.getOwnerComponent().fireEvent("workPageEdited");
                 return this.oLoadDeleteDialog.then(function (oDialog) {
                     oDialog.close();
@@ -787,6 +825,7 @@ sap.ui.define([
                 })
                     .attachPress(this.onVisualizationPress, this)
                     .bindEditable("/editMode")
+                    .bindSizeBehavior("viewSettings>/currentBreakpoint/sizeBehavior")
                     .setLayoutData(new GridContainerItemLayoutData({
                         columns: 2,
                         rows: 2
@@ -801,43 +840,42 @@ 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");
+                var 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);
+                var oVizData = this.getView().getModel().getProperty("/data/usedVisualizations/" + sVizId);
 
-                if (!oVizData || !oVizData.Type) {
+                if (!oVizData || !oVizData.type) {
                     Log.error("No viz or vizType found for vizId " + sVizId);
                     return this._createErrorTile();
                 }
 
-                var aWidgetConfigurations = oWidgetContext.getProperty("Configurations") || [];
-                var aVizConfigurations = oVizData.Configurations || [];
+                var aWidgetConfigurations = oWidgetContext.getProperty("configurations") || [];
+                var aVizConfigurations = oVizData.configurations || [];
                 var aMergedAndSortedConfigurations = this._getMergedAndSortedConfigurations(aWidgetConfigurations, aVizConfigurations);
                 var sWidgetContextPath = oWidgetContext.getPath();
 
-                switch (oVizData.Type) {
+                switch (oVizData.type) {
                     case "sap.card":
-                        return this._createCard(oVizData, aMergedAndSortedConfigurations, sWidgetContextPath);
+                        return this._createCard(oVizData, aWidgetConfigurations, aMergedAndSortedConfigurations, sWidgetContextPath);
                     case "sap.ushell.StaticAppLauncher":
                     case "sap.ushell.DynamicAppLauncher":
                         return this._createVizInstance(oVizData);
                     default:
-                        Log.error("Unknown type for widget " + oVizData.Type);
+                        Log.error("Unknown type for widget " + oVizData.type);
                         return this._createErrorTile();
                 }
             },
 
             /**
              * @typedef {object} Configuration A configuration entry.
-             * @property {string} Id the Id of the configuration entry.
-             * @property {string} Level the level of the configuration entry.
-             * @property {string} SettingsSchemaVersion the schema version.
-             * @property {object} Settings map of values that the configuration entry overrides.
+             * @property {string} id the id of the configuration entry.
+             * @property {string} level the level of the configuration entry.
+             * @property {object} settings map of values that the configuration entry overrides.
              */
 
             /**
@@ -860,10 +898,10 @@ sap.ui.define([
                 // Second, the merged configurations are sorted
                 var oConfigurations = CONFIGURATION_LEVELS.reduce(function (oMergedConfigurations, sLevel) {
                     var oWidgetConfigByLevel = aWidgetConfigurations.find(function (oWidgetConfig) {
-                        return oWidgetConfig.Level === sLevel;
+                        return oWidgetConfig.level === sLevel;
                     });
                     var oVizConfigByLevel = aVizConfigurations.find(function (oVizConfig) {
-                        return oVizConfig.Level === sLevel;
+                        return oVizConfig.level === sLevel;
                     });
 
                     var oMergedConfigurationsByLevel = deepExtend({}, oVizConfigByLevel, oWidgetConfigByLevel);
@@ -884,18 +922,18 @@ sap.ui.define([
              *
              * @since 1.114.0
              * @param {Configuration[]} aConfigurations The configurations.
-             * @return {Configuration[]} The configurations sorted by level.
+             * @returns {Configuration[]} The configurations sorted by level.
              * @private
              */
 
             _sortConfigurations: function (aConfigurations) {
                 var oSortedConfigurations = aConfigurations.sort(function (oWidgetConfigA, oWidgetConfigB) {
-                    return CONFIGURATION_LEVELS.indexOf(oWidgetConfigA.Level) - CONFIGURATION_LEVELS.indexOf(oWidgetConfigB.Level);
+                    return CONFIGURATION_LEVELS.indexOf(oWidgetConfigA.level) - CONFIGURATION_LEVELS.indexOf(oWidgetConfigB.level);
                 });
 
                 // PR —> CO —> PG —> US
                 return oSortedConfigurations.map(function (oWidgetConfiguration) {
-                    return oWidgetConfiguration.Settings;
+                    return oWidgetConfiguration.settings.value;
                 });
             },
 
@@ -908,35 +946,35 @@ sap.ui.define([
              * @private
              */
             _createVizInstance: function (oVizData) {
-                var oIndicatorDataSource = ObjectPath.get(["Descriptor", "sap.flp", "indicatorDataSource"], oVizData);
-                var sAppId = ObjectPath.get(["Descriptor", "sap.flp", "target", "appId"], oVizData);
+                var oIndicatorDataSource = ObjectPath.get(["descriptor", "value", "sap.flp", "indicatorDataSource"], oVizData);
+                var sAppId = ObjectPath.get(["descriptor", "value", "sap.flp", "target", "appId"], oVizData);
                 var oApplication = this.getOwnerComponent().getSiteApplication(sAppId);
                 var oDataSources = ObjectPath.get(["sap.app", "dataSources"], oApplication);
-                var oVizType = this.getOwnerComponent().getSiteVizType(oVizData.Type);
+                var oVizType = this.getOwnerComponent().getSiteVizType(oVizData.type);
                 var oApplicationAsMap = {};
                 oApplicationAsMap[sAppId] = oApplication;
 
                 var oInstantiationVizData = {
-                    id: oVizData.Id,
-                    title: ObjectPath.get(["Descriptor", "sap.app", "title"], oVizData),
-                    subtitle: ObjectPath.get(["Descriptor", "sap.app", "subTitle"], oVizData),
-                    info: ObjectPath.get(["Descriptor", "sap.app", "info"], oVizData),
-                    icon: ObjectPath.get(["Descriptor", "sap.ui", "icons", "icon"], oVizData),
-                    keywords: ObjectPath.get(["Descriptor", "sap.app", "tags", "keywords"], oVizData) || [],
+                    id: oVizData.id,
+                    title: ObjectPath.get(["descriptor", "value", "sap.app", "title"], oVizData),
+                    subtitle: ObjectPath.get(["descriptor", "value", "sap.app", "subTitle"], oVizData),
+                    info: ObjectPath.get(["descriptor", "value", "sap.app", "info"], oVizData),
+                    icon: ObjectPath.get(["descriptor", "value", "sap.ui", "icons", "icon"], oVizData),
+                    keywords: ObjectPath.get(["descriptor", "value", "sap.app", "tags", "keywords"], oVizData) || [],
                     _instantiationData: {
                         platform: "CDM",
                         vizType: oVizType
                     },
                     indicatorDataSource: oIndicatorDataSource,
-                    vizType: ObjectPath.get("Type", oVizData),
+                    vizType: ObjectPath.get("type", oVizData),
                     dataSource: this._getDataSource(oDataSources, oIndicatorDataSource),
                     contentProviderId: ObjectPath.get(["sap.app", "contentProviderId"], oApplication),
-                    vizConfig: ObjectPath.get(["Descriptor"], oVizData),
-                    supportedDisplayFormats: ObjectPath.get(["Descriptor", "sap.flp", "vizOptions", "displayFormats", "supported"], oVizData),
-                    displayFormatHint: ObjectPath.get(["Descriptor", "sap.flp", "vizOptions", "displayFormats", "default"], oVizData),
-                    numberUnit: ObjectPath.get(["Descriptor", "sap.flp", "numberUnit"], oVizData),
-                    vizId: oVizData.Id,
-                    preview: false
+                    vizConfig: ObjectPath.get(["descriptor", "value"], oVizData),
+                    supportedDisplayFormats: ObjectPath.get(["descriptor", "value", "sap.flp", "vizOptions", "displayFormats", "supported"], oVizData),
+                    displayFormatHint: ObjectPath.get(["descriptor", "value", "sap.flp", "vizOptions", "displayFormats", "default"], oVizData),
+                    numberUnit: ObjectPath.get(["descriptor", "value", "sap.flp", "numberUnit"], oVizData),
+                    vizId: oVizData.id,
+                    preview: this.oModel.getProperty("/previewMode")
                 };
 
                 if (!this.oModel.getProperty("/navigationDisabled")) {
@@ -953,8 +991,10 @@ sap.ui.define([
 
                 return oVizInstance
                     .setActive(true)
+                    .bindPreview("/previewMode")
                     .attachPress(this.onVisualizationPress, this)
                     .bindEditable("/editMode")
+                    .bindSizeBehavior("viewSettings>/currentBreakpoint/sizeBehavior")
                     .bindClickable({
                         path: "/navigationDisabled",
                         formatter: function (bValue) {
@@ -998,19 +1038,24 @@ sap.ui.define([
              *
              * @since 1.110.0
              * @param {object} oViz The visualization data.
-             * @param {object[]} aConfigurations The configurations to apply to the card.
+             * @param {Configuration[]} aWidgetConfigurations The configurations on widget level.
+             * @param {object[]} aManifestChangesToApply The configurations to apply to the card.
              * @param {string} sWidgetContextPath The widget configurations path.
              * @returns {sap.ui.integration.widgets.Card} The card instance.
              * @private
              */
-            _createCard: function (oViz, aConfigurations, sWidgetContextPath) {
+            _createCard: function (oViz, aWidgetConfigurations, aManifestChangesToApply, sWidgetContextPath) {
+                aWidgetConfigurations = aWidgetConfigurations || [];
+                aManifestChangesToApply = aManifestChangesToApply || [];
+
                 var oOptions = {};
-                var bHasDescriptor = oViz.Descriptor && oViz.Descriptor["sap.card"];
-                var bHasDescriptorResources = oViz.DescriptorResources && (oViz.DescriptorResources.BaseUrl || oViz.DescriptorResources.DescriptorPath);
-                var bHasConfig;
+                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;
 
                 if (!bHasDescriptor && !bHasDescriptorResources) {
-                    Log.error("No Descriptor or DescriptorResources for Card");
+                    Log.error("No descriptor or descriptorResources for Card");
                     return new Card().setLayoutData(new GridContainerItemLayoutData({
                         columns: 2,
                         rows: 2
@@ -1018,14 +1063,23 @@ sap.ui.define([
                 }
 
                 if (bHasDescriptor) {
-                    oOptions.manifest = oViz.Descriptor;
-                    bHasConfig = ObjectPath.get(["Descriptor", "sap.card", "configuration"], oViz);
+                    oOptions.manifest = oViz.descriptor.value;
+                    bIsConfigurable = !!ObjectPath.get(["descriptor", "value", "sap.card", "configuration"], oViz);
 
                     if (bHasDescriptorResources) {
-                        oOptions.baseUrl = oViz.DescriptorResources.BaseUrl + oViz.DescriptorResources.DescriptorPath;
+                        oOptions.baseUrl = oViz.descriptorResources.baseUrl + oViz.descriptorResources.descriptorPath;
                     }
                 } else if (bHasDescriptorResources) {
-                    oOptions.manifest = oViz.DescriptorResources.BaseUrl + oViz.DescriptorResources.DescriptorPath + "/manifest.json";
+                    oOptions.manifest = oViz.descriptorResources.baseUrl + oViz.descriptorResources.descriptorPath + "/manifest.json";
+                }
+
+                oOptions.referenceId = "";
+                if (oViz.id) {
+                    var iProviderPrefixIndex = oViz.id.indexOf("_");
+                    if (iProviderPrefixIndex > 0) {
+                        var sProvider = oViz.id.substring(0, iProviderPrefixIndex);
+                        oOptions.referenceId = sProvider;
+                    }
                 }
 
                 // Ensure trailing slash for base url
@@ -1035,13 +1089,33 @@ sap.ui.define([
 
                 var oCard = new Card(oOptions);
 
-                if (bHasConfig) {
-                    var oActionDefinition = this._createCardConfigurationActionDefinition(oCard, sWidgetContextPath, this._openCardConfigurationEditor.bind(this));
-                    oCard.addActionDefinition(oActionDefinition);
+                if (bIsConfigurable) {
+                    var oConfigureActionDefinition = this._createCardConfigurationActionDefinition(
+                        oCard,
+                        sWidgetContextPath,
+                        this._openCardConfigurationEditor.bind(this)
+                    );
+                    oCard.addActionDefinition(oConfigureActionDefinition);
+                }
+
+                if (bPgLevelConfigurationsExist) {
+                    var oResetActionDefinition = this._createCardResetActionDefinition(
+                        aWidgetConfigurations,
+                        sWidgetContextPath,
+                        this._openResetCardConfigurationDialog.bind(this)
+                    );
+                    oCard.addActionDefinition(oResetActionDefinition);
                 }
 
                 return oCard
-                    .setManifestChanges(aConfigurations)
+                    .setModel(this.oModel, "workPageModel")
+                    .bindProperty("previewMode", {
+                        path: "workPageModel>/previewMode",
+                        formatter: function (bValue) {
+                            return bValue ? CardPreviewMode.MockData : CardPreviewMode.Off;
+                        }
+                    })
+                    .setManifestChanges(aManifestChangesToApply)
                     .addStyleClass("sapCepWidget")
                     .setHost(this.oHost)
                     .setLayoutData(new GridContainerItemLayoutData({
@@ -1067,7 +1141,6 @@ sap.ui.define([
                     type: "Custom",
                     visible: "{/editMode}",
                     buttonType: "Transparent",
-                    icon: "sap-icon://wrench",
                     text: sActionDefinitionText
                 });
 
@@ -1079,13 +1152,41 @@ sap.ui.define([
                 return oActionDefinition;
             },
 
+            /**
+             * Create an ActionDefinition to enable the user to reset the card when some configuration was made.
+             *
+             * @since 1.117.0
+             * @param {Configuration[]} aWidgetConfigurations The widget configuration items.
+             * @param {string} sWidgetContextPath The path the the card data in the model.
+             * @param {function} fnOnPress Handler function, called when the ActionDefinition button is pressed.
+             *
+             * @returns {sap.ui.integration.ActionDefinition} The ActionDefinition item.
+             * @private
+             */
+            _createCardResetActionDefinition: function (aWidgetConfigurations, sWidgetContextPath, fnOnPress) {
+                var sActionDefinitionText = this.getView().getModel("i18n").getResourceBundle().getText("WorkPage.Card.ActionDefinition.Reset");
+                var oActionDefinition = new ActionDefinition({
+                    type: "Custom",
+                    visible: "{/editMode}",
+                    buttonType: "Transparent",
+                    text: sActionDefinitionText
+                });
+
+                oActionDefinition.setModel(this.oModel);
+                oActionDefinition.attachPress({
+                    widgetContextPath: sWidgetContextPath,
+                    widgetConfigurations: aWidgetConfigurations
+                }, fnOnPress);
+                return oActionDefinition;
+            },
+
             /**
              * Adds the CardEditor into the Dialog and opens it.
              *
              * @since 1.113.0
              * @param {sap.base.Event} oEvent The event object.
              * @param {{card: sap.ui.integration.widgets.Card, widgetContextPath: string}} oContextData The context data.
-             * @returns {Promise} Promise that will resolve the the Dialog
+             * @returns {Promise} Promise that will resolve the Dialog
              * @private
              */
             _openCardConfigurationEditor: function (oEvent, oContextData) {
@@ -1093,20 +1194,116 @@ sap.ui.define([
                     this.oCardEditorDialogPromise = this._createCardEditorDialog(oContextData.card);
                 }
 
-                var oCardEditor = this._createCardEditor(oContextData.card);
+                var oCardEditorPromise = this._createCardEditor(oContextData.card);
 
-                return this.oCardEditorDialogPromise.then(function (oCardEditorDialog) {
-                    this.oCardEditorDialog = oCardEditorDialog;
+                return Promise.all([oCardEditorPromise, this.oCardEditorDialogPromise]).then(function (aInstances) {
+                    this.oCardEditorDialog = aInstances[1];
                     this.oCardEditorDialog.removeAllContent();
                     this.oCardEditorDialog.getBeginButton()
                         .detachPress(this._fnSaveCardConfiguration)
                         .attachPress(oContextData.widgetContextPath, this._fnSaveCardConfiguration);
                     this._setCardDialogTitle(this.oCardEditorDialog, oContextData.card);
-                    this.oCardEditorDialog.addContent(oCardEditor);
+                    this.oCardEditorDialog.addContent(aInstances[0]);
                     this.oCardEditorDialog.open();
                 }.bind(this));
             },
 
+
+            /**
+             * Opens the card reset dialog and attaches the reset button handler.
+             *
+             * @since 1.117.0
+             * @param {sap.base.Event} oEvent The press event.
+             * @param { {
+             *  card: sap.ui.integration.widgets.Card,
+             *  widgetContextPath: string,
+             *  widgetConfigurations: Configuration[],
+             *  vizConfigurations: Configuration[]
+             * } } oContextData The required context data.
+             * @returns {Promise} A promise resolving when the card dialog was opened.
+             * @private
+             */
+            _openResetCardConfigurationDialog: function (oEvent, oContextData) {
+                if (!this.oCardResetDialogPromise) {
+                    this.oCardResetDialogPromise = this._createResetCardConfigurationDialog();
+                }
+
+                return this.oCardResetDialogPromise.then(function (oCardResetDialog) {
+                    this.oCardResetDialog = oCardResetDialog;
+                    this.getView().addDependent(this.oCardResetDialog);
+                    this.oCardResetDialog.getBeginButton()
+                        .detachPress(this._fnResetCardConfiguration)
+                        .attachPress(oContextData, this._fnResetCardConfiguration);
+                    this.oCardResetDialog.open();
+                }.bind(this));
+            },
+
+            /**
+             *
+             * @param {sap.base.Event} oEvent The press event.
+             * @param {{ widgetContextPath: string, widgetConfigurations: Configuration[] }} oContextData The context data object.
+             * @since 1.117.0
+             * @private
+             */
+            _onResetCardConfigurations: function (oEvent, oContextData) {
+                var aWidgetConfigurations = oContextData.widgetConfigurations;
+                var sWidgetConfigurationsPath = oContextData.widgetContextPath + "/configurations";
+                var aRemainingConfigurations = aWidgetConfigurations.filter(function (oConfig) {
+                    return oConfig.level !== "PG";
+                });
+
+                this.oModel.setProperty(sWidgetConfigurationsPath, aRemainingConfigurations);
+
+                this.oCardResetDialog.close();
+            },
+
+            /**
+             * Resets the configuration of the card after confirming a failsafe dialog.
+             * @returns {Promise<sap.m.Dialog>} A Promise resolving the the sap.m.Dialog control.
+             *
+             * @since 1.117.0
+             * @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");
+
+                return new Promise(function (resolve, reject) {
+                    sap.ui.require(["sap/m/Dialog", "sap/m/Button", "sap/m/ButtonType", "sap/m/DialogType", "sap/m/Text"], function (Dialog, Button, ButtonType, DialogType, Text) {
+                        var oDialog = new Dialog({
+                            id: "sapCepCardConfigurationResetDialog",
+                            type: DialogType.Message,
+                            title: sDialogTitle,
+                            content: new Text({
+                                id: "sapCepCardConfigurationResetDialogContent",
+                                text: sDialogContent}),
+                            beginButton: new Button({
+                                id: "sapCepCardConfigurationResetDialogBeginButton",
+                                type: ButtonType.Emphasized,
+                                text: sBeginButtonText
+                            }),
+                            endButton: new Button({
+                                id: "sapCepCardConfigurationResetDialogEndButton",
+                                text: sEndButtonText,
+                                press: function () {
+                                    oDialog.close();
+                                }
+                            })
+                        });
+                        resolve(oDialog);
+                    }, reject);
+                });
+            },
+
+            /**
+             *
+             * @param {sap.m.Dialog} oDialog The dialog control.
+             * @param {sap.ui.integration.widgets.Card} oCard The card control.
+             * @private
+             */
             _setCardDialogTitle: function (oDialog, oCard) {
                 var oI18nBundle = this.getView().getModel("i18n").getResourceBundle();
                 var sCardEditorTitle = this._getCardTitle(oCard)
@@ -1124,10 +1321,23 @@ sap.ui.define([
              * @private
              */
             _createCardEditor: function (oCard) {
-                return new CardEditor({
-                    previewPosition: "right",
-                    card: oCard,
-                    mode: "content"
+                return new Promise(function (fResolve, fReject) {
+                    sap.ui.require(["sap-ui-integration-card-editor"],
+                        function () {
+                            sap.ui.require(["sap/ui/integration/designtime/editor/CardEditor"], function (CardEditor) {
+                                    fResolve(
+                                        new CardEditor({
+                                            previewPosition: "right",
+                                            card: oCard,
+                                            mode: "content"
+                                        })
+                                    );
+                                },
+                                fReject
+                            );
+                        },
+                        fReject
+                    );
                 });
             },
 
@@ -1187,25 +1397,27 @@ sap.ui.define([
                 var oDialog = oEvent.getSource().getParent();
                 var oCardEditor = oDialog.getContent()[0];
                 var oCard = oCardEditor.getCard();
-                var sWidgetConfigurationsPath = sWidgetContextPath + "/Configurations";
+                var sWidgetConfigurationsPath = sWidgetContextPath + "/configurations";
                 var oCurrentSettings = oCardEditor.getCurrentSettings();
                 var aWidgetConfigurations = this.oModel.getProperty(sWidgetConfigurationsPath) || [];
 
                 var oWidgetConfiguration = aWidgetConfigurations.find(function (oConfiguration) {
-                    return oConfiguration.Level === "PG";
+                    return oConfiguration.level === "PG";
                 });
 
                 if (!oWidgetConfiguration) {
                     oWidgetConfiguration = {};
-                    oWidgetConfiguration.Id = this._generateUniqueId();
-                    oWidgetConfiguration.Level = "PG";
-                    oWidgetConfiguration.Settings = oCurrentSettings;
-                    oWidgetConfiguration.SettingsSchemaVersion = "3.2";
+                    oWidgetConfiguration.id = this._generateUniqueId();
+                    oWidgetConfiguration.level = "PG";
+                    oWidgetConfiguration.settings = {
+                        value: oCurrentSettings,
+                        schemaVersion: "3.2.0"
+                    };
                     aWidgetConfigurations.push(oWidgetConfiguration);
                 } else {
                     aWidgetConfigurations = aWidgetConfigurations.map(function (oConfiguration) {
-                        if (oConfiguration.Level === "PG") {
-                            oConfiguration.Settings = deepExtend({}, oConfiguration.Settings, oCurrentSettings);
+                        if (oConfiguration.level === "PG") {
+                            oConfiguration.settings.value = deepExtend({}, oConfiguration.settings.value, oCurrentSettings);
                         }
                         return oConfiguration;
                     });
@@ -1224,29 +1436,54 @@ sap.ui.define([
              * Executes the Navigation. If event's type is Navigation, a new window will be opened
              *
              * @param {sap.base.Event} oEvent Event triggered by the card
-             * @returns {Promise} Promise that will resolve if Navigation is succesfull
+             * @returns {Promise} Promise that will resolve if Navigation is successful
              */
             executeNavigation: function (oEvent) {
-                var oParameters = oEvent.getParameter("parameters");
+                var oParameters = oEvent.getParameter("parameters"),
+                    oCard = oEvent.getParameter("card");
 
-                if (oEvent.getParameter("type") !== "Navigation" ||
-                        this.oModel.getProperty("/navigationDisabled") ||
-                        (oParameters && oParameters.hasOwnProperty("url"))) {
+                if (oEvent.getParameter("type") !== "Navigation" || this.oModel.getProperty("/navigationDisabled")) {
+                    return Promise.resolve();
+                }
+                if (oParameters && oParameters.hasOwnProperty("url")) {
+                    EventHub.emit("UITracer.trace", {
+                        reason: "LaunchApp",
+                        source: "Card",
+                        data: {
+                            cardId: oCard.getManifestEntry("/sap.app/id"),
+                            providerId: oCard.getReferenceId(),
+                            targetUrl: oParameters.url
+                        }
+                    });
                     return Promise.resolve();
                 }
 
+
                 // Prevent event bubbling here, to avoid opening the same target twice
                 oEvent.preventDefault(true);
 
                 return this.getOwnerComponent().getUshellContainer().getServiceAsync("CrossApplicationNavigation")
                     .then(function (oCrossAppNavigation) {
-                        return oCrossAppNavigation.toExternal({
-                            target: {
-                                semanticObject: oParameters.ibnTarget.semanticObject,
-                                action: oParameters.ibnTarget.action
-                            },
-                            params: oParameters.ibnParams
+                        var oToExternalObject = {};
+                        if (oParameters.hasOwnProperty("ibnTarget")) {
+                            oToExternalObject.target = oParameters.ibnTarget;
+                        }
+                        if (oParameters.hasOwnProperty("ibnParams")) {
+                            oToExternalObject.params = oParameters.ibnParams;
+                        }
+                        if (oParameters.hasOwnProperty("ibnAppSpecificRoute")) {
+                            oToExternalObject.appSpecificRoute = oParameters.ibnAppSpecificRoute;
+                        }
+                        EventHub.emit("UITracer.trace", {
+                            reason: "LaunchApp",
+                            source: "Card",
+                            data: {
+                                cardId: oCard.getManifestEntry("/sap.app/id"),
+                                providerId: oCard.getReferenceId(),
+                                targetUrl: "#" + oToExternalObject.target.semanticObject + "-" + oToExternalObject.target.action
+                            }
                         });
+                        return oCrossAppNavigation.toExternal(oToExternalObject);
                     });
             },
 
@@ -1271,16 +1508,114 @@ sap.ui.define([
             },
 
             /**
-             * Called if a widget is dropped on the WorkPageCell.
-             * @since 1.110.0
+             * Called if a WorkPageCell is dropped before or after another WorkPageCell in a WorkPageColumn.
+             *
              * @param {sap.base.Event} oEvent The drop event.
+             *
+             * @since 1.116.0
+             * @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();
+
+                var iSourceIndex = oSourceColumn.indexOfAggregation("cells", oSourceCell);
+                var iTargetIndex = oTargetColumn.indexOfAggregation("cells", oTargetCell);
+
+                // Increase the drop position if the dragged element is moved below the target element.
+                if (sDropPosition === "After") {
+                    iTargetIndex++;
+                }
+
+                this._moveCell(oSourceColumn, oTargetColumn, iSourceIndex, iTargetIndex);
+            },
+
+            /**
+             * Called if a WorkPageCell is dropped on an empty WorkPageColumn.
+             *
+             * @param {sap.base.Event} oEvent The drop event.
+             *
+             * @since 1.116.0
+             * @private
+             */
+            onCellDropOnEmptyColumn: function (oEvent) {
+                var oSourceCell = oEvent.getParameter("draggedControl");
+                var oTargetColumn = oEvent.getParameter("droppedControl");
+                var oSourceColumn = oSourceCell.getParent();
+
+                var iSourceIndex = oSourceColumn.indexOfAggregation("cells", oSourceCell);
+                var iTargetIndex = 0;
+
+                this._moveCell(oSourceColumn, oTargetColumn, iSourceIndex, iTargetIndex);
+            },
+
+            /**
+             * Moves a cell between two columns and updates the model accordingly.
+             *
+             * @param {sap.ushell.components.workPageBuilder.controls.WorkPageColumn} oSourceColumn The column from where the cell originates from
+             * @param {sap.ushell.components.workPageBuilder.controls.WorkPageColumn} oTargetColumn The column where the cell will be moved to
+             * @param {int} iSourceIndex The position in the column where the cell originates from
+             * @param {int} iTargetIndex The position in the column where the cell will be moved to
+             *
+             * @private
+             * @since 1.116.0
+             */
+            _moveCell: function (oSourceColumn, oTargetColumn, iSourceIndex, iTargetIndex) {
+                var oModel = this.getView().getModel();
+
+                var bSameContainer = oTargetColumn.getId() === oSourceColumn.getId();
+
+                var sSourceColumnCellsPath = oSourceColumn.getBindingContext().getPath() + "/cells";
+                var sTargetColumnCellsPath = oTargetColumn.getBindingContext().getPath() + "/cells";
+
+                var aSourceColumnCells = oModel.getProperty(sSourceColumnCellsPath);
+                var aTargetColumnCells = oModel.getProperty(sTargetColumnCellsPath);
+
+                if (bSameContainer) {
+                    // Decrease drop position if the dragged element is taken from before the drop position in the same container.
+                    if (iSourceIndex < iTargetIndex) {
+                        iTargetIndex--;
+                    }
+                    // Return if the result is the same for drag position and drop position in the same container (and prevent the MessageToast).
+                    if (iSourceIndex === iTargetIndex) {
+                        return;
+                    }
+                }
+
+                // Filter the dragged item from the source array instead of splicing to avoid mutation.
+                var aNewDragColumnCells = aSourceColumnCells.filter(function (oWidget, iIndex) {
+                    return iIndex !== iSourceIndex;
+                });
+
+                // If dnd happened in the same cell, the drop cells become the dragged cells without the dragged object.
+                if (bSameContainer) {
+                    aTargetColumnCells = aNewDragColumnCells;
+                }
+
+                // Insert the dragged object into a new target array to avoid mutation.
+                var aNewDropColumnCells = [aTargetColumnCells.slice(0, iTargetIndex), aSourceColumnCells[iSourceIndex], aTargetColumnCells.slice(iTargetIndex)].flat();
+
+                oModel.setProperty(sSourceColumnCellsPath, aNewDragColumnCells);
+                oModel.setProperty(sTargetColumnCellsPath, aNewDropColumnCells);
+
+                InvisibleMessage.getInstance().announce(this.getView().getModel("i18n").getResourceBundle().getText("WorkPage.Message.WidgetMoved"), InvisibleMessageMode.Assertive);
+                this.getOwnerComponent().fireEvent("workPageEdited");
+            },
+
+            /**
+             * Called if a widget is dropped on the WorkPageCell.
+             * @since 1.116.0
+             * @param {sap.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;
+                var iDropPosition = oTargetCell.getBindingContext().getProperty("widgets").length;
 
                 this._moveVisualization(oSourceCell, oTargetCell, iDragPosition, iDropPosition);
             },
@@ -1290,9 +1625,9 @@ sap.ui.define([
              *
              * @param {sap.base.Event} oEvent The dragenter event.
              */
-            onCellDragEnter: function (oEvent) {
+            onWidgetOnCellDragEnter: function (oEvent) {
                 var oCell = oEvent.getParameter("target");
-                if (!this.tileMode(oCell.getBindingContext().getProperty("Widgets"))) {
+                if (!this.tileMode(oCell.getBindingContext().getProperty("widgets"))) {
                     oEvent.preventDefault();
                 }
             },
@@ -1348,8 +1683,8 @@ sap.ui.define([
             _moveVisualization: function (oSourceCell, oTargetCell, iDragPosition, iDropPosition) {
                 var oModel = this.getView().getModel();
 
-                var sDragContainerWidgetsPath = oSourceCell.getBindingContext().getPath() + "/Widgets";
-                var sDropContainerWidgetsPath = oTargetCell.getBindingContext().getPath() + "/Widgets";
+                var sDragContainerWidgetsPath = oSourceCell.getBindingContext().getPath() + "/widgets";
+                var sDropContainerWidgetsPath = oTargetCell.getBindingContext().getPath() + "/widgets";
                 var bSameCell = sDragContainerWidgetsPath === sDropContainerWidgetsPath;
 
                 var aDragContainerWidgets = oModel.getProperty(sDragContainerWidgetsPath);
@@ -1386,10 +1721,11 @@ sap.ui.define([
             tileMode: function (aWidgets) {
                 var oModel = this.getView().getModel();
                 var oUsedViz;
-                return !!aWidgets && !aWidgets.some(function (oWidget) {
-                    oUsedViz = oModel.getProperty("/data/UsedVisualizations/" + ObjectPath.get("Visualization.Id", oWidget));
-                    return ObjectPath.get("Type", oUsedViz) === "sap.card";
-                });
+
+                return !!aWidgets && (aWidgets.length > 1 || !aWidgets.some(function (oWidget) {
+                    oUsedViz = oModel.getProperty("/data/usedVisualizations/" + ObjectPath.get("visualization.id", oWidget));
+                    return ObjectPath.get("type", oUsedViz) === "sap.card";
+                }));
             },
 
             /**
@@ -1417,8 +1753,8 @@ sap.ui.define([
                 var oModel = this.getView().getModel();
                 var oRowBindingContext = oRow.getBindingContext();
                 var sRowBindingContextPath = oRowBindingContext.getPath();
-                var sLeftColumnPath = sRowBindingContextPath + "/Columns/" + iLeftColumnIndex + "/Descriptor/columnWidth";
-                var sRightColumnPath = sRowBindingContextPath + "/Columns/" + iRightColumnIndex + "/Descriptor/columnWidth";
+                var sLeftColumnPath = sRowBindingContextPath + "/columns/" + iLeftColumnIndex + "/descriptor/value/columnWidth";
+                var sRightColumnPath = sRowBindingContextPath + "/columns/" + iRightColumnIndex + "/descriptor/value/columnWidth";
                 oModel.setProperty(sLeftColumnPath, iNewLeftColumnWidth);
                 oModel.setProperty(sRightColumnPath, iNewRightColumnWidth);
             },
@@ -1454,7 +1790,7 @@ sap.ui.define([
              * @private
              */
             _doColumnResizeStep: function (oRow, iLeftColumnIndex, iRightColumnIndex, iLeftColumnWidth, iRightColumnWidth, sDirection) {
-                var bRtl = Core.getConfiguration().getRTL();
+                var bRtl = Configuration.getRTL();
                 var iStep;
 
                 if (!bRtl) {
@@ -1489,7 +1825,7 @@ sap.ui.define([
              */
             _getCurrentColumnWidth: function (oRow, iLeftColumnIndex) {
                 var sRowBindingContextPath = oRow.getBindingContext().getPath();
-                var sColumnPath = sRowBindingContextPath + "/Columns/" + iLeftColumnIndex + "/Descriptor/columnWidth";
+                var sColumnPath = sRowBindingContextPath + "/columns/" + iLeftColumnIndex + "/descriptor/value/columnWidth";
                 return this.getView().getModel().getProperty(sColumnPath);
             },
 
@@ -1501,7 +1837,7 @@ sap.ui.define([
              * @private
              */
             _getColumnWidth: function (oColumn) {
-                return ObjectPath.get("Descriptor.columnWidth", oColumn) || MAX_GRID_COLUMN_WIDTH;
+                return ObjectPath.get("descriptor.value.columnWidth", oColumn) || MAX_GRID_COLUMN_WIDTH;
             },
 
             /**
@@ -1512,7 +1848,7 @@ sap.ui.define([
              * @private
              */
             _setColumnWidth: function (oColumn, iColumnWidth) {
-                ObjectPath.set("Descriptor.columnWidth", iColumnWidth, oColumn);
+                ObjectPath.set("descriptor.value.columnWidth", iColumnWidth, oColumn);
             },
 
             /**
@@ -1548,13 +1884,15 @@ sap.ui.define([
              */
             _createEmptyColumn: function (iColumnWidth) {
                 return {
-                    Id: this._generateUniqueId(),
-                    DescriptorSchemaVersion: "3.2.0",
-                    Descriptor: {
-                        columnWidth: iColumnWidth
+                    id: this._generateUniqueId(),
+                    descriptor: {
+                        value: {
+                            columnWidth: iColumnWidth
+                        },
+                        schemaVersion: "3.2.0"
                     },
-                    Configurations: [],
-                    Cells: []
+                    configurations: [],
+                    cells: []
                 };
             },
 
@@ -1566,15 +1904,15 @@ sap.ui.define([
              */
             _createEmptyRow: function () {
                 return {
-                    Id: this._generateUniqueId(),
-                    DescriptorSchemaVersion: "3.2.0",
-                    Descriptor: {
-                        title: "",
-                        description: "this is not yet rendered",
-                        fillRowHeight: false,
-                        fullWidth: false
+                    id: this._generateUniqueId(),
+                    descriptor: {
+                        value: {
+                            title: "",
+                            description: "this is not yet rendered"
+                        },
+                        schemaVersion: "3.2.0"
                     },
-                    Columns: [this._createEmptyColumn(MAX_GRID_COLUMN_WIDTH)]
+                    columns: [this._createEmptyColumn(MAX_GRID_COLUMN_WIDTH)]
                 };
             },
 
@@ -1619,59 +1957,6 @@ sap.ui.define([
                 this.oModel.setProperty("/navigationDisabled", bNavigation);
             },
 
-            /**
-             * Set the section grid container gap and row size for different screen sizes
-             */
-            _setGridContainerSizes: function () {
-                var sSizeBehavior = Config.last("/core/home/sizeBehavior");
-                var oViewSettingsModel = this.getView().getModel("viewSettings");
-
-                var sTileGapParam = (sSizeBehavior === "Small")
-                    ? "_sap_ushell_Tile_SpacingXS"
-                    : "_sap_ushell_Tile_Spacing";
-
-                var sTileGapParamS = (sSizeBehavior === "Small")
-                    ? "_sap_ushell_Tile_SpacingXS"
-                    : "_sap_ushell_Tile_SpacingS";
-
-
-                oViewSettingsModel.setProperty("/gridContainerGap/gridContainerGap", this._getNumericThemeParam(sTileGapParam));
-                oViewSettingsModel.setProperty("/gridContainerGap/gridContainerGapXS", this._getNumericThemeParam("_sap_ushell_Tile_SpacingXS"));
-                oViewSettingsModel.setProperty("/gridContainerGap/gridContainerGapS", this._getNumericThemeParam(sTileGapParamS));
-                oViewSettingsModel.setProperty("/gridContainerGap/gridContainerGapM", this._getNumericThemeParam(sTileGapParam));
-                oViewSettingsModel.setProperty("/gridContainerGap/gridContainerGapL", this._getNumericThemeParam(sTileGapParam));
-                oViewSettingsModel.setProperty("/gridContainerGap/gridContainerGapXL", this._getNumericThemeParam(sTileGapParam));
-
-                var sTileWidthParam = (sSizeBehavior === "Small")
-                    ? "_sap_ushell_Tile_WidthXS"
-                    : "_sap_ushell_Tile_Width";
-
-                var sTileWidthParamS = (sSizeBehavior === "Small")
-                    ? "_sap_ushell_Tile_WidthXS"
-                    : "_sap_ushell_Tile_WidthS";
-
-                oViewSettingsModel.setProperty("/gridContainerRowSize/gridContainerRowSize", this._getNumericThemeParam(sTileWidthParam));
-                oViewSettingsModel.setProperty("/gridContainerRowSize/gridContainerRowSizeXS", this._getNumericThemeParam("_sap_ushell_Tile_WidthXS"));
-                oViewSettingsModel.setProperty("/gridContainerRowSize/gridContainerRowSizeS", this._getNumericThemeParam(sTileWidthParamS));
-                oViewSettingsModel.setProperty("/gridContainerRowSize/gridContainerRowSizeM", this._getNumericThemeParam(sTileWidthParam));
-                oViewSettingsModel.setProperty("/gridContainerRowSize/gridContainerRowSizeL", this._getNumericThemeParam(sTileWidthParam));
-                oViewSettingsModel.setProperty("/gridContainerRowSize/gridContainerRowSizeXL", this._getNumericThemeParam(sTileWidthParam));
-            },
-
-            /**
-             * Returns a .rem value based on the tile gap or width parameter
-             *
-             * @param {string} sParam Tile spacing parameter
-             * @returns {string} Value in .rem
-             */
-            _getNumericThemeParam: function (sParam) {
-                var sValue = Parameters.get(sParam);
-                if (sValue && sValue.indexOf(".") === 0) {
-                    sValue = "0" + sValue;
-                }
-                return sValue;
-            },
-
             /**
              * Returns a unique id which does not yet exist on the WorkPage.
              * Optionally an array of existing IDs can be given as an argument.
@@ -1685,24 +1970,48 @@ 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");
-
-                aIds.push(oWorkPage.Id);
-
-                (oWorkPage.Rows || []).forEach(function (oRow) {
-                    aIds.push(oRow.Id);
-                    (oRow.Columns || []).forEach(function (oColumn) {
-                        aIds.push(oColumn.Id);
-                        (oColumn.Cells || []).forEach(function (oCell) {
-                            aIds.push(oCell.Id);
-                            (oCell.Widgets || []).forEach(function (oWidget) {
-                                aIds.push(oWidget.Id);
+                var oWorkPage = this.oModel.getProperty("/data/workPage");
+                var fnCollectIds = this._collectIds.bind(this);
+
+                aIds = aIds.concat(fnCollectIds(oWorkPage));
+
+                (oWorkPage.rows || []).forEach(function (oRow) {
+                    aIds = aIds.concat(fnCollectIds(oRow));
+                    (oRow.columns || []).forEach(function (oColumn) {
+                        aIds = aIds.concat(fnCollectIds(oColumn));
+                        (oColumn.cells || []).forEach(function (oCell) {
+                            aIds = aIds.concat(fnCollectIds(oCell));
+                            (oCell.widgets || []).forEach(function (oWidget) {
+                                aIds = aIds.concat(fnCollectIds(oWidget));
                             });
                         });
                     });
                 });
 
+                aIds = aIds.filter(function (sId) {
+                    return !!sId;
+                });
+
                 return utils.generateUniqueId(aIds);
+            },
+
+            /**
+             * Collects the id and all the configuration ids of an entity on the WorkPage.
+             *
+             * @param {object} oEntity An entity on the WorkPage
+             * @returns {string[]} An array of all ids related to this entity.
+             * @private
+             * @since 1.116.0
+             */
+            _collectIds: function (oEntity) {
+                var aIds = [oEntity.id];
+                var aSettings = oEntity.configurations || [];
+
+                var aConfigIds = aSettings.map(function (oConfig) {
+                    return oConfig.id;
+                });
+
+                return aIds.concat(aConfigIds);
             }
         });
 });