@openui5/sap.ui.integration 1.99.0 → 1.100.0

package/src/sap/ui/integration/editor/Editor.js

@@ -15,6 +15,7 @@ sap.ui.define([
 	"sap/ui/base/Interface",
 	"sap/ui/integration/Designtime",
 	"sap/ui/model/json/JSONModel",
+	"sap/ui/model/odata/v4/ODataModel",
 	"sap/ui/integration/util/Utils",
 	"sap/ui/integration/util/Destinations",
 	"sap/ui/integration/util/DataProviderFactory",
@@ -47,7 +48,9 @@ sap.ui.define([
 	"sap/m/FlexItemData",
 	"sap/m/FlexBox",
 	"sap/m/Button",
-	"sap/m/OverflowToolbar"
+	"sap/m/OverflowToolbar",
+	"sap/m/IconTabBar",
+	"sap/m/IconTabFilter"
 ], function (
 	ui5loader,
 	Control,
@@ -59,6 +62,7 @@ sap.ui.define([
 	Interface,
 	Designtime,
 	JSONModel,
+	ODataModel,
 	Utils,
 	Destinations,
 	DataProviderFactory,
@@ -91,7 +95,9 @@ sap.ui.define([
 	FlexItemData,
 	FlexBox,
 	Button,
-	OverflowToolbar
+	OverflowToolbar,
+	IconTabBar,
+	IconTabFilter
 ) {
 	"use strict";
 
@@ -138,7 +144,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.99.0
+	 * @version 1.100.0
 	 * @constructor
 	 * @since 1.94
 	 * @private
@@ -191,6 +197,14 @@ sap.ui.define([
 				previewPosition:{
 					type: "string",
 					defaultValue: "right" // value can be "top", "bottom", "left", "right"
+				},
+				width: {
+					type: "sap.ui.core.CSSSize",
+					defaultValue: ""
+				},
+				height: {
+					type: "sap.ui.core.CSSSize",
+					defaultValue: ""
 				}
 			},
 			aggregations: {
@@ -269,11 +283,11 @@ sap.ui.define([
 				//render items
 				if (aItems) {
 					var oPanel;
-					var oSubPanel;
+					var oSubGroup;
 					var oLanguagePanel;
 					var oLabelItemForNotWrapping;
 					var oColFields = [];
-					var oColFieldsOfSubPanel = [];
+					var oColFieldsOfSubGroup = [];
 					var oOriginalField;
 					var addColFields = function () {
 						if (oColFields.length > 0) {
@@ -289,18 +303,18 @@ sap.ui.define([
 							oColFields = [];
 						}
 					};
-					var addColFieldsOfSubPanel = function () {
-						if (oColFieldsOfSubPanel.length > 0) {
-							var iLess = 2 - oColFieldsOfSubPanel.length;
+					var addColFieldsOfSubGroup = function () {
+						if (oColFieldsOfSubGroup.length > 0) {
+							var iLess = 2 - oColFieldsOfSubGroup.length;
 							for (var n = 0; n < iLess; n++) {
-								oColFieldsOfSubPanel.push(new VBox());
+								oColFieldsOfSubGroup.push(new VBox());
 							}
-							oSubPanel.addContent(new FlexBox({
+							oSubGroup.addContent(new FlexBox({
 								alignItems: "Start",
 								justifyContent: "SpaceBetween",
-								items: oColFieldsOfSubPanel
+								items: oColFieldsOfSubGroup
 							}));
-							oColFieldsOfSubPanel = [];
+							oColFieldsOfSubGroup = [];
 						}
 					};
 					var renderPanel = function (oPanel) {
@@ -319,42 +333,95 @@ sap.ui.define([
 							}
 						}
 					};
-					var addSubPanel = function (oPanel, oSubPanel) {
-						if (oPanel && oSubPanel.getContent().length > 0) {
-							var aContents = oSubPanel.getContent();
+					var addSubPanel = function (oPanel, oSubGroup) {
+						if (oPanel && oSubGroup.getContent().length > 0) {
+							var aContents = oSubGroup.getContent();
 							if (aContents[0].isA("sap.m.MessageStrip")) {
-								oSubPanel.removeContent(0);
-								oSubPanel.addContent(aContents[0]);
+								oSubGroup.removeContent(0);
+								oSubGroup.addContent(aContents[0]);
 							}
-							oPanel.addContent(oSubPanel);
-							if (oSubPanel._messageStrip) {
-								oPanel.addContent(oSubPanel._messageStrip);
+							oPanel.addContent(oSubGroup);
+							if (oSubGroup._messageStrip) {
+								oPanel.addContent(oSubGroup._messageStrip);
 							}
 						} else {
-							oSubPanel = null;
+							oSubGroup = null;
+						}
+					};
+					var addSubTab = function (oPanel, oSubGroup) {
+						var oSubItems = oPanel.getContent(),
+						oIconTabBar;
+						if (oSubItems.length > 0) {
+							for (var m = 0; m < oSubItems.length; m++) {
+								if (oSubItems[m].isA("sap.m.IconTabBar")) {
+									oIconTabBar = oSubItems[m];
+								}
+							}
+						}
+						if (oIconTabBar && oSubGroup.getContent().length > 0) {
+							oIconTabBar.addItem(oSubGroup);
 						}
 					};
 					for (var i = 0; i < aItems.length; i++) {
 						var oItem = aItems[i];
 						if (oControl.getMode() !== "translation") {
-							if (oItem.isA("sap.m.Panel")) {
-								if (oSubPanel) {
+							if (oItem.isA("sap.m.Panel") || oItem.isA("sap.m.IconTabBar")) {
+								if (oSubGroup) {
 									//add current col fields to previous sub panel, then empty the col fields list
-									addColFieldsOfSubPanel();
-									//add sub panel to panel
-									addSubPanel(oPanel, oSubPanel);
+									addColFieldsOfSubGroup();
+									//add sub group to panel
+									if (oItem.isA("sap.m.Panel") && oSubGroup.isA("sap.m.Panel")) {
+										addSubPanel(oPanel, oSubGroup);
+									} else {
+										addSubTab(oPanel, oSubGroup);
+									}
+								}
+								var oItemLevel = 0;
+								if (oItem.isA("sap.m.Panel")) {
+									oItemLevel = oItem._level;
+								} else if (oItem.isA("sap.m.IconTabBar")) {
+									oItemLevel = oItem.getItems()[0]._level;
 								}
-								if (oItem._level === "1") {
-									oSubPanel = oItem;
-									oSubPanel._subItems = [];
-									oSubPanel.addStyleClass("sapUiIntegrationEditorSubPanel");
+								if (oItemLevel === "1") {
+									if (oColFields.length > 0) {
+										addColFields();
+										// renderPanel(oPanel);
+									}
+									if (oItem.isA("sap.m.IconTabBar")) {
+										var subItems = oPanel.getContent(),
+										    iconTabBarExist = false;
+										if (subItems.length > 0) {
+											for (var j = 0; j < subItems.length; j++) {
+												if (subItems[j].isA("sap.m.IconTabBar")) {
+													iconTabBarExist = true;
+												}
+											}
+										}
+										if (!iconTabBarExist) {
+											oSubGroup = oItem.getItems()[0];
+											oSubGroup._subItems = [];
+											oItem.removeItem(oItem.getItems()[0]);
+											if (oItem.isA("sap.m.IconTabBar") && oItem._messageStrip) {
+												oPanel.addContent(oItem._messageStrip);
+											}
+											oItem.addStyleClass("sapUiIntegrationEditorSubTab");
+											oPanel.addContent(oItem);
+										} else {
+											oSubGroup = oItem.getItems()[0];
+											oSubGroup._subItems = [];
+										}
+									} else {
+										oSubGroup = oItem;
+										oSubGroup._subItems = [];
+										oSubGroup.addStyleClass("sapUiIntegrationEditorSubGroup");
+									}
 								} else {
 									if (oPanel) {
 										//add current col fields to previous panel, then empty the col fields list
 										addColFields();
 										//render previous panel
 										renderPanel(oPanel);
-										oSubPanel = null;
+										oSubGroup = null;
 									}
 									oPanel = oItem;
 									oPanel._subItems = [];
@@ -369,17 +436,17 @@ sap.ui.define([
 							}
 							// add style class for the hint under group and checkbox/toggle
 							if (oItem.isA("sap.m.FormattedText")) {
-								if (oSubPanel) {
-									oSubPanel.addContent(oItem.addStyleClass("sapUiIntegrationEditorHint"));
+								if (oSubGroup) {
+									oSubGroup.addContent(oItem.addStyleClass("sapUiIntegrationEditorHint"));
 								} else {
 									oPanel.addContent(oItem.addStyleClass("sapUiIntegrationEditorHint"));
 								}
 								if (i === aItems.length - 1) {
-									if (oSubPanel) {
+									if (oSubGroup) {
 										//add current col fields to previous sub panel, then empty the col fields list
-										addColFieldsOfSubPanel();
+										addColFieldsOfSubGroup();
 										//add sub panel to panel
-										addSubPanel(oPanel, oSubPanel);
+										addSubPanel(oPanel, oSubGroup);
 									}
 									//add current col fields to panel, then empty the col fields list
 									addColFields();
@@ -400,18 +467,18 @@ sap.ui.define([
 									//if cols === 1 and reach the col size, add the col fields to panel, then empty the col fields list
 									//if cols === 2, add the col fields to panel, then empty the col fields list
 									if (oItem._cols === 2) {
-										if (oSubPanel) {
-											addColFieldsOfSubPanel();
+										if (oSubGroup) {
+											addColFieldsOfSubGroup();
 										} else {
 											addColFields();
 										}
-									} else if (oColFieldsOfSubPanel.length === 2) {
-										addColFieldsOfSubPanel();
+									} else if (oColFieldsOfSubGroup.length === 2) {
+										addColFieldsOfSubGroup();
 									} else if (oColFields.length === 2) {
 										addColFields();
 									}
-									if (oSubPanel) {
-										oSubPanel.addContent(oItem);
+									if (oSubGroup) {
+										oSubGroup.addContent(oItem);
 									} else {
 										oPanel.addContent(oItem);
 									}
@@ -422,9 +489,9 @@ sap.ui.define([
 								} else {
 									oItem.addStyleClass("sapUiIntegrationEditorSpacerWithoutLine");
 								}
-								if (oSubPanel) {
-									addColFieldsOfSubPanel();
-									oSubPanel.addContent(oItem);
+								if (oSubGroup) {
+									addColFieldsOfSubGroup();
+									oSubGroup.addContent(oItem);
 								} else {
 									addColFields();
 									oPanel.addContent(oItem);
@@ -544,11 +611,11 @@ sap.ui.define([
 											]
 										});
 									}
-									//render lable and field for NotWrapping parameter
+									//render label and field for NotWrapping parameter
 									if (oItem._cols === 1) {
-										if (oSubPanel) {
-											if (oColFieldsOfSubPanel.length === 2) {
-												addColFieldsOfSubPanel();
+										if (oSubGroup) {
+											if (oColFieldsOfSubGroup.length === 2) {
+												addColFieldsOfSubGroup();
 											}
 											if (oConfig.hint) {
 												var oHint = oControl._createHint(oConfig.hint);
@@ -559,10 +626,10 @@ sap.ui.define([
 													]
 												});
 												oColVBox.addStyleClass("col1");
-												oColFieldsOfSubPanel.push(oColVBox);
+												oColFieldsOfSubGroup.push(oColVBox);
 											} else {
 												oHBox.addStyleClass("col1");
-												oColFieldsOfSubPanel.push(oHBox);
+												oColFieldsOfSubGroup.push(oHBox);
 											}
 										} else {
 											if (oColFields.length === 2) {
@@ -583,9 +650,9 @@ sap.ui.define([
 												oColFields.push(oHBox);
 											}
 										}
-									} else if (oSubPanel) {
-										addColFieldsOfSubPanel();
-										oSubPanel.addContent(oHBox);
+									} else if (oSubGroup) {
+										addColFieldsOfSubGroup();
+										oSubGroup.addContent(oHBox);
 									} else {
 										addColFields();
 										oPanel.addContent(oHBox);
@@ -593,8 +660,8 @@ sap.ui.define([
 									oLabelItemForNotWrapping = null;
 								} else {
 									var oLabel;
-									if (oSubPanel) {
-										oLabel = oSubPanel.getContent().pop();
+									if (oSubGroup) {
+										oLabel = oSubGroup.getContent().pop();
 									} else {
 										oLabel = oPanel.getContent().pop();
 									}
@@ -631,21 +698,21 @@ sap.ui.define([
 											oColVBox.addItem(oHint.addStyleClass("sapUiIntegrationEditorHint"));
 										}
 										oColVBox.addStyleClass("col1");
-										if (oSubPanel) {
-											oColFieldsOfSubPanel.push(oColVBox);
+										if (oSubGroup) {
+											oColFieldsOfSubGroup.push(oColVBox);
 										} else {
 											oColFields.push(oColVBox);
 										}
-									} else if (oSubPanel) {
-										oSubPanel.addContent(oLabelFlexBox);
-										oSubPanel.addContent(oItem);
+									} else if (oSubGroup) {
+										oSubGroup.addContent(oLabelFlexBox);
+										oSubGroup.addContent(oItem);
 									} else {
 										oPanel.addContent(oLabelFlexBox);
 										oPanel.addContent(oItem);
 									}
 								}
-								if (oSubPanel) {
-									oSubPanel._subItems.push({
+								if (oSubGroup) {
+									oSubGroup._subItems.push({
 										"settingspath": oItem.getConfiguration()._settingspath,
 										"itemId": oItem.getId()
 									});
@@ -656,11 +723,15 @@ sap.ui.define([
 								});
 							}
 							if (i === aItems.length - 1) {
-								if (oSubPanel) {
+								if (oSubGroup) {
 									//add current col fields to previous sub panel, then empty the col fields list
-									addColFieldsOfSubPanel();
+									addColFieldsOfSubGroup();
 									//add sub panel to panel
-									addSubPanel(oPanel, oSubPanel);
+									if (oSubGroup.isA("sap.m.Panel")) {
+										addSubPanel(oPanel, oSubGroup);
+									} else {
+										addSubTab(oPanel, oSubGroup);
+									}
 								}
 								//add current col fields to panel, then empty the col fields list
 								addColFields();
@@ -674,22 +745,60 @@ sap.ui.define([
 								oLanguagePanel.addStyleClass("sapUiIntegrationEditorTranslationPanel");
 								continue;
 							}
-							if (oItem.isA("sap.m.Panel")) {
-								if (oSubPanel) {
+							if (oItem.isA("sap.m.Panel") || oItem.isA("sap.m.IconTabBar")) {
+								if (oSubGroup) {
 									//add sub panel to panel
-									addSubPanel(oPanel, oSubPanel);
+									if (oItem.isA("sap.m.Panel") && oSubGroup.isA("sap.m.Panel")) {
+										addSubPanel(oPanel, oSubGroup);
+									} else {
+										addSubTab(oPanel, oSubGroup);
+									}
+								}
+								var tItemLevel = 0;
+								if (oItem.isA("sap.m.Panel")) {
+									tItemLevel = oItem._level;
+								} else if (oItem.isA("sap.m.IconTabBar")) {
+									if (oItem.getItems().length > 0 && oItem.getItems()[0]._level) {
+										tItemLevel = oItem.getItems()[0]._level;
+									}
 								}
-								if (oItem._level === "1") {
-									oSubPanel = oItem;
-									oSubPanel.addStyleClass("sapUiIntegrationEditorSubPanel");
+								if (tItemLevel === "1") {
+									if (oItem.isA("sap.m.IconTabBar")) {
+										if (i !== aItems.length - 1 || (i < aItems.length && (aItems[i].isA("sap.m.IconTabBar") || aItems[i].isA("sap.m.Panel")))) {
+											var tSubItems = oPanel.getContent(),
+										    tIconTabBarExist = false;
+											if (tSubItems.length > 0) {
+												for (var l = 0; l < tSubItems.length; l++) {
+													if (tSubItems[l].isA("sap.m.IconTabBar")) {
+														tIconTabBarExist = true;
+													}
+												}
+											}
+											if (!tIconTabBarExist) {
+												oSubGroup = oItem.getItems()[0];
+												oItem.removeItem(oItem.getItems()[0]);
+												oPanel.addContent(oItem);
+											} else {
+												oSubGroup = oItem.getItems()[0];
+											}
+										}
+									} else {
+										oSubGroup = oItem;
+										oSubGroup.addStyleClass("sapUiIntegrationEditorSubGroup");
+									}
 								} else {
-									oSubPanel = null;
+									oSubGroup = null;
 									//add sub panel if it has content into top panel
 									if (oPanel && oPanel.getContent().length > 0) {
 										oLanguagePanel.addContent(oPanel);
 									}
 									oPanel = oItem;
-									oPanel.addStyleClass("sapUiIntegrationEditorSubPanel");
+									oPanel.addStyleClass("sapUiIntegrationEditorSubGroup");
+								}
+								if (i === aItems.length - 1) {
+									//add current col fields to panel, then empty the col fields list
+									addColFields();
+									renderPanel(oPanel);
 								}
 								continue;
 							}
@@ -700,8 +809,8 @@ sap.ui.define([
 								continue;
 							}
 							if (oItem.isA("sap.m.Label")) {
-								if (oSubPanel) {
-									oSubPanel.addContent(oItem);
+								if (oSubGroup) {
+									oSubGroup.addContent(oItem);
 								} else {
 									oPanel.addContent(oItem);
 								}
@@ -720,15 +829,19 @@ sap.ui.define([
 									oItem
 								]
 							}).addStyleClass("notWrappingRow");
-							if (oSubPanel) {
-								oSubPanel.addContent(oHBox);
+							if (oSubGroup) {
+								oSubGroup.addContent(oHBox);
 							} else {
 								oPanel.addContent(oHBox);
 							}
 							if (i === aItems.length - 1) {
-								if (oSubPanel) {
+								if (oSubGroup) {
 									//add sub panel to panel
-									addSubPanel(oPanel, oSubPanel);
+									if (oSubGroup.isA("sap.m.Panel")) {
+										addSubPanel(oPanel, oSubGroup);
+									} else {
+										addSubTab(oPanel, oSubGroup);
+									}
 								}
 								oLanguagePanel.addContent(oPanel);
 							}
@@ -773,7 +886,7 @@ sap.ui.define([
 		 * @experimental since 1.94
 		 * @public
 		 * @author SAP SE
-		 * @version 1.99.0
+		 * @version 1.100.0
 		 * @borrows sap.ui.integration.editor.Editor#getParameters as getParameters
 		 * @borrows sap.ui.integration.editor.Editor#resolveDestination as resolveDestination
 		 * @borrows sap.ui.integration.editor.Editor#request as request
@@ -1350,8 +1463,22 @@ sap.ui.define([
 							if (oItem.valueItems) {
 								mResult[oItem.manifestpath.substring(0, oItem.manifestpath.lastIndexOf("/")) + "/valueItems"] = oItem.valueItems;
 							}
-							if (oItem.type !== "string" || !oItem.translatable) {
-								mResult[oItem.manifestpath] = oItem.value;
+							switch (oItem.type) {
+								case "string":
+									if (!oItem.translatable) {
+										mResult[oItem.manifestpath] = oItem.value;
+									}
+									break;
+								case "group":
+									break;
+								case "object":
+								case "object[]":
+									if (oItem.value && oItem.value !== "") {
+										mResult[oItem.manifestpath] = oItem.value;
+									}
+									break;
+								default:
+									mResult[oItem.manifestpath] = oItem.value;
 							}
 						}
 					} else if (oItem.translatable && oItem.value) {
@@ -1591,12 +1718,14 @@ sap.ui.define([
 	//map editors for a specific type
 	Editor.fieldMap = {
 		"string": "sap/ui/integration/editor/fields/StringField",
+		"string[]": "sap/ui/integration/editor/fields/StringListField",
 		"integer": "sap/ui/integration/editor/fields/IntegerField",
 		"number": "sap/ui/integration/editor/fields/NumberField",
 		"boolean": "sap/ui/integration/editor/fields/BooleanField",
 		"date": "sap/ui/integration/editor/fields/DateField",
 		"datetime": "sap/ui/integration/editor/fields/DateTimeField",
-		"string[]": "sap/ui/integration/editor/fields/ListField",
+		"object": "sap/ui/integration/editor/fields/ObjectField",
+		"object[]": "sap/ui/integration/editor/fields/ObjectListField",
 		"destination": "sap/ui/integration/editor/fields/DestinationField"
 	};
 	Editor.Fields = null;
@@ -1838,6 +1967,10 @@ sap.ui.define([
 			}.bind(this));
 		}
 		if (oConfig.values) {
+			// load metadata
+			if (oConfig.values.metadata) {
+				this._addMetadataModel(oConfig, oField);
+			}
 			// for MultiInput used in string[] field with filter backend, do not request data when creating it
 			if (oConfig.type === "string[]" && oField.isFilterBackend() && oConfig.visualization && oConfig.visualization.type === "MultiInput") {
 				oField.setModel(new JSONModel({}), undefined);
@@ -1928,6 +2061,11 @@ sap.ui.define([
 			} else {
 				tResult = oData;
 			}
+			if (oConfig.type === "object" || oConfig.type === "object[]") {
+				tResult.forEach(function (oResult) {
+					oResult._editable = false;
+				});
+			}
 			if (this.getMode() === "content" && oConfig.pageAdminValues && oConfig.pageAdminValues.length > 0) {
 				var paValues = oConfig.pageAdminValues,
 				    selValues = oConfig.value,
@@ -1975,7 +2113,7 @@ sap.ui.define([
 					oData = results;
 				}
 			}
-			//add group property "Selected" to each record for MultiComboBox in ListField
+			//add group property "Selected" to each record for MultiComboBox in StringListField
 			//user configration of the field since its value maybe changed
 			var oFieldConfig = oField.getConfiguration();
 			if (oConfig.type === "string[]") {
@@ -2018,6 +2156,9 @@ sap.ui.define([
 			oValueModel.firePropertyChange();
 			this._settingsModel.setProperty(oConfig._settingspath + "/_loading", false);
 			oField._hideValueState(true, true);
+			if (oConfig.type === "object" || oConfig.type === "object[]") {
+				oField.mergeValueWithRequestResult(tResult);
+			}
 		}.bind(this)).catch(function (oError) {
 			this._settingsModel.setProperty(oConfig._settingspath + "/_loading", false);
 			var sError = this._oResourceBundle.getText("EDITOR_BAD_REQUEST");
@@ -2044,6 +2185,9 @@ sap.ui.define([
 			}
 			var oValueModel = oField.getModel();
 			oValueModel.firePropertyChange();
+			if (oConfig.type === "object" || oConfig.type === "object[]") {
+				oField.mergeValueWithRequestResult();
+			}
 			oField._showValueState("error", sError, true);
 		}.bind(this));
 	};
@@ -2191,6 +2335,48 @@ sap.ui.define([
 		}
 	};
 
+	/**
+	 * Creates a meta model if a values.metadata section exists in the configuration
+	 * @param {object} oConfig
+	 * @param {BaseField} oField
+	 */
+	 Editor.prototype._addMetadataModel = function (oConfig, oField) {
+		if (oConfig.values && oConfig.values.metadata) {
+			var oRequestDefaultParameters = {
+				"synchronizationMode": "None"
+			};
+			oRequestDefaultParameters = merge(oRequestDefaultParameters, oConfig.values.metadata.request);
+
+			var oRequest = {
+				url: oRequestDefaultParameters.serviceUrl
+			};
+			var pRequestChain = Promise.resolve(oRequest);
+			if (this._oDestinations) {
+				pRequestChain = this._oDestinations.process(oRequest);
+			}
+			pRequestChain.then(function(oData) {
+				if (!oData.url.endsWith("/")) {
+					oData.url = oData.url + "/";
+				}
+				oRequestDefaultParameters.serviceUrl = oData.url;
+				var oMetaDataModel = new ODataModel(oRequestDefaultParameters);
+				oMetaDataModel.oMetaModel.fetchData().then(function(oMetaData) {
+					if (oConfig.type === "object" || oConfig.type === "object[]") {
+						var sPath = oConfig.values.metadata.namespace + "." + oConfig.values.metadata.entityTypeName;
+						oMetaData[sPath] = Object.assign(oMetaData[sPath], {
+							_Actions: {
+								$kind: 'Property',
+								$Type: 'Actions',
+								$MaxLength: 15
+							}
+						});
+					}
+					oField.setModel(new JSONModel(oMetaData), "meta");
+				});
+			});
+		}
+	};
+
 	Editor.prototype._createDependentFields = function (oConfig, oField) {
 		if (oConfig.values) {
 			var sData = JSON.stringify(oConfig.values.data);
@@ -2242,12 +2428,62 @@ sap.ui.define([
 		return oProperty[sKey];
 	};
 
+	Editor.prototype._handleITBValidation = function (oEditor, sItem, sErrorType) {
+		var oResourceBundle = oEditor._oResourceBundle;
+		if (sItem.getItems().length > 0 && sItem._oExpandButton) {
+			var expandBTN = sItem._oExpandButton;
+			var errorMSG = null;
+			if (sErrorType === "Error") {
+				errorMSG = oResourceBundle.getText("EDITOR_GROUP_ERRORS");
+				expandBTN.setIcon("sap-icon://message-error");
+				expandBTN.addStyleClass("errorBTNImage");
+			} else if (sErrorType === "Warning") {
+				errorMSG = oResourceBundle.getText("EDITOR_GROUP_WARNINGS");
+				expandBTN.setIcon("sap-icon://message-warning");
+				expandBTN.addStyleClass("warningBTNImage");
+			}
+			//remove expandButton addtional information
+			expandBTN.setTooltip(null);
+			expandBTN.addEventDelegate({
+				onAfterRendering: function(oEvent) {
+					var eExpandBTN = document.getElementById(expandBTN.getId());
+					eExpandBTN.setAttribute("aria-label", "With validation errors");
+					eExpandBTN.setAttribute("title", "");
+				}
+			});
+			expandBTN.setEnabled(false);
+			expandBTN.addStyleClass("errorBTN").addStyleClass("errorBTNDisabled");
+			var iITBar = expandBTN.getParent().getParent().getParent();
+			var iMessageStrip = Core.byId(iITBar.getId() + "_strip");
+			expandBTN.addEventDelegate({
+				onmouseover: function() {
+					iMessageStrip.setVisible(true);
+					iMessageStrip.setType(sErrorType);
+					iMessageStrip.setText(errorMSG);
+				},
+				onmouseout: function() {
+					iMessageStrip.setVisible(false);
+				}
+			}, oEditor);
+		}
+	};
+
+	Editor.prototype._delayHandleITBValidation = function(oEditor,oItem, sErrorType) {
+		var checkExpandBTNExist = setInterval(function() {
+			if (oItem._oExpandButton) {
+				oEditor._handleITBValidation(oEditor, oItem, sErrorType);
+				clearInterval(checkExpandBTNExist);
+			}
+		}, 50);
+	};
+
 	/**
 	 * Adds an item to the _formContent aggregation based on the config settings
 	 * @param {} oConfig
 	 */
-	Editor.prototype._addItem = function (oConfig) {
-		var sMode = this.getMode();
+	 Editor.prototype._addItem = function (oConfig) {
+		var sMode = this.getMode(),
+		that = this;
 		//force to turn off features for settings and dynamic values and set the default if not configured
 		if (this.getAllowDynamicValues() === false || !oConfig.allowDynamicValues) {
 			oConfig.allowDynamicValues = false;
@@ -2261,154 +2497,275 @@ sap.ui.define([
 		if (oConfig.visible === false || (!oConfig.translatable && sMode === "translation" && oConfig.type !== "group")) {
 			return;
 		}
+		//display subPanel as iconTabBar or Panel
 		if (oConfig.type === "group") {
 			oConfig.expanded = oConfig.expanded !== false;
-			var oPanel = new Panel({
-				headerText: oConfig.label,
-				visible: oConfig.visible,
-				expandable: oConfig.expandable !== false,
-				expanded: "{currentSettings>expanded}",
-				width: "auto",
-				backgroundDesign: "Transparent",
-				objectBindings: {
-					currentSettings: {
-						path: "currentSettings>" + oConfig._settingspath
-					},
-					items: {
-						path: "items>/form/items"
+			if (oConfig.visualization && oConfig.visualization.type === "Tab") {
+				var oIconTabBar = new IconTabBar({
+					expandable: oConfig.expandable !== false,
+					expanded: "{currentSettings>expanded}",
+					objectBindings: {
+						currentSettings: {
+							path: "currentSettings>" + oConfig._settingspath
+						},
+						items: {
+							path: "items>/form/items"
+						},
+						context: {
+							path: "context>/"
+						}
 					},
-					context: {
-						path: "context>/"
-					}
-				},
-				expand: function (oEvent) {
-					var oControl = oEvent.getSource();
-					var bExpand = oEvent.getParameter("expand");
-					// handle error message strip for field
-					var oMessageStrip = oControl._level === "1" ? oControl.getParent().getParent().getAggregation("_messageStrip") : oControl.getParent().getAggregation("_messageStrip");
-					if (oMessageStrip === null) {
-						oMessageStrip = Core.byId(MessageStripId);
-					}
-					if (!bExpand && oControl._level === "1") {
-						oControl.getParent().addContent(oMessageStrip);
-						oControl.getParent().focus();
-					} else {
-						oControl.addContent(oMessageStrip);
-						oControl.focus();
-					}
-					// handle error message for panel
-					if (!bExpand && oControl._subItems && oControl._subItems.length > 0) {
-						var oCurrentSettingsModel = oControl.getModel("currentSettings");
-						var bHasError = false;
-						var sErrorType = "None";
-						for (var i = 0; i < oControl._subItems.length; i++) {
-							var sSettingsPath = oControl._subItems[i].settingspath;
-							var oItem = Core.byId(oControl._subItems[i].itemId);
-							if (oCurrentSettingsModel.getProperty(sSettingsPath + "/hasError") === true && oItem.getVisible()) {
-								bHasError = true;
-								var sType = oCurrentSettingsModel.getProperty(sSettingsPath + "/errorType");
-								if (sType === "Error") {
-									sErrorType = "Error";
-									break;
-								} else if (sType === "Warning" && sErrorType !== "Error") {
-									sErrorType = "Warning";
+					select: function (oEvent) {
+						var oControl = oEvent.getSource(),
+						oSelectITFKey = oControl.getSelectedKey(),
+						aItems = oControl.getItems(),
+						vExpanded = oControl.getExpanded(),
+						vShowErrors = false;
+						for (var n = 0; n < aItems.length; n++) {
+							if (!vExpanded) {
+								vShowErrors = true;
+							} else if (aItems[n].getId() !== oSelectITFKey) {
+								vShowErrors = true;
+							} else if (aItems[n].getId() === oSelectITFKey) {
+								vShowErrors = false;
+							}
+							if (vShowErrors) {
+								var bHasError = false,
+								sErrorType = "None";
+								if (aItems[n]._subItems && aItems[n]._subItems.length > 0) {
+									var oCurrentSettingsModel = aItems[n].getModel("currentSettings");
+									for (var i = 0; i < aItems[n]._subItems.length; i++) {
+										var sSettingsPath = aItems[n]._subItems[i].settingspath;
+										var oItem = Core.byId(aItems[n]._subItems[i].itemId);
+										if (oCurrentSettingsModel.getProperty(sSettingsPath + "/hasError") === true && oItem.getVisible()) {
+											bHasError = true;
+											var sType = oCurrentSettingsModel.getProperty(sSettingsPath + "/errorType");
+											if (sType === "Error") {
+												sErrorType = "Error";
+												break;
+											} else if (sType === "Warning" && sErrorType !== "Error") {
+												sErrorType = "Warning";
+											}
+										}
+									}
+									oCurrentSettingsModel.setProperty("hasError", bHasError, oControl.getBindingContext("currentSettings"));
+									oCurrentSettingsModel.setProperty("errorType", sErrorType, oControl.getBindingContext("currentSettings"));
+								}
+								if (bHasError) {
+									var vITF = new IconTabFilter(),
+									aItem = aItems[n];
+									if (aItem.getItems().length > 0) {
+										aItem.removeAllItems();
+									}
+									aItem.addItem(vITF);
+									that._handleITBValidation(that, aItem, sErrorType);
+									if (aItem._oExpandButton === undefined) {
+										that._delayHandleITBValidation(that, aItem, sErrorType);
+									} else {
+										that._handleITBValidation(that, aItem, sErrorType);
+									}
+								}
+							} else if (aItems[n].getItems().length > 0) {
+								aItems[n].removeItem(aItems[n].getItems()[0]);
+								if (aItems[n]._oExpandButton) {
+									aItems[n]._oExpandButton.visible = false;
 								}
+								//handle error message for fields
+								var tMessageStrip = oControl.getParent().getParent().getAggregation("_messageStrip");
+								if (tMessageStrip === null) {
+									tMessageStrip = Core.byId(MessageStripId);
+								}
+								aItems[n].addContent(tMessageStrip);
 							}
 						}
-						oCurrentSettingsModel.setProperty("hasError", bHasError, oControl.getBindingContext("currentSettings"));
-						oCurrentSettingsModel.setProperty("errorType", sErrorType, oControl.getBindingContext("currentSettings"));
 					}
-				}
-			});
-			if (sMode !== "translation") {
-				/*
-				var oMessage = new MessageStrip({
-					showIcon: false,
-					text: {
-						path: 'currentSettings>errorType',
-						formatter: function (errorType) {
-							var sPanelTitle = "";
-							switch (errorType) {
-								case "Error":
-									sPanelTitle = oResourceBundle.getText("EDITOR_GROUP_ERRORS");
-									break;
-								case "Warning":
-									sPanelTitle = oResourceBundle.getText("EDITOR_GROUP_WARNINGS");
-									break;
-								default:
-							}
-							return sPanelTitle;
-						}
-					},
-					type: "{currentSettings>errorType}",
-					visible: "{= !${currentSettings>expanded} && ${currentSettings>hasError} === true}"
-				}).addStyleClass("sapUiIntegrationEditorPanelMessageStrip");
-				var oHeaderToolbar = new OverflowToolbar({
-					content: [
-						new Title({
-							text: oConfig.label
-						}),
-						new Separator(),
-						oMessage
-					]
-				}).addStyleClass("sapUiIntegrationEditorPanelHeader");
-				oPanel.setHeaderToolbar(oHeaderToolbar);
-				*/
-				var oResourceBundle = this._oResourceBundle;
-				var oMessageStripOfPanel = new MessageStrip({
-					showIcon: false,
-					visible: "{= !${currentSettings>expanded} && ${currentSettings>hasError} === true}",
-					text: {
-						path: 'currentSettings>errorType',
-						formatter: function (errorType) {
-							var sPanelTitle = "";
-							switch (errorType) {
-								case "Error":
-									sPanelTitle = oResourceBundle.getText("EDITOR_GROUP_ERRORS");
-									break;
-								case "Warning":
-									sPanelTitle = oResourceBundle.getText("EDITOR_GROUP_WARNINGS");
-									break;
-								default:
-							}
-							return sPanelTitle;
-						}
-					},
-					type: "{currentSettings>errorType}",
+				});
+				var oIconTabFilter = new IconTabFilter({
+					text: oConfig.label,
+					visible: oConfig.visible,
 					objectBindings: {
 						currentSettings: {
 							path: "currentSettings>" + oConfig._settingspath
+						},
+						items: {
+							path: "items>/form/items"
+						},
+						context: {
+							path: "context>/"
 						}
 					}
 				});
-				if (oConfig.level !== "1") {
-					oMessageStripOfPanel.setModel(this._settingsModel, "currentSettings");
+				oIconTabBar.addItem(oIconTabFilter);
+				oIconTabBar.setBackgroundDesign("Transparent");
+				oIconTabBar.setHeaderBackgroundDesign("Transparent");
+				// oIconTabBar.setHeaderBackgroundDesign("Solid");
+				oIconTabBar.addStyleClass("sapUiIntegrationEditorSubGroup");
+				// oIconTabBar.addStyleClass("sapUiIntegrationEditorSubGroup").addStyleClass("cardEditorIconTabBarBG");
+				// handle messageStrip for tab filter
+				if (sMode !== "translation") {
+					var oMessageStripOfTab = new MessageStrip({
+						id: oIconTabBar.getId() + "_strip",
+						showIcon: false,
+						visible: false
+					});
+					oMessageStripOfTab.addStyleClass("sapUiIntegrationEditorTabMessageStrip");
+					oIconTabBar._messageStrip = oMessageStripOfTab;
 				}
-				oMessageStripOfPanel.addStyleClass("sapUiIntegrationEditorPanelMessageStrip");
-				oPanel._messageStrip = oMessageStripOfPanel;
-			}/* else {
-				oPanel.setHeaderText(oConfig.label);
-			}*/
-			this.addAggregation("_formContent", oPanel);
-			oPanel._cols = oConfig.cols || 2; //by default 2 cols
-			oPanel._level = oConfig.level || 0; //by default 0 level
-			if (oConfig.hint) {
-				this._addHint(oConfig.hint);
-			}
-			//add "aria-label" for each panel to make the landmark uniquely
-			var oDelegate = {
-				onAfterRendering: function(oEvent) {
-					var ePanel = document.getElementById(oPanel.getId());
-					ePanel.setAttribute("aria-label", oConfig.label);
-					var oControl = oEvent.srcControl;
-					var oMessageStrip = oControl._messageStrip;
-					if (oControl._level !== "1" && oMessageStrip) {
-						oMessageStrip.rerender();
+				this.addAggregation("_formContent", oIconTabBar);
+				// oIconTabFilter._cols = oConfig.cols || 2; //by default 2 cols
+				oIconTabFilter._level = oConfig.level || 0; //by default 0 level
+				if (oConfig.hint) {
+					this._addHint(oConfig.hint);
+				}
+				return;
+			} else {
+				var oPanel = new Panel({
+					headerText: oConfig.label,
+					visible: oConfig.visible,
+					expandable: oConfig.expandable !== false,
+					expanded: "{currentSettings>expanded}",
+					width: "auto",
+					backgroundDesign: "Transparent",
+					objectBindings: {
+						currentSettings: {
+							path: "currentSettings>" + oConfig._settingspath
+						},
+						items: {
+							path: "items>/form/items"
+						},
+						context: {
+							path: "context>/"
+						}
+					},
+					expand: function (oEvent) {
+						var oControl = oEvent.getSource();
+						var bExpand = oEvent.getParameter("expand");
+						// handle error message strip for field
+						var oMessageStrip = oControl._level === "1" ? oControl.getParent().getParent().getAggregation("_messageStrip") : oControl.getParent().getAggregation("_messageStrip");
+						if (oMessageStrip === null) {
+							oMessageStrip = Core.byId(MessageStripId);
+						}
+						if (!bExpand && oControl._level === "1") {
+							oControl.getParent().addContent(oMessageStrip);
+							oControl.getParent().focus();
+						} else {
+							oControl.addContent(oMessageStrip);
+							oControl.focus();
+						}
+						// handle error message for panel
+						if (!bExpand && oControl._subItems && oControl._subItems.length > 0) {
+							var oCurrentSettingsModel = oControl.getModel("currentSettings");
+							var bHasError = false;
+							var sErrorType = "None";
+							for (var i = 0; i < oControl._subItems.length; i++) {
+								var sSettingsPath = oControl._subItems[i].settingspath;
+								var oItem = Core.byId(oControl._subItems[i].itemId);
+								if (oCurrentSettingsModel.getProperty(sSettingsPath + "/hasError") === true && oItem.getVisible()) {
+									bHasError = true;
+									var sType = oCurrentSettingsModel.getProperty(sSettingsPath + "/errorType");
+									if (sType === "Error") {
+										sErrorType = "Error";
+										break;
+									} else if (sType === "Warning" && sErrorType !== "Error") {
+										sErrorType = "Warning";
+									}
+								}
+							}
+							oCurrentSettingsModel.setProperty("hasError", bHasError, oControl.getBindingContext("currentSettings"));
+							oCurrentSettingsModel.setProperty("errorType", sErrorType, oControl.getBindingContext("currentSettings"));
+						}
 					}
+				});
+				if (sMode !== "translation") {
+					/*
+					var oMessage = new MessageStrip({
+						showIcon: false,
+						text: {
+							path: 'currentSettings>errorType',
+							formatter: function (errorType) {
+								var sPanelTitle = "";
+								switch (errorType) {
+									case "Error":
+										sPanelTitle = oResourceBundle.getText("EDITOR_GROUP_ERRORS");
+										break;
+									case "Warning":
+										sPanelTitle = oResourceBundle.getText("EDITOR_GROUP_WARNINGS");
+										break;
+									default:
+								}
+								return sPanelTitle;
+							}
+						},
+						type: "{currentSettings>errorType}",
+						visible: "{= !${currentSettings>expanded} && ${currentSettings>hasError} === true}"
+					}).addStyleClass("sapUiIntegrationEditorPanelMessageStrip");
+					var oHeaderToolbar = new OverflowToolbar({
+						content: [
+							new Title({
+								text: oConfig.label
+							}),
+							new Separator(),
+							oMessage
+						]
+					}).addStyleClass("sapUiIntegrationEditorPanelHeader");
+					oPanel.setHeaderToolbar(oHeaderToolbar);
+					*/
+					var oResourceBundle = this._oResourceBundle;
+					var oMessageStripOfPanel = new MessageStrip({
+						showIcon: false,
+						visible: "{= !${currentSettings>expanded} && ${currentSettings>hasError} === true}",
+						text: {
+							path: 'currentSettings>errorType',
+							formatter: function (errorType) {
+								var sPanelTitle = "";
+								switch (errorType) {
+									case "Error":
+										sPanelTitle = oResourceBundle.getText("EDITOR_GROUP_ERRORS");
+										break;
+									case "Warning":
+										sPanelTitle = oResourceBundle.getText("EDITOR_GROUP_WARNINGS");
+										break;
+									default:
+								}
+								return sPanelTitle;
+							}
+						},
+						type: "{currentSettings>errorType}",
+						objectBindings: {
+							currentSettings: {
+								path: "currentSettings>" + oConfig._settingspath
+							}
+						}
+					});
+					if (oConfig.level !== "1") {
+						oMessageStripOfPanel.setModel(this._settingsModel, "currentSettings");
+					}
+					oMessageStripOfPanel.addStyleClass("sapUiIntegrationEditorPanelMessageStrip");
+					oPanel._messageStrip = oMessageStripOfPanel;
+				}/* else {
+					oPanel.setHeaderText(oConfig.label);
+				}*/
+				this.addAggregation("_formContent", oPanel);
+				oPanel._cols = oConfig.cols || 2; //by default 2 cols
+				oPanel._level = oConfig.level || 0; //by default 0 level
+				if (oConfig.hint) {
+					this._addHint(oConfig.hint);
 				}
-			};
-			oPanel.addEventDelegate(oDelegate);
-			return;
+				//add "aria-label" for each panel to make the landmark uniquely
+				var oDelegate = {
+					onAfterRendering: function(oEvent) {
+						var ePanel = document.getElementById(oPanel.getId());
+						ePanel.setAttribute("aria-label", oConfig.label);
+						var oControl = oEvent.srcControl;
+						var oMessageStrip = oControl._messageStrip;
+						if (oControl._level !== "1" && oMessageStrip) {
+							oMessageStrip.rerender();
+						}
+					}
+				};
+				oPanel.addEventDelegate(oDelegate);
+				return;
+			}
 		}
 		if (oConfig.type === "separator") {
 			var oSeparator = new Separator();
@@ -2753,6 +3110,17 @@ sap.ui.define([
 			var oItem = aItems[n];
 			this._addItem(oItem);
 		}
+		// customize the size of card editor, define the size in dt.js
+		var cardHeight = this._settingsModel.getProperty("/form/height") !== undefined ? this._settingsModel.getProperty("/form/height") : "350px",
+		cardWidth = this._settingsModel.getProperty("/form/width") !== undefined ? this._settingsModel.getProperty("/form/width") : "100%";
+		if (this.getProperty("height") === "") {
+			this.setProperty("height", cardHeight);
+			document.body.style.setProperty("--sapUiIntegrationEditorFormHeight", cardHeight);
+		}
+		if (this.getProperty("width") === "") {
+			this.setProperty("width", cardWidth);
+			document.body.style.setProperty("--sapUiIntegrationEditorFormWidth", cardWidth);
+		}
 		//add additional content
 		if (this.getMode() !== "translation") {
 			Promise.resolve(this._initPreview()).then(function() {
@@ -2768,6 +3136,21 @@ sap.ui.define([
 			}.bind(this));
 		}
 	};
+
+	Editor.prototype.setHeight = function(sValue) {
+		if (sValue) {
+			this.setProperty("height", sValue);
+			document.body.style.setProperty("--sapUiIntegrationEditorFormHeight", sValue);
+		}
+	};
+
+	Editor.prototype.setWidth = function(sValue) {
+		if (sValue) {
+			this.setProperty("width", sValue);
+			document.body.style.setProperty("--sapUiIntegrationEditorFormWidth", sValue);
+		}
+	};
+
 	/**
 	 * Destroy the editor and the internal instances that it created
 	 */
@@ -2848,6 +3231,8 @@ sap.ui.define([
 					case "integer":
 					case "number": oItem.value = 0; break;
 					case "string[]": oItem.value = []; break;
+					case "object": oItem.value = undefined; break;
+					case "object[]": oItem.value = undefined; break;
 					default: oItem.value = "";
 				}
 			}