@openui5/sap.ui.integration 1.97.1 → 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",
@@ -30,6 +31,7 @@ sap.ui.define([
 	"sap/base/Log",
 	"sap/ui/core/Popup",
 	"sap/base/i18n/ResourceBundle",
+	"sap/ui/integration/editor/EditorResourceBundles",
 	"sap/ui/thirdparty/URI",
 	"sap/ui/dom/includeStylesheet",
 	"sap/base/util/LoaderExtensions",
@@ -45,7 +47,10 @@ sap.ui.define([
 	"./Settings",
 	"sap/m/FlexItemData",
 	"sap/m/FlexBox",
-	"sap/m/Button"
+	"sap/m/Button",
+	"sap/m/OverflowToolbar",
+	"sap/m/IconTabBar",
+	"sap/m/IconTabFilter"
 ], function (
 	ui5loader,
 	Control,
@@ -57,6 +62,7 @@ sap.ui.define([
 	Interface,
 	Designtime,
 	JSONModel,
+	ODataModel,
 	Utils,
 	Destinations,
 	DataProviderFactory,
@@ -72,6 +78,7 @@ sap.ui.define([
 	Log,
 	Popup,
 	ResourceBundle,
+	EditorResourceBundles,
 	URI,
 	includeStylesheet,
 	LoaderExtensions,
@@ -87,7 +94,10 @@ sap.ui.define([
 	Settings,
 	FlexItemData,
 	FlexBox,
-	Button
+	Button,
+	OverflowToolbar,
+	IconTabBar,
+	IconTabFilter
 ) {
 	"use strict";
 
@@ -134,7 +144,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.97.1
+	 * @version 1.100.0
 	 * @constructor
 	 * @since 1.94
 	 * @private
@@ -187,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: {
@@ -257,8 +275,6 @@ sap.ui.define([
 				if (oControl.getMode() !== "translation") {
 					oRm.addClass("settingsButtonSpace");
 				}
-
-				oRm.writeClasses();
 				oRm.openEnd();
 				if (oControl.getMode() !== "translation") {
 					oRm.renderControl(oControl.getAggregation("_messageStrip"));
@@ -267,9 +283,11 @@ sap.ui.define([
 				//render items
 				if (aItems) {
 					var oPanel;
+					var oSubGroup;
 					var oLanguagePanel;
 					var oLabelItemForNotWrapping;
 					var oColFields = [];
+					var oColFieldsOfSubGroup = [];
 					var oOriginalField;
 					var addColFields = function () {
 						if (oColFields.length > 0) {
@@ -285,38 +303,154 @@ sap.ui.define([
 							oColFields = [];
 						}
 					};
+					var addColFieldsOfSubGroup = function () {
+						if (oColFieldsOfSubGroup.length > 0) {
+							var iLess = 2 - oColFieldsOfSubGroup.length;
+							for (var n = 0; n < iLess; n++) {
+								oColFieldsOfSubGroup.push(new VBox());
+							}
+							oSubGroup.addContent(new FlexBox({
+								alignItems: "Start",
+								justifyContent: "SpaceBetween",
+								items: oColFieldsOfSubGroup
+							}));
+							oColFieldsOfSubGroup = [];
+						}
+					};
+					var renderPanel = function (oPanel) {
+						if (oPanel.getContent().length > 0) {
+							var aContents = oPanel.getContent();
+							if (aContents.length === 1 && aContents[0].isA("sap.m.MessageStrip")) {
+								return;
+							}
+							if (aContents[0].isA("sap.m.MessageStrip")) {
+								oPanel.removeContent(0);
+								oPanel.addContent(aContents[0]);
+							}
+							oRm.renderControl(oPanel);
+							if (oPanel._messageStrip) {
+								oRm.renderControl(oPanel._messageStrip);
+							}
+						}
+					};
+					var addSubPanel = function (oPanel, oSubGroup) {
+						if (oPanel && oSubGroup.getContent().length > 0) {
+							var aContents = oSubGroup.getContent();
+							if (aContents[0].isA("sap.m.MessageStrip")) {
+								oSubGroup.removeContent(0);
+								oSubGroup.addContent(aContents[0]);
+							}
+							oPanel.addContent(oSubGroup);
+							if (oSubGroup._messageStrip) {
+								oPanel.addContent(oSubGroup._messageStrip);
+							}
+						} else {
+							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 (oPanel) {
-									//add current col fields to previous panel, then empty the col fields list
-									addColFields();
-									//render previous panel
-									if (oPanel.getContent().length > 0) {
-										oRm.renderControl(oPanel);
+							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
+									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 (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);
+										oSubGroup = null;
+									}
+									oPanel = oItem;
+									oPanel._subItems = [];
+									oPanel.addStyleClass("sapUiIntegrationEditorItem");
 								}
-								oPanel = oItem;
-								oPanel.addStyleClass("sapUiIntegrationEditorItem");
 								if (i === aItems.length - 1) {
 									//add current col fields to panel, then empty the col fields list
 									addColFields();
-									if (oPanel.getContent().length > 0) {
-										oRm.renderControl(oPanel);
-									}
+									renderPanel(oPanel);
 								}
 								continue;
 							}
 							// add style class for the hint under group and checkbox/toggle
 							if (oItem.isA("sap.m.FormattedText")) {
-								oPanel.addContent(oItem.addStyleClass("sapUiIntegrationEditorHint"));
+								if (oSubGroup) {
+									oSubGroup.addContent(oItem.addStyleClass("sapUiIntegrationEditorHint"));
+								} else {
+									oPanel.addContent(oItem.addStyleClass("sapUiIntegrationEditorHint"));
+								}
 								if (i === aItems.length - 1) {
+									if (oSubGroup) {
+										//add current col fields to previous sub panel, then empty the col fields list
+										addColFieldsOfSubGroup();
+										//add sub panel to panel
+										addSubPanel(oPanel, oSubGroup);
+									}
 									//add current col fields to panel, then empty the col fields list
 									addColFields();
-									if (oPanel.getContent().length > 0) {
-										oRm.renderControl(oPanel);
-									}
+									renderPanel(oPanel);
 								}
 								continue;
 							}
@@ -332,19 +466,36 @@ sap.ui.define([
 								} else {
 									//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 || (oItem._cols === 1 && oColFields.length === 2)) {
+									if (oItem._cols === 2) {
+										if (oSubGroup) {
+											addColFieldsOfSubGroup();
+										} else {
+											addColFields();
+										}
+									} else if (oColFieldsOfSubGroup.length === 2) {
+										addColFieldsOfSubGroup();
+									} else if (oColFields.length === 2) {
 										addColFields();
 									}
-									oPanel.addContent(oItem);
+									if (oSubGroup) {
+										oSubGroup.addContent(oItem);
+									} else {
+										oPanel.addContent(oItem);
+									}
 								}
 							} else if (oItem.isA("sap.m.ToolbarSpacer")) {
-								addColFields();
 								if (oItem._hasLine) {
 									oItem.addStyleClass("sapUiIntegrationEditorSpacerWithLine");
 								} else {
 									oItem.addStyleClass("sapUiIntegrationEditorSpacerWithoutLine");
 								}
-								oPanel.addContent(oItem);
+								if (oSubGroup) {
+									addColFieldsOfSubGroup();
+									oSubGroup.addContent(oItem);
+								} else {
+									addColFields();
+									oPanel.addContent(oItem);
+								}
 							} else {
 								var oConfig = oItem.getConfiguration(),
 									aInfoHBox = new HBox(),
@@ -460,32 +611,60 @@ sap.ui.define([
 											]
 										});
 									}
-									//render lable and field for NotWrapping parameter
+									//render label and field for NotWrapping parameter
 									if (oItem._cols === 1) {
-										if (oColFields.length === 2) {
-											addColFields();
-										}
-										if (oConfig.hint) {
-											var oHint = oControl._createHint(oConfig.hint);
-											var oColVBox = new VBox({
-												items: [
-													oHBox,
-													oHint.addStyleClass("sapUiIntegrationEditorHint")
-												]
-											});
-											oColVBox.addStyleClass("col1");
-											oColFields.push(oColVBox);
+										if (oSubGroup) {
+											if (oColFieldsOfSubGroup.length === 2) {
+												addColFieldsOfSubGroup();
+											}
+											if (oConfig.hint) {
+												var oHint = oControl._createHint(oConfig.hint);
+												var oColVBox = new VBox({
+													items: [
+														oHBox,
+														oHint.addStyleClass("sapUiIntegrationEditorHint")
+													]
+												});
+												oColVBox.addStyleClass("col1");
+												oColFieldsOfSubGroup.push(oColVBox);
+											} else {
+												oHBox.addStyleClass("col1");
+												oColFieldsOfSubGroup.push(oHBox);
+											}
 										} else {
-											oHBox.addStyleClass("col1");
-											oColFields.push(oHBox);
+											if (oColFields.length === 2) {
+												addColFields();
+											}
+											if (oConfig.hint) {
+												var oHint = oControl._createHint(oConfig.hint);
+												var oColVBox = new VBox({
+													items: [
+														oHBox,
+														oHint.addStyleClass("sapUiIntegrationEditorHint")
+													]
+												});
+												oColVBox.addStyleClass("col1");
+												oColFields.push(oColVBox);
+											} else {
+												oHBox.addStyleClass("col1");
+												oColFields.push(oHBox);
+											}
 										}
+									} else if (oSubGroup) {
+										addColFieldsOfSubGroup();
+										oSubGroup.addContent(oHBox);
 									} else {
 										addColFields();
 										oPanel.addContent(oHBox);
 									}
 									oLabelItemForNotWrapping = null;
 								} else {
-									var oLabel = oPanel.getContent().pop();
+									var oLabel;
+									if (oSubGroup) {
+										oLabel = oSubGroup.getContent().pop();
+									} else {
+										oLabel = oPanel.getContent().pop();
+									}
 									oLabel.setLayoutData(oFlexItemDataForInfo);
 									if (aInfoHBox.getItems().length > 0) {
 										oLabel.addStyleClass("sapUiIntegrationEditorItemLabelWithInfo");
@@ -519,19 +698,44 @@ sap.ui.define([
 											oColVBox.addItem(oHint.addStyleClass("sapUiIntegrationEditorHint"));
 										}
 										oColVBox.addStyleClass("col1");
-										oColFields.push(oColVBox);
+										if (oSubGroup) {
+											oColFieldsOfSubGroup.push(oColVBox);
+										} else {
+											oColFields.push(oColVBox);
+										}
+									} else if (oSubGroup) {
+										oSubGroup.addContent(oLabelFlexBox);
+										oSubGroup.addContent(oItem);
 									} else {
 										oPanel.addContent(oLabelFlexBox);
 										oPanel.addContent(oItem);
 									}
 								}
+								if (oSubGroup) {
+									oSubGroup._subItems.push({
+										"settingspath": oItem.getConfiguration()._settingspath,
+										"itemId": oItem.getId()
+									});
+								}
+								oPanel._subItems.push({
+									"settingspath": oItem.getConfiguration()._settingspath,
+									"itemId": oItem.getId()
+								});
 							}
 							if (i === aItems.length - 1) {
+								if (oSubGroup) {
+									//add current col fields to previous sub panel, then empty the col fields list
+									addColFieldsOfSubGroup();
+									//add sub panel to panel
+									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();
-								if (oPanel.getContent().length > 0) {
-									oRm.renderControl(oPanel);
-								}
+								renderPanel(oPanel);
 							}
 						} else {
 							if (i === 0) {
@@ -541,13 +745,61 @@ sap.ui.define([
 								oLanguagePanel.addStyleClass("sapUiIntegrationEditorTranslationPanel");
 								continue;
 							}
-							if (oItem.isA("sap.m.Panel")) {
-								//add sub panel if it has content into top panel
-								if (oPanel && oPanel.getContent().length > 0) {
-									oLanguagePanel.addContent(oPanel);
+							if (oItem.isA("sap.m.Panel") || oItem.isA("sap.m.IconTabBar")) {
+								if (oSubGroup) {
+									//add sub panel to panel
+									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 (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 {
+									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("sapUiIntegrationEditorSubGroup");
+								}
+								if (i === aItems.length - 1) {
+									//add current col fields to panel, then empty the col fields list
+									addColFields();
+									renderPanel(oPanel);
 								}
-								oPanel = oItem;
-								oPanel.addStyleClass("sapUiIntegrationEditorTranslationSubPanel");
 								continue;
 							}
 							if (oItem.isA("sap.m.ToolbarSpacer")) {
@@ -557,7 +809,11 @@ sap.ui.define([
 								continue;
 							}
 							if (oItem.isA("sap.m.Label")) {
-								oPanel.addContent(oItem);
+								if (oSubGroup) {
+									oSubGroup.addContent(oItem);
+								} else {
+									oPanel.addContent(oItem);
+								}
 								continue;
 							}
 							//oItem.addStyleClass("language");
@@ -573,8 +829,20 @@ sap.ui.define([
 									oItem
 								]
 							}).addStyleClass("notWrappingRow");
-							oPanel.addContent(oHBox);
+							if (oSubGroup) {
+								oSubGroup.addContent(oHBox);
+							} else {
+								oPanel.addContent(oHBox);
+							}
 							if (i === aItems.length - 1) {
+								if (oSubGroup) {
+									//add sub panel to panel
+									if (oSubGroup.isA("sap.m.Panel")) {
+										addSubPanel(oPanel, oSubGroup);
+									} else {
+										addSubTab(oPanel, oSubGroup);
+									}
+								}
 								oLanguagePanel.addContent(oPanel);
 							}
 						}
@@ -604,9 +872,13 @@ sap.ui.define([
 		this._appliedLayerManifestChanges = [];
 		this._currentLayerManifestChanges = {};
 		this._mDestinationDataProviders = {};
-		this.setAggregation("_messageStrip", new MessageStrip({
+		var oMessageStrip = new MessageStrip({
 			showIcon: false
-		}));
+		});
+		oMessageStrip.addStyleClass("sapUiIntegrationEditorFieldMessageStrip");
+		this.setAggregation("_messageStrip", oMessageStrip);
+		MessageStripId = oMessageStrip.getId();
+		this.setLanguage(Core.getConfiguration().getLanguage());
 		/**
 		 * Facade of the {@link sap.ui.integration.editor.Editor} control.
 		 * @interface
@@ -614,7 +886,7 @@ sap.ui.define([
 		 * @experimental since 1.94
 		 * @public
 		 * @author SAP SE
-		 * @version 1.97.1
+		 * @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
@@ -755,17 +1027,22 @@ sap.ui.define([
 				this._registerManifestModulePath();
 				this._oInitialManifestModel = new JSONModel(this._oEditorManifest._oInitialJson);
 				this.setProperty("json", this._oEditorManifest._oInitialJson, bSuppress);
-				var oManifestJson = this._oEditorManifest._oManifest.getRawJson();
+				var oManifestJson = this._oEditorManifest.oJson;
 				var _beforeCurrentLayer = merge({}, oManifestJson);
 				this._beforeManifestModel = new JSONModel(_beforeCurrentLayer);
 				if (iCurrentModeIndex < Merger.layers["translation"] && this._currentLayerManifestChanges) {
 					//merge if not translation
-					oManifestJson = Merger.mergeDelta(oManifestJson, [this._currentLayerManifestChanges]);
+					oManifestJson = Merger.mergeDelta(oManifestJson, [this._currentLayerManifestChanges], this.getSection());
 				}
 				//create a manifest model after the changes are merged
 				this._manifestModel = new JSONModel(oManifestJson);
 				this._isManifestReady = true;
 				this.fireManifestReady();
+				var vI18n = this._oEditorManifest.get("/sap.app/i18n");
+				var sResourceBundleURL = this.getBaseUrl() + vI18n;
+				if (vI18n && EditorResourceBundles.getResourceBundleURL() !== sResourceBundleURL) {
+					EditorResourceBundles.setResourceBundleURL(sResourceBundleURL);
+				}
 				//use the translations
 				this._loadDefaultTranslations();
 				//add a context model
@@ -773,7 +1050,6 @@ sap.ui.define([
 				if (this._oEditorManifest.getResourceBundle()) {
 					this._enhanceI18nModel(this._oEditorManifest.getResourceBundle());
 				}
-
 				return this._loadExtension().then(function() {
 					this._initInternal();
 				}.bind(this));
@@ -801,27 +1077,21 @@ sap.ui.define([
 		}
 
 		var oResourceBundle = Core.getLibraryResourceBundle("sap.ui.integration");
-		this._enhanceI18nModel(oResourceBundle);
+		var oResourceModel = new ResourceModel({
+			bundle: oResourceBundle
+		});
+
+		this.setModel(oResourceModel, "i18n");
+		this._oResourceBundle = oResourceBundle;
 		this._defaultTranslationsLoaded = true;
 	};
 
 	Editor.prototype._enhanceI18nModel = function (oResourceBundle) {
 		var oResourceModel = this.getModel("i18n");
-
-		if (oResourceModel) {
-			if (oResourceModel.getResourceBundle().oUrlInfo.url !== oResourceBundle.oUrlInfo.url) {
-				oResourceModel.enhance(oResourceBundle);
-				this._oResourceBundle = oResourceModel.getResourceBundle();
-			}
-			return;
+		if (oResourceModel.getResourceBundle().oUrlInfo.url !== oResourceBundle.oUrlInfo.url) {
+			oResourceModel.enhance(oResourceBundle);
+			this._oResourceBundle = oResourceModel.getResourceBundle();
 		}
-
-		oResourceModel = new ResourceModel({
-			bundle: oResourceBundle
-		});
-
-		this.setModel(oResourceModel, "i18n");
-		this._oResourceBundle = oResourceBundle;
 	};
 
 	Editor.prototype._loadExtension = function () {
@@ -985,8 +1255,7 @@ sap.ui.define([
 		this._language = sValue.replaceAll('_', '-');
 		if (this.getLanguage() != sValue) {
 			//reload resource bundler if language changed
-			var oResourceBundle = Core.getLibraryResourceBundle("sap.ui.integration");
-			this._enhanceI18nModel(oResourceBundle);
+			this._loadDefaultTranslations();
 		}
 		this.setProperty("language", sValue, bSuppress);
 		if (!Editor._languages[this._language]) {
@@ -1016,44 +1285,36 @@ sap.ui.define([
 		 */
 	 Editor.prototype._filterManifestChangesByLayer = function (oManifestSettings) {
 		var aChanges = [],
+			that = this,
+			oBeforeLayerChanges = {},
 			oCurrentLayerChanges = { ":layer": Merger.layers[this.getMode()] },
-			iCurrentModeIndex = Merger.layers[this.getMode()];
-		/* hide multi language function since there has a translation issue in Portal
-		var sEditorLanguage = this._language || this.getLanguage() || Core.getConfiguration().getLanguage().replaceAll('_', '-');
-		*/
+			iCurrentModeIndex = Merger.layers[that.getMode()];
 		oManifestSettings.manifestChanges.forEach(function (oChange) {
 			//filter manifest changes. only the changes before the current layer are needed
 			//editor will merge the last layer locally to allow "reset" or properties
 			//also for translation layer, the "original" value is needed
 			var iLayer = oChange.hasOwnProperty(":layer") ? oChange[":layer"] : 1000;
-			/* hide multi language function since there has a translation issue in Portal
-			//backward compatibility for old changes which not have property "multipleLanguage"
-			//replace the value property by valueTranslation property
-			if (!oChange.hasOwnProperty(":multipleLanguage")) {
-				var oChangeTransfered = {};
-				var aKeys = Object.keys(oChange);
-				for (var j = 0; j < aKeys.length; j++) {
-					if (aKeys[j].endsWith("/value") && typeof oChange[aKeys[j]] === "string") {
-						var sValueTranslationsPath = aKeys[j].substring(0, aKeys[j].lastIndexOf("/")) + "/valueTranslations";
-						if (!includes(aKeys, sValueTranslationsPath)) {
-							var oValueTranslation = {};
-							if (iLayer === Merger.layers["translation"]) {
-								oValueTranslation[sEditorLanguage] = oChange[aKeys[j]];
-							} else {
-								for (var p in Editor._languages) {
-									oValueTranslation[p] = oChange[aKeys[j]];
-								}
-							}
-							oChangeTransfered[sValueTranslationsPath] = oValueTranslation;
-							continue;
-						}
-					}
-					oChangeTransfered[aKeys[j]] = oChange[aKeys[j]];
+			if (iLayer === Merger.layers["translation"]) {
+				var sLanguage = that._language;
+				if (sLanguage === "") {
+					sLanguage = Core.getConfiguration().getLanguage().replaceAll('_', '-');
 				}
-				oChange = oChangeTransfered;
-			}*/
+				var oTranslationChange = {
+					"texts": {}
+				};
+				oTranslationChange.texts[sLanguage] = {};
+				Object.keys(oChange).forEach(function (s) {
+					if (s.charAt(0) === "/") {
+						oTranslationChange.texts[sLanguage][s] = oChange[s];
+					} else {
+						oTranslationChange[s] = oChange[s];
+					}
+				});
+				oChange = oTranslationChange;
+			}
 			if (iLayer < iCurrentModeIndex) {
 				aChanges.push(oChange);
+				oBeforeLayerChanges = merge(oBeforeLayerChanges, oChange);
 			} else if (iLayer === iCurrentModeIndex) {
 				//store the current layer changes locally for later processing
 				oCurrentLayerChanges = oChange;
@@ -1061,6 +1322,7 @@ sap.ui.define([
 		});
 		oManifestSettings.manifestChanges = aChanges;
 		this._currentLayerManifestChanges = oCurrentLayerChanges;
+		this._beforeLayerManifestChanges = oBeforeLayerChanges;
 	};
 	/**
 	 * Initializes the editor after the json is set
@@ -1191,47 +1453,33 @@ sap.ui.define([
 			for (var n in oSettings.form.items) {
 				var oItem = oSettings.form.items[n];
 				if (oItem.editable && oItem.visible) {
-					/* hide multi language function since there has a translation issue in Portal
-					var oValueTranslations;
-					var sLanguage = this.getMode() !== "translation" ? Core.getConfiguration().getLanguage().replaceAll('_', '-') : this._language || this.getLanguage();
-					*/
-					var sValueTranslationsPath = "";
-					if (oItem.manifestpath) {
-						sValueTranslationsPath = oItem.manifestpath.substring(0, oItem.manifestpath.lastIndexOf("/")) + "/valueTranslations";
-					}
 					if (this.getMode() !== "translation") {
-						if (oItem.translatable && !oItem._changed && oItem._translatedPlaceholder && !this._currentLayerManifestChanges[oItem.manifestpath] && !this._currentLayerManifestChanges[sValueTranslationsPath]) {
+						if (oItem.translatable && !oItem._changed && oItem._translatedPlaceholder && !this._currentLayerManifestChanges[oItem.manifestpath]) {
 							//do not save a value that was not changed and comes from a translated default value
 							//mResult[oItem.manifestpath] = oItem._translatedPlaceholder;
 							//if we would save it
 							continue;
 						} else {
-							/* hide multi language function since there has a translation issue in Portal
-							* need to remove below line later if we want release multi language function again
-							*/
-							mResult[oItem.manifestpath] = oItem.value;
 							if (oItem.valueItems) {
 								mResult[oItem.manifestpath.substring(0, oItem.manifestpath.lastIndexOf("/")) + "/valueItems"] = oItem.valueItems;
 							}
-							// save the value tokens for backend filter with MultiInput
-							if (oItem.valueTokens) {
-								mResult[oItem.manifestpath.substring(0, oItem.manifestpath.lastIndexOf("/")) + "/valueTokens"] = oItem.valueTokens;
+							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;
 							}
-							/* hide multi language function since there has a translation issue in Portal
-							//if current parameter is string and translatable, create or merge valueTranslations property of it.
-							//set the current change to current language in valueTranslations.
-							if (oItem.type === "string" && oItem.translatable) {
-								if (!oItem.valueTranslations) {
-									oValueTranslations = {};
-								} else {
-									oValueTranslations = deepClone(oItem.valueTranslations, 500);
-								}
-								oValueTranslations[sLanguage] = oItem.value;
-								oItem.valueTranslations = oValueTranslations;
-								mResult[sValueTranslationsPath] = oItem.valueTranslations;
-							} else {
-								mResult[oItem.manifestpath] = oItem.value;
-							}*/
 						}
 					} else if (oItem.translatable && oItem.value) {
 						//in translation mode create an entry if there is a value
@@ -1260,6 +1508,15 @@ sap.ui.define([
 				}
 			}
 		}
+		if (oSettings.texts) {
+			mResult.texts = {};
+			for (var language in oSettings.texts) {
+				mResult.texts[language] = {};
+				for (var translation in oSettings.texts[language]) {
+					mResult.texts[language][translation] = oSettings.texts[language][translation];
+				}
+			}
+		}
 		//add a property ":multipleLanguage" for backward compatibility of multiple language feature
 		if (this.getMode() !== "translation") {
 			mResult[":multipleLanguage"] = true;
@@ -1461,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;
@@ -1708,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);
@@ -1721,7 +1984,8 @@ sap.ui.define([
 			oField._layout = oConfig.layout;
 		}
 		oField._oDataProviderFactory = this._oDataProviderFactory;
-		oField.setAssociation("_messageStrip", this.getAggregation("_messageStrip"));
+		oField.setAssociation("_messageStrip", MessageStripId);
+		oField._previewPostion = this.getPreviewPosition();
 		return oField;
 	};
 
@@ -1797,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,
@@ -1844,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[]") {
@@ -1887,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");
@@ -1913,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));
 	};
@@ -2060,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);
@@ -2075,7 +2392,7 @@ sap.ui.define([
 							if (aResult[i].indexOf("destinations.") === 0) {
 								sValueKey = "/name";
 							}
-							sDependentPath = sDependentPath + aResult[i].replace(".", "/") + "/" + sValueKey;
+							sDependentPath = sDependentPath + "/" + aResult[i].replace(".", "/") + sValueKey;
 						} else if (aResult[i].indexOf("{items>") === 0) {
 							sDependentPath = sDependentPath + "/parameters/" + aResult[i].slice(7, -1);
 						}
@@ -2097,12 +2414,76 @@ sap.ui.define([
 			}
 		}
 	};
+
+	Editor.prototype.getBeforeLayerChange = function (sKey) {
+		if (!this._beforeLayerManifestChanges) {
+			this._beforeLayerManifestChanges = {};
+		}
+		return this._beforeLayerManifestChanges[sKey];
+	};
+
+	Editor.prototype.getTranslationValueInTexts = function (sLanguage, sKey) {
+		var sTranslationPath = "/texts/" + sLanguage;
+		var oProperty = this._settingsModel.getProperty(sTranslationPath) || {};
+		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;
@@ -2116,43 +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") {
-			var oPanel = new Panel({
-				headerText: oConfig.label,
-				visible: oConfig.visible,
-				expandable: oConfig.expandable !== false,
-				expanded: oConfig.expanded !== false,
-				width: "auto",
-				backgroundDesign: "Transparent",
-				objectBindings: {
-					currentSettings: {
-						path: "currentSettings>" + oConfig._settingspath
-					},
-					items: {
-						path: "items>/form/items"
+			oConfig.expanded = oConfig.expanded !== false;
+			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>/"
+					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);
+							}
+						}
 					}
-				},
-				expand: function (oEvent) {
-					var oControl = oEvent.getSource();
-					if (!oEvent.mParameters.expand && oControl.getParent().getAggregation("_messageStrip") !== null) {
-						MessageStripId = oControl.getParent().getAggregation("_messageStrip").getId();
+				});
+				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 (oEvent.mParameters.expand) {
-						var oMessageStrip = Core.byId(MessageStripId);
-						oControl.addContent(oMessageStrip);
-						oControl.focus();
+				});
+				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;
+				}
+				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);
 				}
-			});
-			this.addAggregation("_formContent", oPanel);
-			oPanel._cols = oConfig.cols || 2; //by default 2 cols
-			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();
+						}
+					}
+				};
+				oPanel.addEventDelegate(oDelegate);
+				return;
 			}
-			return;
 		}
 		if (oConfig.type === "separator") {
 			var oSeparator = new Separator();
@@ -2162,6 +2775,7 @@ sap.ui.define([
 			return;
 		}
 		var oNewLabel = null;
+		var sLanguage = Core.getConfiguration().getLanguage().replaceAll('_', '-');
 		if (sMode === "translation") {
 			if ((typeof oConfig.value === "string" && oConfig.value.indexOf("{") === 0) || typeof oConfig.values !== "undefined") {
 				//do not show dynamic values for translation
@@ -2179,63 +2793,68 @@ sap.ui.define([
 			delete oConfig.values;
 
 			//create a configuration clone. map the _settingspath setting to _language, and set it to not editable
-			var origLangField = deepClone(oConfig, 500);
-			origLangField._settingspath += "/_language";
-			origLangField.editable = false;
-			origLangField.required = false;
-			/* hide multi language function since there has a translation issue in Portal
-			//if has valueTransaltions, get value via language setting in core
-			if (origLangField.valueTranslations) {
-				var sLanguage = Core.getConfiguration().getLanguage().replaceAll('_', '-');
-				if (Editor._languages[sLanguage]) {
-					if (origLangField.valueTranslations[sLanguage]) {
-						origLangField.value = origLangField.valueTranslations[sLanguage];
-					}
-				} else if (sLanguage.indexOf"-") > -1) {
-					sLanguage = sLanguage.substring(0, sLanguage.indexOf("-"));
-					if (Editor._languages[sLanguage]) {
-						if (origLangField.valueTranslations[sLanguage]) {
-							origLangField.value = origLangField.valueTranslations[sLanguage];
-						}
-					}
+			var origLangFieldConfig = deepClone(oConfig, 500);
+			origLangFieldConfig._settingspath += "/_language";
+			origLangFieldConfig.editable = false;
+			origLangFieldConfig.required = false;
+			//if has value transaltions, get value via language setting in core
+			if (!Editor._languages[sLanguage] && sLanguage.indexOf("-") > -1) {
+				sLanguage = sLanguage.substring(0, sLanguage.indexOf("-"));
+			}
+			if (Editor._languages[sLanguage]) {
+				var sTranslateText = this.getTranslationValueInTexts(sLanguage, oConfig.manifestpath);
+				if (sTranslateText) {
+					origLangFieldConfig.value = sTranslateText;
 				}
-			}*/
-			if (!origLangField.value) {
+			}
+			if (!origLangFieldConfig.value) {
 				//the original language field shows only a text control. If empty we show a dash to avoid empty text.
-				origLangField.value = "-";
+				origLangFieldConfig.value = "-";
 			}
-			var oLabel = this._createLabel(origLangField);
+			var oLabel = this._createLabel(origLangFieldConfig);
 			this.addAggregation("_formContent",
 				oLabel
 			);
-			var oField = this._createField(origLangField);
-			oField.isOrigLangField = true;
-			this.addAggregation("_formContent", oField);
+			var oOrigLanguageField = this._createField(origLangFieldConfig);
+			oOrigLanguageField.isOrigLangField = true;
+			this.addAggregation("_formContent", oOrigLanguageField);
 
-			oConfig.value = oConfig._translatedValue || "";
 			//even if a item is not visible or not editable by another layer for translations it should always be editable and visible
 			oConfig.editable = oConfig.visible = oConfig.translatable;
-			//if there are changes for the current layer, read the already translated value from there
-			//now merge these changes for translation into the item configs
-			if (this._currentLayerManifestChanges) {
-				oConfig.value = this._currentLayerManifestChanges[oConfig.manifestpath] || oConfig.value;
+			sLanguage = this._language;
+			if (!this.getBeforeLayerChange(oConfig.manifestpath)) {
+				oConfig.value = oConfig._translatedValue || "";
+			}
+			var sTranslateText = this.getTranslationValueInTexts(sLanguage, oConfig.manifestpath);
+			if (sTranslateText) {
+				oConfig.value = sTranslateText;
 			}
 			//change the label for the translation field
 			oConfig.label = oConfig._translatedLabel || "";
 			oConfig.required = false; //translation is never required
-			var oField = this._createField(oConfig);
+			var oTranslateLanguageField = this._createField(oConfig);
 			this.addAggregation("_formContent",
-				oField
+				oTranslateLanguageField
 			);
 		} else {
 			oNewLabel = this._createLabel(oConfig);
 			this.addAggregation("_formContent",
 				oNewLabel
 			);
+			var sBeforeLayerChange = this.getBeforeLayerChange(oConfig.manifestpath);
+			if (sBeforeLayerChange) {
+				oConfig._beforeLayerChange = sBeforeLayerChange;
+			}
 			//if there are changes for the current layer, read the already translated value from there
 			//now merge these changes for translation into the item configs
-			if (this._currentLayerManifestChanges) {
-				oConfig.value = this._currentLayerManifestChanges[oConfig.manifestpath] || oConfig.value;
+			if (this._currentLayerManifestChanges && this._currentLayerManifestChanges[oConfig.manifestpath]) {
+				oConfig.value = this._currentLayerManifestChanges[oConfig.manifestpath];
+				oConfig._beforeLayerChange = oConfig.value;
+			}
+			sLanguage = this._language;
+			var sTranslateText = this.getTranslationValueInTexts(sLanguage, oConfig.manifestpath);
+			if (sTranslateText) {
+				oConfig.value = sTranslateText;
 			}
 			var oField = this._createField(oConfig);
 			this.addAggregation("_formContent",
@@ -2312,26 +2931,16 @@ sap.ui.define([
 		if (oContents && oContents.length > 0) {
 			this.destroyAggregation("_formContent");
 		}
-		var oSettings = this._settingsModel.getProperty("/");
+
+		var oSettingsData = this._settingsModel.getData();
 		var aItems;
-		if (oSettings.form && oSettings.form.items) {
-			aItems = oSettings.form.items;
-			//get current language
-			var sLanguage = this._language || this.getLanguage() || Core.getConfiguration().getLanguage().replaceAll('_', '-');
-			if (this.getMode() === "translation") {
-				//add top panel of translation editor
-				this._addItem({
-					type: "group",
-					translatable: true,
-					expandable: false,
-					label: this._oResourceBundle.getText("EDITOR_ORIGINALLANG") + ": " + Editor._languages[sLanguage]
-				});
-			}
+		if (oSettingsData.form && oSettingsData.form.items) {
+			aItems = oSettingsData.form.items;
 			//add general configuration group
 			var bAddGeneralSettingsPanel = false;
 			for (var m in aItems) {
 				var oItem = aItems[m];
-				if (oItem.type === "group") {
+				if (oItem.type === "group" && oItem.level !== "1") {
 					break;
 				} else if (oItem.visible) {
 					bAddGeneralSettingsPanel = true;
@@ -2340,41 +2949,50 @@ sap.ui.define([
 			}
 			if (bAddGeneralSettingsPanel) {
 				//add general settings panel
+				aItems = merge(
+					{
+						generalPanel : {
+							type: "group",
+							translatable: true,
+							expanded: true,
+							label: this._oResourceBundle.getText("EDITOR_PARAMETERS_GENERALSETTINGS"),
+							_settingspath: "/form/items/generalPanel"
+						}
+					}, aItems
+				);
+				oSettingsData.form.items = aItems;
+				this._settingsModel.setData(oSettingsData);
+			}
+		}
+
+		var oSettings = this._settingsModel.getProperty("/");
+		this._mItemsByPaths = {};
+		if (oSettings.form && oSettings.form.items) {
+			aItems = oSettings.form.items;
+			//get current language
+			var sLanguage = this._language || this.getLanguage() || Core.getConfiguration().getLanguage().replaceAll('_', '-');
+			if (this.getMode() === "translation") {
+				//add top panel of translation editor
 				this._addItem({
 					type: "group",
 					translatable: true,
-					label: this._oResourceBundle.getText("EDITOR_PARAMETERS_GENERALSETTINGS")
+					expandable: false,
+					expanded: true,
+					label: this._oResourceBundle.getText("EDITOR_ORIGINALLANG") + ": " + Editor._languages[sLanguage]
 				});
 			}
-			this._mItemsByPaths = {};
 			for (var n in aItems) {
 				var oItem = aItems[n];
 				if (oItem) {
 					//force a label setting, set it to the name of the item
 					oItem.label = oItem.label || n;
 					//what is the current value from the change?
-					/* hide multi language function since there has a translation issue in Portal
-					var sCurrentLayerValue, sValueTranslationsPath, aTranslationLayerValueChanges;
-					* remove below line if release this feature again
-					*/
 					var sCurrentLayerValue;
 					if (oItem.manifestpath) {
 						this._mItemsByPaths[oItem.manifestpath] = oItem;
-						/* hide multi language function since there has a translation issue in Portal
-						sValueTranslationsPath = oItem.manifestpath.substring(0, oItem.manifestpath.lastIndexOf("/")) + "/valueTranslations";
-						if (this.getMode() === "translation") {
-							if (this._currentLayerManifestChanges
-								&& this._currentLayerManifestChanges[sValueTranslationsPath]) {
-								//get valueTranslations from current layer changes if current mode is translation
-								aTranslationLayerValueChanges = this._currentLayerManifestChanges[sValueTranslationsPath];
-							}
-						} else {
+						if (this.getMode() !== "translation") {
 							sCurrentLayerValue = this._currentLayerManifestChanges[oItem.manifestpath];
-						}*/
-						/* hide multi language function since there has a translation issue in Portal
-						* need to remove below line later if release multi language function again
-						*/
-						sCurrentLayerValue = this._currentLayerManifestChanges[oItem.manifestpath];
+						}
 					}
 					//if not changed it should be undefined, and ignore changes in tranlation layer
 					oItem._changed = sCurrentLayerValue !== undefined && this.getMode() !== "translation";
@@ -2388,19 +3006,6 @@ sap.ui.define([
 					//check if the provided value from the parameter or designtime default value is a translated value
 					//restrict this to string types for now
 					if (oItem.type === "string") {
-						/* hide multi language function since there has a translation issue in Portal
-						//get i18n path of the editor, and set it to item for initializing EditorResourceBundles
-						var vI18n = this._oEditorManifest.get("/sap.app/i18n");
-						if (!vI18n) {
-							vI18n = "";
-						}
-						oItem._resourceBundleURL = this.getBaseUrl() + vI18n;
-						if (oItem.manifestpath) {
-							//merge valueTranslations in current mainfest mode and current layer changes
-							var oValueTranslationsInManifest = this._manifestModel.getProperty(sValueTranslationsPath);
-							oItem.valueTranslations = merge(oValueTranslationsInManifest, aTranslationLayerValueChanges);
-							aTranslationLayerValueChanges = undefined;
-						}*/
 						//check if is translatable via default value, if default value match "{{sTranslationTextKey}}" or "{i18n>sTranslationTextKey}", it is translatable
 						oItem._translatedDefaultPlaceholder = this._getManifestDefaultValue(oItem.manifestpath);
 						var sTranslationTextKey = null,
@@ -2410,7 +3015,7 @@ sap.ui.define([
 							if (this._isValueWithParameterSyntax(sPlaceholder)) {
 								oItem.translatable = false;
 							}
-							//parameter translated value wins over designtime defaultValue
+							//parameter translated value
 							if (this._isValueWithHandlebarsTranslation(sPlaceholder)) {
 								sTranslationTextKey = sPlaceholder.substring(2, sPlaceholder.length - 2);
 							} else if (sPlaceholder.startsWith("{i18n>")) {
@@ -2420,11 +3025,15 @@ sap.ui.define([
 							if (sTranslationTextKey) {
 								//force translatable, even if it was not explicitly set already
 								oItem.translatable = true;
+							} else if (oItem.translatable  && this.getMode() === "translation" && !this.getBeforeLayerChange(oItem.manifestpath)) {
+								//if no translation key which means item defined as string value directly.
+								//set the _translatedValue with item manifest value.
+								oItem._translatedValue  = oItem._translatedDefaultPlaceholder;
+								oItem.value = oItem._translatedValue;
 							}
 						}
 						//check if before value still has tranlation key
 						oItem._translatedPlaceholder = oItem._beforeValue;
-						sTranslationTextKey = null;
 						sPlaceholder = oItem._translatedPlaceholder;
 						if (sPlaceholder) {
 							//value with parameter syntax will not be translated
@@ -2437,35 +3046,33 @@ sap.ui.define([
 							} else if (sPlaceholder.startsWith("{i18n>")) {
 								sTranslationTextKey = sPlaceholder.substring(6, sPlaceholder.length - 1);
 							}
-							//only if there is a translation key
-							if (sTranslationTextKey) {
-								oItem._translatedValue = this.getModel("i18n").getResourceBundle().getText(sTranslationTextKey);
-								if (oItem._changed) {
-									//item was changed, take the current value
-									oItem.value = sCurrentLayerValue;
-								} else {
-									oItem.value = oItem._translatedValue;
-								}
-								if (oItem.valueTranslations && oItem.valueTranslations[sLanguage]) {
-									oItem.value = oItem.valueTranslations[sLanguage];
-								}
-								if (this.getMode() === "translation") {
-									//if we are in translation mode the default value differs and depends on the language
-									//TODO this does not work in SWZ, the base path is not taken into account...
-									//get the translated default value for the language we want to translate this.getLanguage()
-									oItem._translatedValue = this._getCurrentLanguageSpecificText(sTranslationTextKey);
+						}
+						var sTranslationValueinTexts = this.getTranslationValueInTexts(sLanguage, oItem.manifestpath);
+						//only if there is a translation key
+						if (sTranslationTextKey) {
+							oItem._translatedValue = this.getModel("i18n").getResourceBundle().getText(sTranslationTextKey);
+							if (oItem._changed) {
+								//item was changed, take the current value
+								oItem.value = sCurrentLayerValue;
+							} else if (oItem.value === oItem._translatedDefaultPlaceholder) {
+								oItem.value = oItem._translatedValue;
+							}
+							if (this.getMode() === "translation") {
+								//if we are in translation mode the default value differs and depends on the language
+								//TODO this does not work in SWZ, the base path is not taken into account...
+								//get the translated default value for the language we want to translate this.getLanguage()
+								//if the value is "", which means the i18n setting is not correct, do not use it as translated value
+								var sCurrentLanguageSpecificText = this._getCurrentLanguageSpecificText(sTranslationTextKey);
+								if (sCurrentLanguageSpecificText !== "") {
+									oItem._translatedValue = sCurrentLanguageSpecificText;
 								}
-							} else if (oItem.translatable  && this.getMode() === "translation") {
-								//if no translation key which means item defined as string value directly.
-								//set the _translatedValue with item manifest value or default value.
-								oItem._translatedValue  = oItem._translatedPlaceholder;
-								oItem.value = oItem._beforeValue;
+							} else if (sTranslationValueinTexts) {
+								oItem.value = sTranslationValueinTexts;
 							}
+						} else if (this.getMode() !== "translation" && oItem.translatable && sTranslationValueinTexts) {
+							oItem.value = sTranslationValueinTexts;
 						}
 						if (this.getMode() === "translation") {
-							if (oItem.valueTranslations && oItem.valueTranslations[sLanguage]) {
-								oItem._translatedValue = oItem.valueTranslations[sLanguage];
-							}
 							if (this._isValueWithHandlebarsTranslation(oItem.label)) {
 								oItem._translatedLabel = this._getCurrentLanguageSpecificText(oItem.label.substring(2, oItem.label.length - 2), true);
 							} else if (oItem.label && oItem.label.startsWith("{i18n>")) {
@@ -2503,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() {
@@ -2518,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
 	 */
@@ -2598,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 = "";
 				}
 			}
@@ -2613,6 +3248,7 @@ sap.ui.define([
 	 * Applies previous layer designtime settings that were changed
 	 */
 	Editor.prototype._applyDesigntimeLayers = function (oSettings) {
+		var oTexts = {};
 		//pull current values
 		if (this._appliedLayerManifestChanges && Array.isArray(this._appliedLayerManifestChanges)) {
 			for (var i = 0; i < this._appliedLayerManifestChanges.length; i++) {
@@ -2623,6 +3259,10 @@ sap.ui.define([
 						this._settingsModel.setProperty(aKeys[j], oChanges[aKeys[j]]);
 					}
 				}
+				var oAppliedLayerManifestChangeTexts = this._appliedLayerManifestChanges[i]["texts"];
+				if (oAppliedLayerManifestChangeTexts) {
+					oTexts = merge(oTexts, oAppliedLayerManifestChangeTexts);
+				}
 			}
 		}
 		if (this._currentLayerManifestChanges) {
@@ -2643,6 +3283,13 @@ sap.ui.define([
 					this._settingsModel.setProperty(sNext + "/" + sProp, oChanges[aKeys[j]]);
 				}
 			}
+			var ocurrentLayerManifestChangeTexts = this._currentLayerManifestChanges["texts"];
+			if (ocurrentLayerManifestChangeTexts) {
+				oTexts = merge(oTexts, ocurrentLayerManifestChangeTexts);
+			}
+		}
+		if (!deepEqual(oTexts, {})) {
+			this._settingsModel.setProperty("/texts", oTexts);
 		}
 	};
 	/**
@@ -2689,7 +3336,9 @@ sap.ui.define([
 				oSettings.form.items["destination.group"] = {
 					label: this._oResourceBundle.getText("EDITOR_DESTINATIONS") || "Destinations",
 					type: "group",
-					visible: true
+					expanded: true,
+					visible: true,
+					_settingspath: "/form/items/destination.group"
 				};
 			}
 			var oItems = oSettings.form.items,