@openui5/sap.m 1.100.0 → 1.102.1

package/src/sap/m/table/Util.js

@@ -7,8 +7,9 @@
 sap.ui.define([
 	"sap/m/library",
 	"sap/ui/core/Core",
-	"sap/ui/core/theming/Parameters"
-], function(MLibrary, Core, ThemeParameters) {
+	"sap/ui/core/theming/Parameters",
+	"sap/m/IllustratedMessage"
+], function(MLibrary, Core, ThemeParameters, IllustratedMessage) {
 	"use strict";
 	/*global Intl*/
 
@@ -17,7 +18,7 @@ sap.ui.define([
 	 * @namespace
 	 * @alias module:sap/m/table/Util
 	 * @author SAP SE
-	 * @version 1.100.0
+	 * @version 1.102.1
 	 * @since 1.96.0
 	 * @private
 	 * @experimental Since 1.96.0. This class is experimental and the API might be changed in future.
@@ -63,6 +64,7 @@ sap.ui.define([
 	 * @param {object} [mSettings] The settings object
 	 * @param {int} [mSettings.maxWidth=19] The maximum content width of the field in rem
 	 * @param {int} [mSettings.defaultWidth=8] The default column content width when type check fails
+	 * @param {float} [mSettings.gap=0] The additional content width in rem
 	 * @returns {float} The calculated width of the ODataType converted to rem
 	 * @private
 	 */
@@ -71,12 +73,17 @@ sap.ui.define([
 		var aDateParameters = [2023, 9, 26, 22, 47, 58, 999];
 		var oUTCDate = new Date(Date.UTC.apply(0, aDateParameters));
 		var oLocalDate = new (Function.prototype.bind.apply(Date, [null].concat(aDateParameters)))();
-		var mNumericLimits = { Byte: 3, SByte: 3, Int16: 5, Int32: 9, Int64: 12, Single: 6, Float: 12, Double: 13, Decimal: 15 };
+		var mNumericLimits = { Byte: 3, SByte: 3, Int16: 5, Int32: 9, Int64: 12, Single: 6, Float: 12, Double: 13, Decimal: 15, Integer: 9 };
 		Core.attachThemeChanged(function() { fBooleanWidth = 0; });
 
 		return function(oType, mSettings) {
 
 			var sType = oType.getMetadata().getName().split(".").pop();
+			var iMaxWidth = mSettings && mSettings.maxWidth || 19;
+			var iGap = mSettings && mSettings.gap || 0;
+			var applySettings = function(fCalculatedWidth) {
+				return Math.min(fCalculatedWidth + iGap, iMaxWidth);
+			};
 
 			if (sType == "Boolean") {
 				if (!fBooleanWidth) {
@@ -85,17 +92,12 @@ sap.ui.define([
 					var fNoWidth = Util.measureText(oResourceBundle.getText("NO"));
 					fBooleanWidth = Math.max(fYesWidth, fNoWidth);
 				}
-				return fBooleanWidth;
+				return applySettings(fBooleanWidth);
 			}
 
 			if (sType == "String" || oType.isA("sap.ui.model.odata.type.String")) {
-				var iMaxWidth = mSettings && mSettings.maxWidth || 19;
 				var iMaxLength = parseInt(oType.getConstraints().maxLength) || 0;
-
-				if (!iMaxLength) {
-					return Math.max(Math.min(10, iMaxWidth), iMaxWidth * 0.75);
-				}
-				if (iMaxLength * 0.25 > iMaxWidth) {
+				if (!iMaxLength || iMaxLength * 0.25 > iMaxWidth) {
 					return iMaxWidth;
 				}
 
@@ -105,11 +107,12 @@ sap.ui.define([
 				}
 
 				var fWidth = Math.log(fSampleWidth - iMaxWidth * 0.16) / Math.log(iMaxWidth / 3) * (iMaxWidth / 2) * Math.pow(iMaxWidth / 19, 1 / fSampleWidth);
-				return Math.min(fWidth, fSampleWidth, iMaxWidth);
+				return applySettings(Math.min(fWidth, fSampleWidth));
 			}
 
 			if (sType.startsWith("Date") || sType.startsWith("Time")) {
-				var oDate = oType.getFormatOptions().UTC ? oUTCDate : oLocalDate;
+				var mFormatOptions = oType.getFormatOptions();
+				var oDate = mFormatOptions.UTC ? oUTCDate : oLocalDate;
 				var sSample = oDate.toLocaleDateString();
 
 				if (sType == "TimeOfDay") {
@@ -118,12 +121,12 @@ sap.ui.define([
 				} else if (oType.isA("sap.ui.model.odata.type.Time")) {
 					sSample = oType.formatValue({ __edmType: "Edm.Time", ms: oUTCDate.valueOf() }, "string");
 				} else {
-					sSample = oType.formatValue(oDate, "string");
+					sSample = oType.formatValue(mFormatOptions.interval ? [oDate, new Date(oDate * 1.009)] : oDate, "string");
 					((oType.oFormat && oType.oFormat.oFormatOptions && oType.oFormat.oFormatOptions.pattern) || "").replace(/[MELVec]{3,4}/, function(sWideFormat) {
 						sSample += (sWideFormat.length == 4 ? "---" : "-");
 					});
 				}
-				return Util.measureText(sSample);
+				return applySettings(Util.measureText(sSample));
 			}
 
 			if (mNumericLimits[sType]) {
@@ -132,7 +135,7 @@ sap.ui.define([
 				iPrecision = Math.min(iPrecision, mNumericLimits[sType]);
 				var sNumber = 2 * Math.pow(10, iPrecision - iScale - 1);
 				sNumber = oType.formatValue(sNumber, "string");
-				return Util.measureText(sNumber);
+				return applySettings(Util.measureText(sNumber));
 			}
 
 			return mSettings && mSettings.defaultWidth || 8;
@@ -190,6 +193,85 @@ sap.ui.define([
 		};
 	})();
 
+	/**
+	 * Calculates the width of a table column.
+	 *
+	 * @param {sap.ui.model.odata.type.ODataType[]} vTypes The ODataType instances
+	 * @param {string} [sHeader] The header of the column
+	 * @param {object} [mSettings] The settings object
+	 * @param {int} [mSettings.minWidth=2] The minimum content width of the field in rem
+	 * @param {int} [mSettings.maxWidth=19] The maximum content width of the field in rem
+	 * @param {int} [mSettings.padding=1] The sum of column padding and border in rem
+	 * @param {float} [mSettings.gap=0] The additional content width in rem
+	 * @param {boolean} [mSettings.verticalArrangement=false] Whether the fields are arranged vertically
+	 * @param {int} [mSettings.defaultWidth=8] The default column content width when type check fails
+	 * @returns {string} The calculated width of the column
+	 * @private
+	 * @ui5-restricted sap.fe, sap.ui.mdc, sap.ui.comp
+	 * @since 1.101
+	 */
+	Util.calcColumnWidth = function(vTypes, sHeader, mSettings) {
+		if (!Array.isArray(vTypes)) {
+			vTypes = [vTypes];
+		}
+
+		mSettings = Object.assign({
+			minWidth: 2,
+			maxWidth: 19,
+			defaultWidth: 8,
+			padding: 1,
+			gap: 0,
+			verticalArrangement: false
+		}, mSettings);
+
+		var fHeaderWidth = 0;
+		var iMinWidth = Math.max(1, mSettings.minWidth);
+		var iMaxWidth = Math.max(iMinWidth, mSettings.maxWidth);
+
+		var fContentWidth = mSettings.gap + vTypes.reduce(function(fInnerWidth, vType) {
+			var oType = vType, oTypeSettings = {
+				defaultWidth: mSettings.defaultWidth,
+				maxWidth: mSettings.maxWidth
+			};
+
+			if (Array.isArray(vType)) {
+				// for internal usage (mdc/Table) every field can provide own width settings
+				// in this case we get [<TypeInstance>, <TypeSettings>][] instead of <TypeInstance>[]
+				oType = vType[0];
+				oTypeSettings = vType[1] || oTypeSettings;
+			}
+
+			var fTypeWidth = Util.calcTypeWidth(oType, oTypeSettings);
+			return mSettings.verticalArrangement ? Math.max(fInnerWidth, fTypeWidth) : fInnerWidth + fTypeWidth + (fInnerWidth && 0.5);
+		}, 0);
+
+		if (sHeader) {
+			fHeaderWidth = Util.calcHeaderWidth(sHeader, fContentWidth, iMaxWidth, iMinWidth);
+		}
+
+		fContentWidth = Math.max(iMinWidth, fContentWidth, fHeaderWidth);
+		fContentWidth = Math.min(fContentWidth, iMaxWidth);
+		fContentWidth = Math.round(fContentWidth * 100) / 100;
+
+		return fContentWidth + mSettings.padding + "rem";
+	};
+
+	/**
+	 * Returns an instance of <code>sap.m.IllustratedMessage</code> in case there are no visible columns in the table.
+	 *
+	 * @returns {sap.m.IllustratedMessage} The message to be displayed when the table has no visible columns
+	 * @private
+	 */
+	Util.getNoColumnsIllustratedMessage = function() {
+		var oResourceBundle = Core.getLibraryResourceBundle("sap.m");
+
+		return new IllustratedMessage({
+			illustrationType: MLibrary.IllustratedMessageType.AddColumn,
+			title: oResourceBundle.getText("TABLE_NO_COLUMNS_TITLE"),
+			description: oResourceBundle.getText("TABLE_NO_COLUMNS_DESCRIPTION")
+		});
+	};
+
 	return Util;
 
 });

package/src/sap/m/table/columnmenu/ActionItem.js

@@ -23,7 +23,7 @@ sap.ui.define([
 	 * @extends sap.m.table.columnmenu.ItemBase
 	 *
 	 * @author SAP SE
-	 * @version 1.100.0
+	 * @version 1.102.1
 	 *
 	 * @private
 	 * @experimental

package/src/sap/m/table/columnmenu/Entry.js

@@ -23,7 +23,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.100.0
+	 * @version 1.102.1
 	 *
 	 * @private
 	 * @experimental
@@ -87,15 +87,5 @@ sap.ui.define([
 		throw new Error(this + " does not implement #getContent");
 	};
 
-	Entry.prototype.setVisible = function (bVisible) {
-		if (this.getVisible() == bVisible) {
-			return this;
-		}
-
-		this.setProperty("visible", bVisible);
-		this.getMenu() && this.getMenu()._setItemVisibility(this, bVisible);
-		return this;
-	};
-
 	return Entry;
 });

package/src/sap/m/table/columnmenu/Item.js

@@ -23,7 +23,7 @@ sap.ui.define([
 	 * @extends sap.m.table.columnmenu.ItemBase
 	 *
 	 * @author SAP SE
-	 * @version 1.100.0
+	 * @version 1.102.1
 	 *
 	 * @private
 	 * @experimental

package/src/sap/m/table/columnmenu/ItemBase.js

@@ -23,7 +23,7 @@ sap.ui.define([
 	 * @extends sap.m.table.columnmenu.Entry
 	 *
 	 * @author SAP SE
-	 * @version 1.100.0
+	 * @version 1.102.1
 	 *
 	 * @private
 	 * @experimental
@@ -148,5 +148,15 @@ sap.ui.define([
 		this.getMenu() && this.getMenu()._updateButtonState(this);
 	};
 
+	ItemBase.prototype.setVisible = function (bVisible) {
+		if (this.getVisible() == bVisible) {
+			return this;
+		}
+
+		this.setProperty("visible", bVisible);
+		this.getMenu() && this.getMenu()._setItemVisibility(this, bVisible);
+		return this;
+	};
+
     return ItemBase;
 });

package/src/sap/m/table/columnmenu/ItemContainer.js

@@ -0,0 +1,29 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+sap.ui.define([
+	"sap/m/table/columnmenu/ItemBase"
+], function(
+	ItemBase
+) {
+	"use strict";
+
+	var ItemContainer = ItemBase.extend("sap.m.table.columnmenu.ItemContainer", {
+		metadata: {
+			library: "sap.m",
+			aggregations: {
+				items: {type: "sap.m.table.columnmenu.ItemBase"}
+			}
+		}
+	});
+
+	ItemContainer.prototype.getEffectiveItems = function() {
+		return this.getItems().reduce(function(aItems, oItem) {
+			return aItems.concat(oItem.getEffectiveItems());
+		}, []);
+	};
+
+	return ItemContainer;
+});

package/src/sap/m/table/columnmenu/Menu.js

@@ -9,28 +9,46 @@ sap.ui.define([
 	"sap/m/Toolbar",
 	"sap/m/ToolbarSpacer",
 	"sap/m/library",
+	'sap/ui/Device',
 	"sap/ui/core/Control",
 	"sap/ui/core/Core",
 	"sap/ui/core/library",
 	"sap/ui/thirdparty/jquery",
+	"sap/ui/dom/containsOrEquals",
+	"sap/ui/events/ControlEvents",
 	"sap/base/strings/capitalize",
 	"sap/m/p13n/AbstractContainerItem",
 	"sap/m/p13n/Container",
-	"sap/m/table/columnmenu/MenuRenderer"
+	"sap/m/table/columnmenu/MenuRenderer",
+	"sap/ui/layout/form/Form",
+	"sap/ui/layout/GridData",
+	"sap/ui/layout/form/ResponsiveGridLayout",
+	"sap/ui/layout/form/FormContainer",
+	"sap/ui/layout/form/FormElement",
+	"sap/m/Label"
 ], function (
 	ResponsivePopover,
 	Button,
 	Toolbar,
 	ToolbarSpacer,
 	library,
+	Device,
 	Control,
 	Core,
 	coreLibrary,
 	jQuery,
+	containsOrEquals,
+	ControlEvents,
 	capitalize,
 	AbstractContainerItem,
 	Container,
-	MenuRenderer
+	MenuRenderer,
+	Form,
+	GridData,
+	ResponsiveGridLayout,
+	FormContainer,
+	FormElement,
+	Label
 ) {
 	"use strict";
 
@@ -57,7 +75,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.100.0
+	 * @version 1.102.1
 	 *
 	 * @private
 	 * @experimental
@@ -69,16 +87,44 @@ sap.ui.define([
 			library: "sap.m",
 			interfaces: ["sap.ui.core.IColumnHeaderMenu"],
 			aggregations: {
+				/**
+				 * Defines the quick actions of the column menu.
+				 */
 				quickActions: { type: "sap.m.table.columnmenu.QuickActionBase" },
+
+				/**
+				 * Defines the items of the column menu.
+				 */
 				items: { type: "sap.m.table.columnmenu.ItemBase" },
+
+				/**
+				 * Defines quick actions that are control-specific.
+				 * @private
+				 */
 				_quickActions: { type: "sap.m.table.columnmenu.QuickActionBase", visibility: "hidden" },
+
+				/**
+				 * Defines menu items that are control-specific.
+				 * @private
+				 */
 				_items: { type: "sap.m.table.columnmenu.ItemBase", visibility: "hidden" }
 			}
-		}
+		},
+		renderer: MenuRenderer
 	});
 
 	var DEFAULT_KEY = "$default";
 	var ARIA_POPUP_TYPE = HasPopup.Dialog;
+	var MENU_WIDTH = "500px";
+
+	Menu.prototype.init = function() {
+		this.fAnyEventHandlerProxy = jQuery.proxy(function(oEvent){
+			if (!this._oPopover.isOpen() || !this.getDomRef() || (oEvent.type != "mousedown" && oEvent.type != "touchstart")) {
+				return;
+			}
+			this.handleOuterEvent(this.getId(), oEvent);
+		}, this);
+	};
 
 	Menu.prototype.applySettings = function (mSettings) {
 		// Only works in JS views, but that's fine. This is only convenience for controls.
@@ -101,12 +147,16 @@ sap.ui.define([
 		}
 
 		this._initPopover();
+		this._createQuickActionGrids();
 
-		if (!this._oItemsContainer) {
-			this._initItemsContainer();
+		if (this._oItemsContainer) {
+			this._oItemsContainer.destroy();
+			this._oItemsContainer = null;
 		}
+		this._initItemsContainer();
 
 		this._oPopover.openBy(oAnchor);
+		ControlEvents.bindAnyEvent(this.fAnyEventHandlerProxy);
 	};
 
 	/**
@@ -130,6 +180,7 @@ sap.ui.define([
 		if (this._oPopover) {
 			this._oPopover.close();
 		}
+		ControlEvents.unbindAnyEvent(this.fAnyEventHandlerProxy);
 	};
 
 	Menu.prototype.exit = function () {
@@ -140,6 +191,7 @@ sap.ui.define([
 		if (this._oItemsContainer) {
 			delete this._oItemsContainer;
 		}
+		ControlEvents.unbindAnyEvent(this.fAnyEventHandlerProxy);
 	};
 
 	Menu.prototype._addAllToPrivateAggregation = function (mSettings, sAggregationName) {
@@ -161,7 +213,7 @@ sap.ui.define([
 			showHeader: false,
 			placement: library.PlacementType.Bottom,
 			content: new AssociativeControl({control: this, height: true}),
-			contentWidth: "500px",
+			contentWidth: MENU_WIDTH,
 			horizontalScrolling: false,
 			verticalScrolling: false,
 			afterClose: [this.close, this]
@@ -172,30 +224,84 @@ sap.ui.define([
 			"onAfterRendering": this._focusItem
 		}, this);
 
-		if (this.getItems().length == 0 && !this.getAggregation("_items")) {
+		if (this.getItems().length === 0 && !this.getAggregation("_items")) {
 			this._oPopover.attachAfterOpen(this._focusInitialQuickAction.bind(this));
+		} else {
+			// focus the first visible menu item
+			this._oPopover.attachAfterOpen(function () {
+				var oItem = this._oItemsContainer._getNavigationList().getItems().find(function (oItem) {
+					return oItem.getVisible();
+				});
+				oItem && oItem.focus();
+			}.bind(this));
+		}
+		this._oPopover._oControl.oPopup.setAutoClose(false);
+	};
+
+	Menu.prototype.onsapfocusleave = function(oEvent){
+		if (!this._oPopover.isOpen()) {
+			return;
 		}
+		this.handleOuterEvent(this.getId(), oEvent);
 	};
 
+	Menu.prototype.handleOuterEvent = function(oMenuId, oEvent) {
+		var isInMenuHierarchy = false,
+			touchEnabled = Device.support.touch || Device.system.combi;
+
+		if (oEvent.type == "mousedown" || oEvent.type == "touchstart") {
+			// Suppress the delayed mouse event from mobile browser
+			if (touchEnabled && (oEvent.isMarked("delayedMouseEvent") || oEvent.isMarked("cancelAutoClose"))) {
+				return;
+			}
+
+			if (containsOrEquals(this.getDomRef(), oEvent.target) || containsOrEquals(Core.getStaticAreaRef(), oEvent.target) ||
+				isInControlTree(this, Core.byId(oEvent.target.id))) {
+				isInMenuHierarchy = true;
+			}
+		} else if (oEvent.type == "sapfocusleave") {
+			if (touchEnabled) {
+				return;
+			}
+
+			if (oEvent.relatedControlId) {
+				if (containsOrEquals(this.getDomRef(), jQuery(document.getElementById(oEvent.relatedControlId)).get(0)) ||
+					isInControlTree(this, Core.byId(oEvent.relatedControlId))) {
+					isInMenuHierarchy = true;
+				}
+			}
+		}
+
+		if (!isInMenuHierarchy) {
+			this.close();
+		}
+	};
+
+	function isInControlTree(oParent, oChild) {
+		var temp = oChild.getParent();
+		if (!temp) {
+			return false;
+		} else if (temp === oParent) {
+			return true;
+		}
+		return isInControlTree(oParent, temp);
+	}
+
 	Menu.prototype._initItemsContainer = function () {
-		var aControlMenuItems = (this.getAggregation("_items") || []).reduce(function (aItems, oItem) {
-			return aItems.concat(oItem.getEffectiveItems());
-		}, []);
-		var aApplicationMenuItems = this.getItems().reduce(function (aItems, oItem) {
-			return aItems.concat(oItem.getEffectiveItems());
-		}, []);
+		var aMenuItems = this._getAllEffectiveItems();
+		var bHasQuickActions = this._hasQuickActions();
+		var bHasitems =  this._hasItems();
 
 		if (!this._oItemsContainer) {
 			this._createItemsContainer();
 		}
 
-		aControlMenuItems.forEach(function (oColumnMenuItem, iIndex) {
+		aMenuItems.forEach(function (oColumnMenuItem, iIndex) {
 			this._addView(oColumnMenuItem);
-			iIndex == 0 && this._oItemsContainer.addSeparator();
-		}.bind(this));
-		aApplicationMenuItems.forEach(function (oColumnMenuItem, iIndex) {
-			this._addView(oColumnMenuItem);
-			iIndex == 0 && this._oItemsContainer.addSeparator();
+
+			if (bHasQuickActions && bHasitems && iIndex === 0) {
+				this._oItemsContainer.addSeparator();
+			}
 		}.bind(this));
 	};
 
@@ -245,12 +351,12 @@ sap.ui.define([
 				var sKey = oMenu._oItemsContainer.getCurrentViewKey();
 				if (oMenu._fireEvent(Core.byId(sKey), "cancel")) {
 					oMenu.close();
-					oMenu.exit();
 				}
 			}
 		});
 		this._oBtnOk = new Button({
 			text: this._getResourceText("table.COLUMNMENU_CONFIRM"),
+			type: library.ButtonType.Emphasized,
 			press: function () {
 				var sKey = oMenu._oItemsContainer.getCurrentViewKey();
 				if (oMenu._fireEvent(Core.byId(sKey), "confirm")) {
@@ -275,9 +381,8 @@ sap.ui.define([
 				if (mParameters.target !== "$default") {
 					var oContainerItem = oMenu._oItemsContainer.getView(mParameters.target);
 					var oColumnMenuItem = oMenu._getItemFromContainerItem(oContainerItem);
-					if (oColumnMenuItem && oColumnMenuItem.firePress && !oMenu._fireEvent(oColumnMenuItem, "press")) {
+					if (oColumnMenuItem && !oMenu._fireEvent(oColumnMenuItem, "press")) {
 						oEvent.preventDefault();
-						return;
 					}
 				}
 			},
@@ -326,22 +431,48 @@ sap.ui.define([
 		return sText ? this.oResourceBundle.getText(sText, vValue) : this.oResourceBundle;
 	};
 
+	Menu.prototype._getAllEffectiveQuickActions = function() {
+		var aQuickActions = (this.getAggregation("_quickActions") || []).concat(this.getQuickActions());
+		return aQuickActions.reduce(function (a, oQuickAction) {
+			return a.concat(oQuickAction.getEffectiveQuickActions());
+		}, []).filter(function (oQuickAction) {
+			return oQuickAction.getVisible();
+		});
+	};
+
+	Menu.prototype._hasQuickActions = function() {
+		return this._getAllEffectiveQuickActions().length > 0;
+	};
+
+	Menu.prototype._getAllEffectiveItems = function() {
+		var aItems = (this.getAggregation("_items") || []).concat(this.getItems());
+		return aItems.reduce(function(a, oItem) {
+			return a.concat(oItem.getEffectiveItems());
+		}, []).filter(function (oItem) {
+			return oItem.getVisible();
+		});
+	};
+
+	Menu.prototype._hasItems = function() {
+		return this._getAllEffectiveItems().length > 0;
+	};
+
 	Menu.prototype._getItemFromContainerItem = function (oContainerItem) {
 		// Low performance as linear search has to be done
-		var oItem = this.getAggregation("_items") && this.getAggregation("_items").find(function(item) {
-			return item.getId() == oContainerItem.getKey();
+		return this._getAllEffectiveItems().find(function(item) {
+			return item.getId() === oContainerItem.getKey();
 		});
-		if (!oItem) {
-			oItem = this.getAggregation("items") && this.getAggregation("items").find(function(item) {
-				return item.getId() == oContainerItem.getKey();
-			});
-		}
-		return oItem;
 	};
 
 	Menu.prototype._updateButtonState = function (oItem) {
-		this._oItemsContainer.getHeader().getContentRight()[0].setEnabled(oItem.getButtonSettings()["reset"]["enabled"]);
+		if (!this._oItemsContainer) {
+			return;
+		}
+		if (this._oItemsContainer.getCurrentViewKey() === DEFAULT_KEY) {
+			return;
+		}
 		this._oItemsContainer.getHeader().getContentRight()[0].setVisible(oItem.getButtonSettings()["reset"]["visible"]);
+		this._oItemsContainer.getHeader().getContentRight()[0].setEnabled(oItem.getButtonSettings()["reset"]["enabled"]);
 		this._oBtnOk.setVisible(oItem.getButtonSettings()["confirm"]["visible"]);
 		this._oBtnCancel.setVisible(oItem.getButtonSettings()["cancel"]["visible"]);
 	};
@@ -359,14 +490,14 @@ sap.ui.define([
 
 	Menu.prototype._focusInitialQuickAction = function () {
 		// Does not work with content, which contains multiple items
-		if (this.getItems().length == 0 && !this.getAggregation("_items")) {
+		if (this.getItems().length === 0 && !this.getAggregation("_items")) {
 			var aQuickActions = [];
 			if (this.getAggregation("_quickActions")) {
 				aQuickActions = this.getAggregation("_quickActions")[0].getEffectiveQuickActions();
 			} else if (this.getQuickActions().length > 0) {
 				aQuickActions = this.getQuickActions()[0].getEffectiveQuickActions();
 			}
-			aQuickActions.length > 0 && aQuickActions[0].getContent().focus();
+			aQuickActions.length > 0 && aQuickActions[0].getContent()[0].focus();
 		}
 	};
 
@@ -378,5 +509,62 @@ sap.ui.define([
 		oListItem && oListItem.setVisible(bVisible);
 	};
 
+	Menu.prototype._createQuickActionGrids = function () {
+		var oFormContainer;
+		if (this._oForm) {
+			oFormContainer = this._oForm.getFormContainers()[0];
+			oFormContainer.destroyFormElements();
+		} else {
+			oFormContainer = new FormContainer();
+			this._oForm = new Form({
+				layout: new ResponsiveGridLayout({
+					labelSpanXL: 3,
+					labelSpanL: 3,
+					labelSpanM: 3,
+					labelSpanS: 12,
+					adjustLabelSpan: false
+				}),
+				editable: true,
+				formContainers: oFormContainer
+			});
+		}
+
+		var aEffectiveQuickActions = this._getAllEffectiveQuickActions();
+		aEffectiveQuickActions.forEach(function (oEffectiveQuickAction) {
+			if (!oEffectiveQuickAction.getVisible()) {
+				return;
+			}
+			// Create label
+			var oGridData = new GridData({span: "XL4 L4 M4 S12"});
+			var oLabel = new Label({
+				text: oEffectiveQuickAction.getLabel(),
+				layoutData: oGridData,
+				vAlign: sap.ui.core.VerticalAlign.Middle,
+				wrapping: true
+			}).setWidth("100%");
+			oLabel.addStyleClass("sapMTCMenuQALabel");
+
+			// Create content
+			var aControls = [];
+			var aContent = oEffectiveQuickAction.getContent();
+
+			aContent.forEach(function (oItem) {
+				if (oItem.getLayoutData()) {
+					oGridData = oItem.getLayoutData().clone();
+				} else {
+					var iSpan = Math.floor(8 / aContent.length);
+					var iSpanS = aContent.length > 2 ? 12 : Math.floor(12 / aContent.length);
+					oGridData = new GridData({spanS: iSpanS, spanM: iSpan, spanL: iSpan, spanXL: iSpan});
+				}
+				var oControl = new AssociativeControl({control: oItem.setWidth("100%")});
+				oControl.setLayoutData(oGridData);
+				aControls.push(oControl);
+			}, this);
+			oFormContainer.addFormElement(new FormElement({label: oLabel, fields: aControls}));
+		}, this);
+
+		this.addDependent(this._oForm);
+	};
+
 	return Menu;
 });