@openui5/sap.ui.integration 1.101.0 → 1.102.2

package/src/sap/ui/integration/editor/fields/ObjectField.js

@@ -8,54 +8,72 @@ sap.ui.define([
 	"sap/ui/integration/editor/fields/BaseField",
 	"sap/m/Text",
 	"sap/m/TextArea",
-	"sap/m/Title",
 	"sap/m/Input",
+	"sap/m/NavContainer",
+	"sap/m/Page",
 	"sap/m/Popover",
 	"sap/m/OverflowToolbar",
 	"sap/m/ToolbarSpacer",
 	"sap/m/Button",
-	"sap/ui/core/Core",
 	"sap/ui/model/json/JSONModel",
 	"sap/ui/table/Table",
 	"sap/ui/table/Column",
 	"sap/m/Label",
-	"sap/m/HBox",
+	"sap/m/VBox",
 	"sap/ui/model/Filter",
 	"sap/ui/model/FilterOperator",
 	"sap/base/util/deepEqual",
 	"sap/ui/core/Icon",
 	"sap/m/Switch",
 	"sap/m/CheckBox",
+	"sap/m/MessageBox",
+	"sap/m/MessageToast",
 	"sap/base/util/deepClone",
 	"sap/m/Link",
 	"sap/ui/layout/form/SimpleForm",
-	"sap/base/util/merge"
+	"sap/base/util/merge",
+	"sap/m/List",
+	"sap/m/CustomListItem",
+	"sap/ui/model/Sorter",
+	"sap/ui/core/CustomData",
+	"sap/ui/integration/editor/EditorResourceBundles",
+	"sap/base/util/includes",
+	"sap/ui/integration/util/Utils"
 ], function (
 	BaseField,
 	Text,
 	TextArea,
-	Title,
 	Input,
+	NavContainer,
+	Page,
 	Popover,
 	OverflowToolbar,
 	ToolbarSpacer,
 	Button,
-	Core,
 	JSONModel,
 	Table,
 	Column,
 	Label,
-	HBox,
+	VBox,
 	Filter,
 	FilterOperator,
 	deepEqual,
 	Icon,
 	Switch,
 	CheckBox,
+	MessageBox,
+	MessageToast,
 	deepClone,
 	Link,
 	SimpleForm,
-	merge
+	merge,
+	List,
+	CustomListItem,
+	Sorter,
+	CustomData,
+	EditorResourceBundles,
+	includes,
+	Utils
 ) {
 	"use strict";
 	var REGEXP_TRANSLATABLE = /\{\{(?!parameters.)(?!destinations.)([^\}\}]+)\}\}/g;
@@ -66,7 +84,7 @@ sap.ui.define([
 	 * @alias sap.ui.integration.editor.fields.ObjectField
 	 * @author SAP SE
 	 * @since 1.100.0
-	 * @version 1.101.0
+	 * @version 1.102.2
 	 * @private
 	 * @experimental since 1.100.0
 	 * @ui5-restricted
@@ -81,7 +99,12 @@ sap.ui.define([
 
 	ObjectField.prototype.initVisualization = function (oConfig) {
 		var that = this;
-		that._newObjectTemplate = {};
+		that._newObjectTemplate = {
+			"_dt": {
+				"_selected": true,
+				"_uuid": ""
+			}
+		};
 		var oVisualization = oConfig.visualization;
 		if (!oVisualization) {
 			if (oConfig.value && !oConfig.properties && (!oConfig.values || (oConfig.values && !oConfig.values.metadata))) {
@@ -121,9 +144,12 @@ sap.ui.define([
 		if (typeof oConfig.value === "object" && !deepEqual(oConfig.value, {}) && !Array.isArray(oConfig.value) && !oConfig.properties) {
 			var oProperties = {};
 			for (var n in oConfig.value) {
-				var sType = typeof oConfig.value[n];
-				var oProperty = sType === "string" ? {} : {"type": sType};
-				oProperties[n] = oProperty;
+				// not show _dt property which generated and used by editor
+				if (n !== "_dt") {
+					var sType = typeof oConfig.value[n];
+					var oProperty = sType === "string" ? {} : {"type": sType};
+					oProperties[n] = oProperty;
+				}
 			}
 			if (!deepEqual(oProperties, {})) {
 				oConfig.properties = oProperties;
@@ -154,12 +180,11 @@ sap.ui.define([
 			type: Table,
 			settings: {
 				rows: "{" + sPath + "}",
-				selectionMode: "MultiToggle",
-				enableSelectAll: that._bIsEnableSelectAllInTable === true,
 				visibleRowCount: 5,
 				busy: "{currentSettings>_loading}",
 				columns: columns,
-				rowSelectionChange: that.onSelectionChange.bind(that),
+				selectionBehavior: "RowOnly",
+				rowSelectionChange: that.onTableSelectionChange.bind(that),
 				toolbar: oTableToolbar,
 				filter: that.onFilter.bind(that)
 			}
@@ -174,10 +199,18 @@ sap.ui.define([
 			var oModel = this.getAggregation("_field").getModel();
 			oModel.checkUpdate(true);
 			var oValue = oModel.getProperty("/value");
+			// generate uuid if not exists
+			if (!oValue._dt) {
+				oValue._dt = {
+					_uuid: Utils.generateUuidV4()
+				};
+			} else if (!oValue._dt._uuid) {
+				oValue._dt._uuid = Utils.generateUuidV4();
+			}
 			oValue = deepClone(oValue, 500);
-			this._setCurrentProperty("value", oValue);
+			this.setValue(oValue);
 		}.bind(that);
-		var aObjectPropertyFormContents = that.createFormContents(fnChange, "/value/");
+		var aObjectPropertyFormContents = that.createFormContents(fnChange, "/value/", false, that.openTranslationPopup);
 		var oEditModeButton = new Button({
 			icon: {
 				path: '/editMode',
@@ -223,8 +256,13 @@ sap.ui.define([
 				}
 			},
 			press: function (oEvent) {
-				that._setCurrentProperty("value", undefined);
+				that.setValue(undefined);
 				var oModel = that.getAggregation("_field").getModel();
+				// delete the translation texts when deleting the object
+				var oObject = oModel.getProperty("/value");
+				if (oObject && oObject._dt && oObject._dt._uuid) {
+					that.deleteTranslationValueInTexts(undefined, oObject._dt._uuid);
+				}
 				oModel.setProperty("/value", {});
 				oModel.checkUpdate(true);
 			}
@@ -291,131 +329,184 @@ sap.ui.define([
 		return oVisualization;
 	};
 
+	ObjectField.prototype.buildSelectionColumnLables = function() {
+		var that = this;
+		var oConfig = that.getConfiguration();
+		var oResourceBundle = that.getResourceBundle();
+		return new Button({
+			icon: "sap-icon://clear-all",
+			type: "Transparent",
+			enabled: typeof oConfig.values === "undefined" ? false : "{/_hasSelected}",
+			tooltip: oResourceBundle.getText("EDITOR_FIELD_OBJECT_TABLE_COLUMN_SELECTION_TOOLTIP_REMOVE"),
+			press: that.onUnSelectAll.bind(that)
+		});
+	};
+
 	ObjectField.prototype.buildTableColumns = function() {
 		var that = this;
 		var oConfig = that.getConfiguration();
 		var aColumns = [];
-		var oCardResourceBundle = that.getModel("i18n").getResourceBundle();
-		for (var n in oConfig.properties) {
-			var oProperty = oConfig.properties[n];
-			var sDefaultLabel = oProperty.label || n;
-			var sDefaultValue = "{" + n + "}";
-			if (oProperty.defaultValue) {
-				that._newObjectTemplate[n] = oProperty.defaultValue;
-			}
-			var oColumnSettings = {
-				"width": "7rem",
-				"label": sDefaultLabel
-			};
-			if (oProperty.column) {
-				oColumnSettings = merge(oColumnSettings, oProperty.column);
-			}
-			// change translate syntax {{KEY}} to {i18n>KEY}
-			if (oColumnSettings.label.match(REGEXP_TRANSLATABLE)) {
-				oColumnSettings.label = "{i18n>" + oColumnSettings.label.substring(2, oColumnSettings.label.length - 1);
-			}
-			oColumnSettings.tooltip = oColumnSettings.label;
-
-			var sCellType = oProperty.cell && oProperty.cell.type ? oProperty.cell.type : oProperty.type || "Text";
-			var oCellTemplate;
-			var oCellSettings;
-			var oCell = deepClone(oProperty.cell) || {};
-			delete oCell.type;
-			switch (sCellType) {
-				case "int":
-				case "number":
-					oCellSettings = {
-						text: sDefaultValue,
-						wrapping: false
-					};
-					oCellSettings = merge(oCellSettings, oCell);
-					oCellTemplate = new Text(oCellSettings);
-					break;
-				case "string":
-				case "Text":
-					oCellSettings = {
-						text: sDefaultValue,
-						wrapping: false
-					};
-					oCellSettings = merge(oCellSettings, oCell);
-					var oText = oCellSettings.text;
-					if (typeof oText === "string") {
-						if (oText.match(REGEXP_TRANSLATABLE)) {
-							// check the text property, if it match syntax {{KEY}}, translate it
-							oCellSettings.text = oCardResourceBundle.getText(oText.substring(2, oText.length - 2));
-						} else if (oText.startsWith("{i18n>") && oText.endsWith('}')) {
-							// check the text property, if it match syntax {i18n>KEY}, translate it
-							oCellSettings.text = oCardResourceBundle.getText(oText.substring(6, oText.length - 1));
-						} else if (oText.startsWith('{') && oText.endsWith('}')) {
-							oCellSettings.text = {
-								path: oText.substring(1, oText.length - 1),
-								formatter: function(oValue) {
-									if (!oValue) {
-										return undefined;
-									} else if (oValue.match(REGEXP_TRANSLATABLE)) {
-										// check the text property, if it match syntax {{KEY}}, translate it
-										return oCardResourceBundle.getText(oValue.substring(2, oValue.length - 2));
-									} else if (oValue.startsWith("{i18n>") && oValue.endsWith('}')) {
-										// check the text property, if it match syntax {i18n>KEY}, translate it
-										return oCardResourceBundle.getText(oValue.substring(6, oValue.length - 1));
-									}
-									return oValue;
+		var aKeys = Object.keys(oConfig.properties);
+		if (aKeys.length > 0) {
+			var oResourceBundle = that.getResourceBundle();
+			var oSelectionColumnLabels = that.buildSelectionColumnLables();
+			var oSelectionColumn = new Column({
+				width: "3.2rem",
+				hAlign: "Center",
+				multiLabels: [
+					oSelectionColumnLabels
+				],
+				template: new CheckBox({
+					selected: "{_dt/_selected}",
+					enabled: typeof oConfig.values === "undefined" ? false : true,
+					tooltip: {
+						path: '_dt/_selected',
+						formatter: function(bSelected) {
+							if (bSelected) {
+								if (oConfig.type === "object") {
+									return oResourceBundle.getText("EDITOR_FIELD_OBJECT_TABLE_COLUMN_SELECTION_CELL_TOOLTIP_UNSELECT");
+								} else {
+									return oResourceBundle.getText("EDITOR_FIELD_OBJECT_LIST_TABLE_COLUMN_SELECTION_CELL_TOOLTIP_REMOVE");
 								}
-							};
+							} else if (oConfig.type === "object") {
+								return oResourceBundle.getText("EDITOR_FIELD_OBJECT_TABLE_COLUMN_SELECTION_CELL_TOOLTIP_SELECT");
+							} else {
+								return oResourceBundle.getText("EDITOR_FIELD_OBJECT_LIST_TABLE_COLUMN_SELECTION_CELL_TOOLTIP_ADD");
+							}
 						}
-					}
-					oCellSettings.tooltip = oCell.tooltip || oCellSettings.text;
-					oCellTemplate = new Text(oCellSettings);
-					break;
-				case "Icon":
-					oCellSettings = {
-						src: sDefaultValue
-					};
-					oCellSettings = merge(oCellSettings, oCell);
-					oCellTemplate = new Icon(oCellSettings);
-					break;
-				case "boolean":
-					oCellSettings = {
-						selected: sDefaultValue,
-						enabled: false
-					};
-					oCellSettings = merge(oCellSettings, oCell);
-					oCellTemplate = new CheckBox(oCellSettings);
-					break;
-				case "Switch":
-					oCellSettings = {
-						state: sDefaultValue,
-						enabled: false
-					};
-					oCellSettings = merge(oCellSettings, oCell);
-					oCellTemplate = new Switch(oCellSettings);
-					break;
-				case "Link":
-					oCellSettings = {
-						text: sDefaultValue,
-						target: "_blank",
-						href: sDefaultValue
-					};
-					oCellSettings = merge(oCellSettings, oCell);
-					oCellTemplate = new Link(oCellSettings);
-					break;
-				default:
-					oCellTemplate = new Text({
-						text: sDefaultValue,
-						wrapping: false
-					});
-					break;
+					},
+					select: that.onSelectionChange.bind(that)
+				})
+			});
+			aColumns.push(oSelectionColumn);
+			for (var n in oConfig.properties) {
+				var oProperty = oConfig.properties[n];
+				var sDefaultLabel = oProperty.label || n;
+				var sDefaultValue = "{" + n + "}";
+				if (oProperty.defaultValue) {
+					that._newObjectTemplate[n] = oProperty.defaultValue;
+				}
+				var oColumnSettings = {
+					"width": "7rem",
+					"label": sDefaultLabel
+				};
+				if (oProperty.column) {
+					oColumnSettings = merge(oColumnSettings, oProperty.column);
+				}
+				// change translate syntax {{KEY}} to {i18n>KEY}
+				if (oColumnSettings.label.match(REGEXP_TRANSLATABLE)) {
+					oColumnSettings.label = "{i18n>" + oColumnSettings.label.substring(2, oColumnSettings.label.length - 1);
+				}
+				oColumnSettings.tooltip = oColumnSettings.label;
+
+				var sCellType = oProperty.cell && oProperty.cell.type ? oProperty.cell.type : oProperty.type || "Text";
+				var oCellTemplate;
+				var oCellSettings;
+				var oCell = deepClone(oProperty.cell) || {};
+				delete oCell.type;
+				switch (sCellType) {
+					case "int":
+					case "number":
+						oCellSettings = {
+							text: sDefaultValue,
+							wrapping: false
+						};
+						oCellSettings = merge(oCellSettings, oCell);
+						oCellTemplate = new Text(oCellSettings);
+						break;
+					case "string":
+					case "Text":
+						oCellSettings = {
+							text: sDefaultValue,
+							wrapping: false
+						};
+						oCellSettings = merge(oCellSettings, oCell);
+						var oText = oCellSettings.text;
+						var oTextSettingsModel = new JSONModel({
+							translatable: oProperty.translatable || false,
+							property: n
+						});
+						if (typeof oText === "string") {
+							var sTranslationKey = that.getTranslationKey(oText);
+							if (sTranslationKey) {
+								oCellSettings.text = oResourceBundle.getText(sTranslationKey);
+							} else if (oText.startsWith('{') && oText.endsWith('}')) {
+								oCellSettings.text = {
+									path: oText.substring(1, oText.length - 1),
+									formatter: function(oValue) {
+										var oBindingContext = this.getBindingContext(),
+											oTranslationValue,
+											oSettings = this.getModel("settings").getData(),
+											sTranslationKeyInCellValue = that.getTranslationKey(oValue);
+										if (oSettings.translatable || sTranslationKeyInCellValue) {
+											if (oBindingContext && oBindingContext.getObject() && oBindingContext.getObject()._dt) {
+												oTranslationValue = that.getTranslationValueInTexts(oResourceBundle.sLocale.replaceAll('_', '-'), oBindingContext.getObject()._dt._uuid, oSettings.property);
+												if (oTranslationValue) {
+													return oTranslationValue;
+												}
+											}
+											if (sTranslationKeyInCellValue) {
+												oValue = oResourceBundle.getText(sTranslationKeyInCellValue);
+												return oValue;
+											}
+										}
+										return oValue;
+									}
+								};
+							}
+						}
+						oCellSettings.tooltip = oCell.tooltip || oCellSettings.text;
+						oCellTemplate = new Text(oCellSettings);
+						oCellTemplate.setModel(oTextSettingsModel,"settings");
+						break;
+					case "Icon":
+						oCellSettings = {
+							src: sDefaultValue
+						};
+						oCellSettings = merge(oCellSettings, oCell);
+						oCellTemplate = new Icon(oCellSettings);
+						break;
+					case "boolean":
+						oCellSettings = {
+							selected: sDefaultValue,
+							enabled: false
+						};
+						oCellSettings = merge(oCellSettings, oCell);
+						oCellTemplate = new CheckBox(oCellSettings);
+						break;
+					case "Switch":
+						oCellSettings = {
+							state: sDefaultValue,
+							enabled: false
+						};
+						oCellSettings = merge(oCellSettings, oCell);
+						oCellTemplate = new Switch(oCellSettings);
+						break;
+					case "Link":
+						oCellSettings = {
+							text: sDefaultValue,
+							target: "_blank",
+							href: sDefaultValue
+						};
+						oCellSettings = merge(oCellSettings, oCell);
+						oCellTemplate = new Link(oCellSettings);
+						break;
+					default:
+						oCellTemplate = new Text({
+							text: sDefaultValue,
+							wrapping: false
+						});
+						break;
+				}
+				oColumnSettings.template = oCellTemplate;
+				var oColumn = new Column(oColumnSettings);
+				aColumns.push(oColumn);
 			}
-			oColumnSettings.template = oCellTemplate;
-			var oColumn = new Column(oColumnSettings);
-			aColumns.push(oColumn);
 		}
-		var oActionColumn = that.createActionColumn();
-		aColumns.push(oActionColumn);
 		return aColumns;
 	};
 
-	ObjectField.prototype.checkHasFilter = function(oConfig) {
+	ObjectField.prototype.checkHasFilterDefined = function(oConfig) {
 		var bHasFilterDefined = true;
 		if (oConfig._propertiesParsedFromValue === true) {
 			bHasFilterDefined = false;
@@ -430,9 +521,9 @@ sap.ui.define([
 		var that = this;
 		var oResourceBundle = that.getResourceBundle();
 		// check if has filterProperty defined in each column of config.properties
-		var bHasFilterDefined = that.checkHasFilter(oConfig);
+		var bHasFilterDefined = that.checkHasFilterDefined(oConfig);
 		var bAddButtonVisible = oConfig.enabled !== false;
-		var sAddButtonTooltip = oConfig.addButtonTooltip || oResourceBundle.getText("EDITOR_FIELD_OBJECT_TABLE_BUTTON_ADD_TOOLTIP");
+		var sAddButtonTooltip = oConfig.addButtonText || oResourceBundle.getText("EDITOR_FIELD_OBJECT_TABLE_BUTTON_ADD_TOOLTIP");
 		if (bAddButtonVisible && oConfig.values) {
 			bAddButtonVisible = oConfig.values.allowAdd === true;
 		}
@@ -443,130 +534,126 @@ sap.ui.define([
 					icon: "sap-icon://add",
 					visible: bAddButtonVisible,
 					tooltip: sAddButtonTooltip,
-					press: that.createNewObject.bind(that)
+					press: that.addNewObject.bind(that)
+				}),
+				new Button({
+					icon: "sap-icon://edit",
+					tooltip: oResourceBundle.getText("EDITOR_FIELD_OBJECT_TABLE_BUTTON_EDIT_TOOLTIP"),
+					enabled: "{= !!${/_hasTableSelected}}",
+					press: that.onEditOrViewDetail.bind(that)
+				}),
+				new Button({
+					icon: "sap-icon://delete",
+					tooltip: oResourceBundle.getText("EDITOR_FIELD_OBJECT_DELETE"),
+					enabled: "{= !!${/_canDelete}}",
+					press: that.onDelete.bind(that)
+				}),
+				new Icon({
+					src: "sap-icon://vertical-grip"
 				}),
 				new Button({
 					icon: "sap-icon://clear-filter",
 					visible: bHasFilterDefined,
+					enabled: "{= !!${/_hasFilter}}",
 					tooltip: oResourceBundle.getText("EDITOR_FIELD_OBJECT_TABLE_BUTTON_CLEAR_ALL_FILTERS_TOOLTIP"),
 					press: that.clearAllFilters.bind(that)
+				}),
+				new Button({
+					icon: "sap-icon://multiselect-all",
+					enabled: "{= !${/_hasTableAllSelected}}",
+					tooltip: oResourceBundle.getText("EDITOR_FIELD_OBJECT_TABLE_BUTTON_SELECT_ALL_SELETIONS_TOOLTIP"),
+					press: that.selectAllTableSelections.bind(that)
+				}),
+				new Button({
+					icon: "sap-icon://multiselect-none",
+					enabled: "{= !!${/_hasTableSelected}}",
+					tooltip: oResourceBundle.getText("EDITOR_FIELD_OBJECT_TABLE_BUTTON_CLEAR_ALL_SELETIONS_TOOLTIP"),
+					press: that.clearAllTableSelections.bind(that)
 				})
 			]
 		});
 	};
 
-	ObjectField.prototype.onDelete = function(oEvent) {
+	ObjectField.prototype.onUnSelectAll = function(oEvent) {
 		var that = this;
-		var oControl = oEvent.getSource();
-		var oRow = oControl.getParent().getParent();
-		var oTable = oRow.getParent();
-		var iRowIndex = oRow.getIndex();
-
-		// get the real index via path since the rows may be filtered
-		var oRowContexts = oTable.getBinding("rows").getContexts();
-		var sDeletedObjectPath = oRowContexts[iRowIndex].getPath();
-		var iRealIndex = sDeletedObjectPath.substring(sDeletedObjectPath.lastIndexOf("/") + 1);
-
-		var oParameter;
-		var bHasBeforeValue = that.checkHasValue();
-		oParameter = {
-			selectedIndex: oTable.getSelectedIndex(),
-			selectedIndices: oTable.getSelectedIndices(),
-			rowIndex: iRowIndex,
-			realIndex: iRealIndex
-		};
-
-		// delete object in value model
+		var oTable = that.getAggregation("_field");
+		var sPath = oTable.getBindingContext().getPath();
 		var oModel = oTable.getModel();
-		var sPath = oTable.getBinding("rows").getPath();
 		var oData = oModel.getProperty(sPath);
-		oData.splice(iRealIndex, 1);
+		oData.forEach(function (oItem) {
+			oItem._dt = oItem._dt || {};
+			oItem._dt._selected = false;
+		});
+		oModel.setProperty("/_hasSelected", false);
 		oModel.checkUpdate(true);
-
-		// restore the selections since the selections are lost, BCP: 2280048930, JIRA: CPOUIFTEAMB-252
-		if (bHasBeforeValue) {
-			that.applyBeforeValueAndSelections("delete", oParameter);
-		}
+		that.setValue(undefined);
 	};
 
 	ObjectField.prototype.onEditOrViewDetail = function(oEvent) {
 		var that = this;
-		var oControl = oEvent.getSource();
-		var oItem = oControl.getBindingContext().getObject();
-		that.openObjectDetailsPopover(oItem, oControl, oItem._editable !== false ? "update" : "view");
+		var oTable = that.getAggregation("_field");
+
+		var iSelectIndex = oTable.getSelectedIndex();
+		var oRowContexts = oTable.getBinding("rows").getContexts();
+		var oItem = oRowContexts[iSelectIndex].getObject();
+		var iFirstIndex = oTable.getFirstVisibleRow();
+		var oRow = oTable.getRows()[iSelectIndex - iFirstIndex];
+		var oCell1 = oRow.getCells()[0];
+		that.openObjectDetailsPopover(oItem, oCell1, !oItem._dt || oItem._dt._editable !== false ? "update" : "view");
 	};
 
 	ObjectField.prototype.onFilter = function(oEvent) {
 		var that = this;
-		var oControl = oEvent.getSource();
-		// restore the selections since the selections are lost, BCP: 2280048930, JIRA: CPOUIFTEAMB-252
-		if (that.checkHasValue()) {
-			var oParameter = {
-				selectedIndex: oControl.getSelectedIndex(),
-				selectedIndices: oControl.getSelectedIndices(),
-				column: oEvent.getParameter("column")
-			};
-			that.applyBeforeValueAndSelections("filter", oParameter);
+		var oTable = that.getAggregation("_field");
+		oTable.detachEvent("rowsUpdated", that.updateTable, that);
+		oTable.attachEventOnce("rowsUpdated", that.updateTable, that);
+	};
+
+	ObjectField.prototype.updateTable = function(oEvent) {
+		var that = this;
+		that.updateSelectionColumn();
+		that.updateToolbar();
+	};
+
+	ObjectField.prototype.updateSelectionColumn = function() {
+		var that = this;
+		var oTable = that.getAggregation("_field");
+		var oRowContexts = oTable.getBinding("rows").getContexts();
+		var bHasSelected = false;
+		for (var i = 0; i < oRowContexts.length; i++) {
+			var oObject = oRowContexts[i].getObject();
+			if (oObject._dt && oObject._dt._selected) {
+				bHasSelected = true;
+				break;
+			}
 		}
+		oTable.getModel().setProperty("/_hasSelected", bHasSelected);
 	};
 
-	ObjectField.prototype.createActionColumn = function() {
+	ObjectField.prototype.updateToolbar = function() {
 		var that = this;
-		var oConfig = that.getConfiguration();
-		var oResourceBundle = that.getResourceBundle();
-		return new Column({
-			width: "5rem",
-			hAlign: "Center",
-			label: new Label({
-				text: "Actions",
-				tooltip: "Actions"
-			}),
-			template: new HBox({
-				items: [
-					new Button({
-						type: "Transparent",
-						icon: {
-							path: '_editable',
-							formatter: function(bEditable) {
-								if (bEditable === false) {
-									return "sap-icon://display";
-								} else {
-									return "sap-icon://edit";
-								}
-							}
-						},
-						tooltip: {
-							path: '_editable',
-							formatter: function(bEditable) {
-								if (bEditable === false) {
-									return oResourceBundle.getText("EDITOR_FIELD_OBJECT_TABLE_BUTTON_DISPLAY_TOOLTIP");
-								} else {
-									return oResourceBundle.getText("EDITOR_FIELD_OBJECT_TABLE_BUTTON_EDIT_TOOLTIP");
-								}
-							}
-						},
-						press: that.onEditOrViewDetail.bind(that)
-					}),
-					new Button({
-						type: "Transparent",
-						icon: "sap-icon://delete",
-						visible: oConfig.editable === false ? false : "{= ${_editable} !== false}",
-						tooltip: oResourceBundle.getText("EDITOR_FIELD_OBJECT_DELETE"),
-						press: that.onDelete.bind(that)
-					})
-				]
-			})
-		});
+		var oTable = that.getAggregation("_field");
+		var aColumns = oTable.getColumns();
+		var bHasFilter = false;
+		for (var i = 0; i < aColumns.length; i++) {
+			var oMenu = aColumns[i].getMenu();
+			var oMenuItems = oMenu.getItems();
+			if (oMenuItems.length > 0) {
+				var oFilter = oMenuItems[0];
+				var sValue = oFilter.getValue();
+				if (sValue && sValue !== "") {
+					bHasFilter = true;
+					break;
+				}
+			}
+		}
+		oTable.getModel().setProperty("/_hasFilter", bHasFilter);
 	};
 
 	ObjectField.prototype.columnFactory = function(sId, oContext) {
-		var that = this;
 		var sPath = oContext.getPath();
 		var sName = sPath.substring(oContext.getPath().lastIndexOf("/") + 1);
 		var sType = oContext.getProperty("$Type");
-		if (sType === "Actions") {
-			return that.createActionColumn();
-		}
 		var iLen = oContext.getProperty("$MaxLength");
 		var sColumnWidth = "7rem";
 
@@ -589,31 +676,84 @@ sap.ui.define([
 		});
 	};
 
+	ObjectField.prototype.onTableSelectionChange = function (oEvent) {
+		var that = this;
+		var oTable = that.getAggregation("_field");
+		var oModel = oTable.getModel();
+		var aSelectedIndices = oTable.getSelectedIndices();
+		if (aSelectedIndices.length > 0) {
+			oModel.setProperty("/_hasTableSelected", true);
+		} else {
+			oModel.setProperty("/_hasTableSelected", false);
+			oModel.setProperty("/_canDelete", false);
+			return;
+		}
+		if (aSelectedIndices.length === oTable.getBinding("rows").getContexts().length) {
+			oModel.setProperty("/_hasTableAllSelected", true);
+		} else {
+			oModel.setProperty("/_hasTableAllSelected", false);
+		}
+		var aSelectedPaths = [];
+		var aRowContexts = oTable.getBinding("rows").getContexts();
+		aSelectedIndices.forEach(function (iSelectIndex) {
+			var oObject = aRowContexts[iSelectIndex].getObject();
+			if (oObject._dt && oObject._dt._editable !== false) {
+				var sPath = aRowContexts[iSelectIndex].getPath();
+				aSelectedPaths.push(sPath);
+			}
+		});
+		if (aSelectedPaths.length === 0) {
+			oModel.setProperty("/_canDelete", false);
+		} else {
+			oModel.setProperty("/_canDelete", true);
+		}
+	};
+
+	ObjectField.prototype.selectAllTableSelections = function (oEvent) {
+		var that = this;
+		var oTable = that.getAggregation("_field");
+		oTable.selectAll();
+		oTable.getModel().setProperty("/_hasTableAllSelected", true);
+	};
+
+	ObjectField.prototype.clearAllTableSelections = function (oEvent) {
+		var that = this;
+		var oTable = that.getAggregation("_field");
+		var oModel = oTable.getModel();
+		oTable.clearSelection();
+		oModel.setProperty("/_hasTableSelected", false);
+		oModel.setProperty("/_canDelete", false);
+		oModel.setProperty("/_hasTableAllSelected", false);
+	};
+
 	ObjectField.prototype.onSelectionChange = function (oEvent) {
 		var that = this;
 		var oControl = oEvent.getSource();
-		var bUserInteraction = oEvent.getParameter("userInteraction") || false;
-		// only update data models if is user interaction
-		if (bUserInteraction) {
-			var oObject,
-				oContext;
-			var iSelectedIndex = oControl.getSelectedIndex();
-			var aSelectedIndices = oControl.getSelectedIndices();
-			if (aSelectedIndices.length >= 1) {
-				oControl.setSelectedIndex(iSelectedIndex);
-				oContext = oControl.getContextByIndex(iSelectedIndex);
-				oObject = oContext.getObject();
-				oControl._sPathOfFilteredOut = null;
-			} else if (oControl._sPathOfFilteredOut) {
-				oObject = oControl.getModel().getProperty(oControl._sPathOfFilteredOut);
-			}
-			that._setCurrentProperty("value", oObject);
+		var bSelected = oEvent.getParameter("selected");
+		var oTable = that.getAggregation("_field");
+		var sPath = oTable.getBindingContext().getPath();
+		var oModel = oTable.getModel();
+		if (bSelected) {
+			var oData = oModel.getProperty(sPath);
+			oData.forEach(function (oItem) {
+				oItem._dt = oItem._dt || {};
+				oItem._dt._selected = false;
+			});
+			var oObject = oControl.getBindingContext().getObject();
+			oObject._dt._selected = true;
+			var oClonedObject = deepClone(oObject);
+			oModel.setProperty("/_hasSelected", true);
+			that.setValue(oClonedObject);
+		} else {
+			oModel.setProperty("/_hasSelected", false);
+			that.setValue(undefined);
 		}
 	};
 
-	ObjectField.prototype.createNewObject = function (oEvent) {
+	ObjectField.prototype.addNewObject = function (oEvent) {
 		var that = this;
 		var oControl = oEvent.getSource();
+		that._newObjectTemplate._dt._uuid = Utils.generateUuidV4();
 		that.openObjectDetailsPopover(that._newObjectTemplate, oControl, "add");
 	};
 
@@ -621,32 +761,53 @@ sap.ui.define([
 		var that = this;
 		var oConfig = that.getConfiguration();
 		var oTable = that.getAggregation("_field");
+		var oModel = oTable.getModel();
 		if (oConfig.value && (typeof oConfig.value === "object") && !deepEqual(oConfig.value, {})) {
-			var oValue;
+			var oValue = deepClone(oConfig.value, 500),
+				sPath = oTable.getBinding("rows").getPath();
 			if (Array.isArray(tResult) && tResult.length > 0) {
-				if (oConfig.value._editable === false) {
-					var iSelectedIndex = -1;
-					for (var i = 0; i < tResult.length; i++) {
-						oValue = tResult[i];
-						if (deepEqual(oValue, oConfig.value)) {
-							iSelectedIndex = i;
-							break;
+				if (oValue._dt && oValue._dt._editable === false) {
+					var sUUID = oValue._dt._uuid || Utils.generateUuidV4();
+					delete oValue._dt._uuid;
+					tResult.forEach(function(oResult) {
+						// find the selected request result, change the uuid by the one of the value
+						if (deepEqual(oResult, oValue)) {
+							oResult._dt._selected = true;
+							oResult._dt._uuid = sUUID;
+						} else {
+							oResult._dt._uuid = Utils.generateUuidV4();
 						}
-					}
-					oTable.setSelectedIndex(iSelectedIndex);
+					});
 				} else {
-					tResult.unshift(oConfig.value);
-					oTable.getModel().checkUpdate();
-					oTable.setSelectedIndex(0);
+					// add uuid for each request result
+					tResult.forEach(function(oResult) {
+						oResult._dt._uuid = Utils.generateUuidV4();
+					});
+					oValue._dt = oValue._dt || {};
+					oValue._dt._selected = true;
+					// add uuid for the value if not exist
+					oValue._dt._uuid = oValue._dt._uuid || Utils.generateUuidV4();
+					tResult.unshift(oValue);
 				}
 			} else {
-				oValue = deepClone(oConfig.value, 500);
+				oValue._dt = oValue._dt || {};
+				oValue._dt._selected = true;
+				// add uuid for the value if not exist
+				oValue._dt._uuid = oValue._dt._uuid || Utils.generateUuidV4();
 				tResult = [oValue];
-				oTable.getModel().checkUpdate();
-				oTable.setSelectedIndex(0);
 			}
+			oModel.setProperty("/_hasSelected", true);
+			oModel.setProperty(sPath, tResult);
+		} else {
+			// add uuid for each request result
+			if (Array.isArray(tResult) && tResult.length > 0) {
+				tResult.forEach(function(oResult) {
+					oResult._dt._uuid = Utils.generateUuidV4();
+				});
+			}
+			oModel.setProperty("/_hasSelected", false);
 		}
-		return tResult;
+		oModel.checkUpdate();
 	};
 
 	ObjectField.prototype.onChangeOfTextArea = function (oEvent) {
@@ -695,10 +856,10 @@ sap.ui.define([
 		}
 	};
 
-	ObjectField.prototype.createFormContents = function (fnChange, sPathPrefix, bIsInPopover) {
+	ObjectField.prototype.createFormContents = function (fnChange, sPathPrefix, bIsInPopover, fnNavToTranslation) {
 		var that = this;
 		var oConfig = that.getConfiguration();
-		var aContentList = that.createPropertyContents(fnChange, sPathPrefix);
+		var aContentList = that.createPropertyContents(fnChange, sPathPrefix, fnNavToTranslation);
 		aContentList.push(new Label({
 			visible: false
 		}).addStyleClass("sapFormLabel"));
@@ -721,17 +882,17 @@ sap.ui.define([
 					return vValue;
 				}
 			},
-			editable: oConfig.editable === false ? false : "{= ${" + sPathPrefix + "_editable} !== false}",
+			editable: oConfig.editable === false ? false : "{= ${" + sPathPrefix + "_dt/_editable} !== false}",
 			width: "100%",
 			placeholder: "{config/placeholder}",
 			visible: "{= ${/editMode} === 'Json'}",
 			change: bIsInPopover === true ? this.onChangeOfTextAreaInPopover.bind(that) : this.onChangeOfTextArea.bind(that),
-			rows: bIsInPopover === true ? 15 : 7
+			rows: bIsInPopover === true ? 11 : 7
 		}));
 		return aContentList;
 	};
 
-	ObjectField.prototype.createPropertyContents = function (fnChange, sPathPrefix) {
+	ObjectField.prototype.createPropertyContents = function (fnChange, sPathPrefix, fnNavToTranslation) {
 		var that = this;
 		var oConfig = that.getConfiguration();
 		var aPropertyContentList = [];
@@ -760,7 +921,7 @@ sap.ui.define([
 						oProperties[m] = {
 							type: "number"
 						};
-					} else if (sType !== "Actions") {
+					} else {
 						oProperties[m] = {
 							type: "string"
 						};
@@ -787,13 +948,22 @@ sap.ui.define([
 			});
 			aPropertyContentList.push(oLable);
 			var oValueControl;
+			var oPropertySettings = deepClone(oProperty, 500);
+			delete oPropertySettings.type;
+			delete oPropertySettings.label;
+			delete oPropertySettings.translatable;
+			delete oPropertySettings.defaultValue;
+			delete oPropertySettings.formatter;
+			delete oPropertySettings.column;
+			delete oPropertySettings.cell;
+			var oSettings;
 			switch (oProperty.type) {
 				case "boolean":
 					if (oProperty.cell && oProperty.cell.type === "Switch") {
-						var oSettings = {
+						oSettings = {
 							state: "{" + sPathPrefix + n + "}",
 							visible: "{= ${/editMode} === 'Properties'}",
-							enabled: oConfig.editable === false ? false : "{= ${" + sPathPrefix + "_editable} !== false}",
+							enabled: oConfig.editable === false ? false : "{= ${" + sPathPrefix + "_dt/_editable} !== false}",
 							change: fnChange
 						};
 						if (oProperty.cell.customTextOn) {
@@ -802,45 +972,52 @@ sap.ui.define([
 						if (oProperty.cell.customTextOff) {
 							oSettings.customTextOff = oProperty.cell.customTextOff;
 						}
+						oSettings = merge(oSettings, oPropertySettings);
 						oValueControl = new Switch(oSettings);
 					} else {
-						oValueControl = new CheckBox({
+						oSettings = {
 							selected: "{" + sPathPrefix + n + "}",
 							visible: "{= ${/editMode} === 'Properties'}",
-							enabled: oConfig.editable === false ? false : "{= ${" + sPathPrefix + "_editable} !== false}",
+							enabled: oConfig.editable === false ? false : "{= ${" + sPathPrefix + "_dt/_editable} !== false}",
 							select: fnChange
-						});
+						};
+						oSettings = merge(oSettings, oPropertySettings);
+						oValueControl = new CheckBox(oSettings);
 					}
 					break;
 				case "int":
 				case "integer":
-					oValueControl = new Input({
+					oSettings = {
 						value: {
 							path: sPathPrefix + n,
 							type: "sap.ui.model.type.Integer",
 							formatOptions: oProperty.formatter
 						},
 						visible: "{= ${/editMode} === 'Properties'}",
-						editable: oConfig.editable === false ? false : "{= ${" + sPathPrefix + "_editable} !== false}",
+						editable: oConfig.editable === false ? false : "{= ${" + sPathPrefix + "_dt/_editable} !== false}",
 						type: "Number",
 						change: fnChange
-					});
+					};
+					oSettings = merge(oSettings, oPropertySettings);
+					oValueControl = new Input(oSettings);
 					break;
 				case "number":
-					oValueControl = new Input({
+					oSettings = {
 						value: {
 							path: sPathPrefix + n,
 							type: "sap.ui.model.type.Float",
 							formatOptions: oProperty.formatter
 						},
 						visible: "{= ${/editMode} === 'Properties'}",
-						editable: oConfig.editable === false ? false : "{= ${" + sPathPrefix + "_editable} !== false}",
+						editable: oConfig.editable === false ? false : "{= ${" + sPathPrefix + "_dt/_editable} !== false}",
 						type: "Number",
 						change: fnChange
-					});
+					};
+					oSettings = merge(oSettings, oPropertySettings);
+					oValueControl = new Input(oSettings);
 					break;
 				case "object":
-					oValueControl = new TextArea({
+					oSettings = {
 						value: {
 							path: sPathPrefix + n,
 							formatter: function(vValue) {
@@ -857,18 +1034,71 @@ sap.ui.define([
 							}
 						},
 						visible: "{= ${/editMode} === 'Properties'}",
-						editable: oConfig.editable === false ? false : "{= ${" + sPathPrefix + "_editable} !== false}",
+						editable: oConfig.editable === false ? false : "{= ${" + sPathPrefix + "_dt/_editable} !== false}",
 						change: fnChange,
 						rows: 3
-					});
+					};
+					oSettings = merge(oSettings, oPropertySettings);
+					oValueControl = new TextArea(oSettings);
 					break;
 				default:
-					oValueControl = new Input({
+					var oTextSettingsModel = new JSONModel({
+						translatable: oProperty.translatable || false,
+						uuidPath: sPathPrefix + "_dt/_uuid",
+						property: n
+					});
+					oSettings = {
 						value: "{" + sPathPrefix + n + "}",
 						visible: "{= ${/editMode} === 'Properties'}",
-						editable: oConfig.editable === false ? false : "{= ${" + sPathPrefix + "_editable} !== false}",
-						change: fnChange
-					});
+						editable: oConfig.editable === false ? false : "{= ${" + sPathPrefix + "_dt/_editable} !== false}",
+						change: function(oEvent) {
+							var oControl = oEvent.getSource();
+							var sValue = oEvent.getParameter("value");
+							// change the translation format {{KEY}} to {i18n>KEY} since manifest will translate it, but we don't want
+							// more info in JIRA DIGITALWORKPLACE-3974
+							if (sValue && sValue.match(REGEXP_TRANSLATABLE)) {
+								var sKey = sValue.substring(2, sValue.length - 2);
+								sValue = "{i18n>" + sKey + "}";
+								oControl.setValue(sValue);
+								oControl.fireChange();
+							} else if (fnChange) {
+								fnChange(oEvent);
+							}
+						}
+					};
+					oSettings = merge(oSettings, oPropertySettings);
+					// show the translation help icon of the input
+					if (fnNavToTranslation) {
+						oSettings.valueHelpIconSrc = "sap-icon://translate";
+						oSettings.valueHelpRequest = fnNavToTranslation.bind(that, n);
+						if (oProperty.translatable) {
+							oSettings.showValueHelp = true;
+						} else {
+							oSettings.showValueHelp = {
+								path: sPathPrefix + n,
+								formatter: function(oValue) {
+									var oSettings = this.getModel("settings").getData();
+									var sUUID = this.getModel().getProperty(oSettings.uuidPath);
+									var sConfigName = "translatable";
+									if (that.getTranslationKey(oValue)) {
+										if (!this.getShowValueHelp() && that.getObjectPropertyConfigValueInDesigntime(sUUID, oSettings.property, sConfigName) === false) {
+											that.setObjectPropertyConfigValueInDesigntime(sUUID, oSettings.property, sConfigName, true);
+										}
+										return true;
+									}
+									if (this.getShowValueHelp()) {
+										// clean the translation values and updated language since the translation feature is off
+										that.deleteTranslationValueInTexts(undefined, sUUID, oSettings.property);
+										that.setObjectPropertyConfigValueInDesigntime(sUUID, oSettings.property, sConfigName, false);
+										that._oUpdatedTranslations = {};
+									}
+									return false;
+								}
+							};
+						}
+					}
+					oValueControl = new Input(oSettings);
+					oValueControl.setModel(oTextSettingsModel,"settings");
 			}
 			aPropertyContentList.push(oValueControl);
 		}
@@ -879,7 +1109,7 @@ sap.ui.define([
 		var that = this;
 		var oValueModel;
 		if (!bIsInDetailsPopover) {
-			that._setCurrentProperty("value", oValue);
+			that.setValue(oValue);
 			oValueModel = that.getAggregation("_field").getModel();
 			if (oValueModel) {
 				oValue = deepClone(oValue, 500);
@@ -910,7 +1140,7 @@ sap.ui.define([
 			oModel.checkUpdate(true);
 			var oValue = oModel.getProperty("/value");
 			oValue = deepClone(oValue, 500);
-			that._setCurrentProperty("value", oValue);
+			that.setValue(oValue);
 		};
 		var aPropertyContents = that.createPropertyContents(fnChange, "/value/");
 		aPropertyContents = aPropertyContents.concat(aContents);
@@ -919,12 +1149,58 @@ sap.ui.define([
 		});
 	};
 
+	// get origin values in i18n files
+	ObjectField.prototype.getOriginTranslatedValues = function(sKey) {
+		var aOriginTranslatedValues = [];
+		var aEditorResourceBundles = EditorResourceBundles.getInstance();
+		for (var p in aEditorResourceBundles) {
+			var oResourceBundleTemp = aEditorResourceBundles[p];
+			var sTranslatedValue = "";
+			var sOriginValue = "";
+			if (sKey && oResourceBundleTemp) {
+				var sText = oResourceBundleTemp.resourceBundle && oResourceBundleTemp.resourceBundle.getText(sKey);
+				sTranslatedValue = sText;
+				sOriginValue = sText;
+			} else {
+				// if no translation key which means item defined as string value directly.
+				// set the sTranslatedValue and sOriginValue for each language with item manifest value or default value.
+				sTranslatedValue = "";
+				sOriginValue = "";
+			}
+			var oLanguage = {
+				"key": p,
+				"desription": oResourceBundleTemp.language,
+				"value": sTranslatedValue,
+				"originValue": sOriginValue,
+				"editable": true
+			};
+			aOriginTranslatedValues.push(oLanguage);
+		}
+		return aOriginTranslatedValues;
+	};
+
+	// build origin translation values if translation type is "property"
+	ObjectField.prototype.buildPropertyTranslationValues = function(sKey) {
+		var aOriginTranslatedValues = [];
+		var aEditorResourceBundles = EditorResourceBundles.getInstance();
+		for (var p in aEditorResourceBundles) {
+			aOriginTranslatedValues.push({
+				"key": p,
+				"desription": aEditorResourceBundles[p].language,
+				"value": sKey,
+				"originValue": sKey,
+				"editable": true
+			});
+		}
+		return aOriginTranslatedValues;
+	};
+
 	ObjectField.prototype.openObjectDetailsPopover = function (oItem, oControl, sMode) {
 		var that = this;
-		var oField = that.getAggregation("_field");
 		var oResourceBundle = that.getResourceBundle();
 		var oItemCloned = deepClone(oItem, 500);
 		var oModel;
+		var sPlacement = sMode === "add" && that._previewPosition !== "right" ? "Left" : "Right";
 		if (!that._oObjectDetailsPopover) {
 			var oAddButton = new Button({
 				text: oResourceBundle.getText("EDITOR_FIELD_OBJECT_DETAILS_POPOVER_BUTTON_ADD"),
@@ -932,13 +1208,19 @@ sap.ui.define([
 				enabled: {
 					path: '/value',
 					formatter: function(vValue) {
-						if (!vValue || vValue === "" || deepEqual(vValue, {})) {
+						if (typeof vValue !== "object" || deepEqual(vValue, {})) {
 							return false;
+						} else {
+							var oValue = deepClone(vValue);
+							delete oValue._dt;
+							if (deepEqual(oValue, {})) {
+								return false;
+							}
 						}
 						return true;
 					}
 				},
-				press: that.onCreate.bind(that)
+				press: that.onAdd.bind(that)
 			});
 			var oUpdateButton = new Button({
 				text: oResourceBundle.getText("EDITOR_FIELD_OBJECT_DETAILS_POPOVER_BUTTON_UPDATE"),
@@ -958,6 +1240,11 @@ sap.ui.define([
 				text: oResourceBundle.getText("EDITOR_FIELD_OBJECT_DETAILS_POPOVER_BUTTON_CANCEL"),
 				visible: sMode !== "view",
 				press: function () {
+					if (sMode === "add") {
+						// clean the translations for the cancelled new object
+						var oNewObject = that._oObjectDetailsPopover.getModel().getProperty("/value");
+						that.deleteTranslationValueInTexts(undefined, oNewObject._dt._uuid);
+					}
 					that._oObjectDetailsPopover.close();
 				}
 			});
@@ -968,27 +1255,6 @@ sap.ui.define([
 					that._oObjectDetailsPopover.close();
 				}
 			});
-			oModel = new JSONModel({
-				"value": oItemCloned,
-				"editMode": "Properties"
-			});
-			var aObjectPropertyFormContents;
-			var fnChangeWithDataSave = function(oEvent) {
-				var oModel = that._oObjectDetailsPopover.getModel();
-				oModel.checkUpdate(true);
-				var oNewObject = oModel.getProperty("/value");
-				if (oNewObject && oNewObject !== "" && typeof oNewObject === "object" && !deepEqual(oNewObject, {})) {
-					oAddButton.setEnabled(true);
-				} else {
-					oAddButton.setEnabled(false);
-				}
-			};
-			var fnChange = function() {};
-			if (oItem._editable !== false) {
-				aObjectPropertyFormContents = that.createFormContents(fnChangeWithDataSave, "/value/", true);
-			} else {
-				aObjectPropertyFormContents = that.createFormContents(fnChange, "/value/", true);
-			}
 			var oEditModeButton = new Button({
 				icon: {
 					path: '/editMode',
@@ -1021,6 +1287,50 @@ sap.ui.define([
 					}
 				}
 			});
+			var aObjectPropertyFormContents;
+			that._oNavContainer = new NavContainer();
+			that._oObjectDetailsPage = new Page({
+				title: oResourceBundle.getText("EDITOR_FIELD_OBJECT_DETAILS_POPOVER_TITLE"),
+				headerContent: oEditModeButton,
+				footer: new OverflowToolbar({
+					content: [
+						new ToolbarSpacer(),
+						oAddButton,
+						oUpdateButton,
+						oCancelButton,
+						oCloseButton
+					]
+				})
+			});
+			var fnNavBack = function (oEvent) {
+				that._oNavContainer.back();
+				that._oObjectDetailsPage.focus();
+			};
+			var oList = that.buildTranslationsList();
+			var oTranslationsFooter = that.buildTranslationsFooter(oList, false);
+			that._oTranslationListPage = new Page({
+				title: oResourceBundle.getText("EDITOR_FIELD_OBJECT_TRANSLATION_LIST_TITLE", "{languages>/property}"),
+				showNavButton: true,
+				navButtonPress: fnNavBack,
+				content: oList,
+				footer: oTranslationsFooter
+			});
+			var fnChangeWithDataSave = function(oEvent) {
+				var oModel = that._oObjectDetailsPopover.getModel();
+				oModel.checkUpdate(true);
+				var oNewObject = oModel.getProperty("/value");
+				if (oNewObject && oNewObject !== "" && typeof oNewObject === "object" && !deepEqual(oNewObject, {})) {
+					oAddButton.setEnabled(true);
+				} else {
+					oAddButton.setEnabled(false);
+				}
+			};
+			var fnChange = function() {};
+			if (oItem._dt && oItem._dt._editable === false) {
+				aObjectPropertyFormContents = that.createFormContents(fnChange, "/value/", true, that.navToTranslationPage);
+			} else {
+				aObjectPropertyFormContents = that.createFormContents(fnChangeWithDataSave, "/value/", true, that.navToTranslationPage);
+			}
 			var oForm = new SimpleForm({
 				layout: "ResponsiveGridLayout",
 				labelSpanXL: 4,
@@ -1037,31 +1347,24 @@ sap.ui.define([
 				columnsM: 1,
 				content: aObjectPropertyFormContents
 			});
-			var sPlacement = oField._previewPostion === "right" ? "Right" : "Left";
+			that._oObjectDetailsPage.addContent(oForm);
+			that._oNavContainer.addPage(that._oObjectDetailsPage);
+			/*
+			_oTranslationListPage.addContent();
+			*/
+			that._oNavContainer.addPage(that._oTranslationListPage);
 			that._oObjectDetailsPopover = new Popover({
 				placement: sPlacement,
+				showHeader: false,
 				contentWidth: "300px",
 				contentHeight: "345px",
-				content: oForm,
-				customHeader: new OverflowToolbar({
-					content: [
-						new Title({
-							text: oResourceBundle.getText("EDITOR_FIELD_OBJECT_DETAILS_POPOVER_TITLE")
-						}),
-						new ToolbarSpacer(),
-						oEditModeButton
-					]
-				}),
-				footer: new OverflowToolbar({
-					content: [
-						new ToolbarSpacer(),
-						oAddButton,
-						oUpdateButton,
-						oCancelButton,
-						oCloseButton
-					]
-				})
+				modal: true,
+				content: that._oNavContainer
 			}).addStyleClass("sapUiIntegrationEditorItemObjectFieldDetailsPopover");
+			oModel = new JSONModel({
+				"value": oItemCloned,
+				"editMode": "Properties"
+			});
 			that._oObjectDetailsPopover.setModel(oModel);
 			that._oObjectDetailsPopover.setModel(that.getModel("i18n"), "i18n");
 			that._oObjectDetailsPopover._oAddButton = oAddButton;
@@ -1072,6 +1375,7 @@ sap.ui.define([
 		} else {
 			oModel = that._oObjectDetailsPopover.getModel();
 			oModel.setProperty("/value", oItemCloned);
+			oModel.checkUpdate(true);
 			if (sMode === "add") {
 				that._oObjectDetailsPopover._oAddButton.setVisible(true);
 				that._oObjectDetailsPopover._oUpdateButton.setVisible(false);
@@ -1089,70 +1393,388 @@ sap.ui.define([
 				that._oObjectDetailsPopover._oCloseButton.setVisible(true);
 			}
 			that._oObjectDetailsPopover._openBy = oControl;
+			that._oObjectDetailsPopover.setPlacement(sPlacement);
+			// nav back to main page
+			that._oNavContainer.back();
 		}
 		that._oObjectDetailsPopover.openBy(oControl);
 	};
 
-	ObjectField.prototype.onCreate = function(oEvent) {
+	// build the translation data of the translation list
+	ObjectField.prototype.buildTranslationsData = function (sKey, sType, sUUID, sProperty) {
 		var that = this;
-		var oControl = that.getAggregation("_field");
-		var oParameter;
-		var bHasBeforeValue = that.checkHasValue();
-		if (bHasBeforeValue) {
-			oParameter = {
-				selectedIndex: oControl.getSelectedIndex(),
-				selectedIndices: oControl.getSelectedIndices()
+		var oResourceBundle = that.getResourceBundle();
+		that._oOriginTranslatedValues = that._oOriginTranslatedValues || {};
+		that._oUpdatedTranslations = that._oUpdatedTranslations || {};
+		var sPropertyKey = sUUID + "_" + sProperty;
+		var sTranslationKey = sKey;
+		// get or build the initial translation data
+		if (sType === "key") {
+			if (!that._oOriginTranslatedValues[sKey]) {
+				that._oOriginTranslatedValues[sKey] = that.getOriginTranslatedValues(sKey);
+			}
+		} else if (sType === "property") {
+			sTranslationKey = sPropertyKey;
+			that._oOriginTranslatedValues[sTranslationKey] = that.buildPropertyTranslationValues(sKey);
+		}
+		var aTempTranslatedLanguages = [];
+		// merge with the current translation texts
+		that._oOriginTranslatedValues[sTranslationKey].forEach(function (originTranslatedValue) {
+			var oTempTranslatedValue = deepClone(originTranslatedValue, 500);
+			oTempTranslatedValue.status = oResourceBundle.getText("EDITOR_FIELD_TRANSLATION_LIST_POPOVER_LISTITEM_GROUP_NOTUPDATED");
+			var sTranslateText = that.getTranslationValueInTexts(oTempTranslatedValue.key, sUUID, sProperty);
+			if (sTranslateText) {
+				oTempTranslatedValue.value = sTranslateText;
+				if (includes(that._oUpdatedTranslations[sTranslationKey], oTempTranslatedValue.key)) {
+					oTempTranslatedValue.value = that.getTranslationValueInTexts(oTempTranslatedValue.key, sUUID, sProperty);
+					oTempTranslatedValue.status = oResourceBundle.getText("EDITOR_FIELD_TRANSLATION_LIST_POPOVER_LISTITEM_GROUP_UPDATED");
+				} else {
+					oTempTranslatedValue.originValue = oTempTranslatedValue.value;
+				}
+			}
+			if (oTempTranslatedValue.key === oResourceBundle.sLocale.replaceAll('_', '-')) {
+				oTempTranslatedValue.desription += " (" + oResourceBundle.getText("EDITOR_FIELD_TRANSLATION_LIST_POPOVER_CURRENTLANGUAGE") + ")";
+				aTempTranslatedLanguages.unshift(oTempTranslatedValue);
+			} else {
+				aTempTranslatedLanguages.push(oTempTranslatedValue);
+			}
+		});
+		var oTranslatedValues = {
+			"isUpdated": false,
+			"key": sKey,
+			"translationKey": sTranslationKey,
+			"translationType": sType,
+			"uuid": sUUID,
+			"property": sProperty,
+			"translatedLanguages": aTempTranslatedLanguages
+		};
+		return oTranslatedValues;
+	};
+
+	ObjectField.prototype.getTranslationKey = function (sValue) {
+		var sKey;
+		if (sValue && sValue.match(REGEXP_TRANSLATABLE)) {
+			sKey = sValue.substring(2, sValue.length - 2);
+		} else if (sValue && sValue.startsWith("{i18n>") && sValue.endsWith('}')) {
+			sKey = sValue.substring(6, sValue.length - 1);
+		}
+		return sKey;
+	};
+
+	ObjectField.prototype.buildTranslationsModel = function (oTranslatedValues) {
+		var that = this;
+		var oResourceBundle = that.getResourceBundle();
+		var oTranslatonsModel = new JSONModel(oTranslatedValues);
+		oTranslatonsModel.attachPropertyChange(function(oEvent) {
+			//update the status of each translation for grouping
+			//update the isUpdated property
+			var oData = oTranslatonsModel.getData();
+			var sUpdatedStr = oResourceBundle.getText("EDITOR_FIELD_TRANSLATION_LIST_POPOVER_LISTITEM_GROUP_UPDATED");
+			var sNotUpdatedStr = oResourceBundle.getText("EDITOR_FIELD_TRANSLATION_LIST_POPOVER_LISTITEM_GROUP_NOTUPDATED");
+			var bIsUpdated = false;
+			oData.translatedLanguages.forEach(function(oLanguage) {
+				if (oLanguage.value !== oLanguage.originValue) {
+					oLanguage.status = sUpdatedStr;
+					bIsUpdated = true;
+				} else {
+					oLanguage.status = sNotUpdatedStr;
+				}
+			});
+			oData.isUpdated = bIsUpdated;
+			oTranslatonsModel.setData(oData);
+			oTranslatonsModel.checkUpdate(true);
+		});
+		return oTranslatonsModel;
+	};
+
+	ObjectField.prototype.buildTranslationsList = function () {
+		return new List({
+			items: {
+				path: "languages>/translatedLanguages",
+				template: new CustomListItem({
+					content: [
+						new VBox({
+							items: [
+								new Text({
+									text: "{languages>desription}"
+								}),
+								new Input({
+									value: "{languages>value}",
+									editable: "{languages>editable}"
+								})
+							]
+						})
+					],
+					customData: [
+						new CustomData({
+							key: "{languages>key}",
+							value: "{languages>desription}"
+						})
+					]
+				}),
+				sorter: [new Sorter({
+					path: 'status',
+					descending: true,
+					group: true
+				})]
+			}
+		});
+	};
+
+	ObjectField.prototype.buildTranslationsFooter = function (oList, bIsInTranslationPopover) {
+		var that = this;
+		var oResourceBundle = that.getResourceBundle();
+		var sCurrentLanugae = oResourceBundle.sLocale.replaceAll('_', '-');
+		var oSaveTranslationButton = new Button({
+			type: "Emphasized",
+			text: oResourceBundle.getText("EDITOR_FIELD_TRANSLATION_LIST_POPOVER_BUTTON_SAVE"),
+			enabled: "{languages>/isUpdated}",
+			press: function () {
+				var oTranslationModel = oList.getModel("languages");
+				var oData = oTranslationModel.getData();
+				//get changes in the popup
+				var aUpdatedLanguages = [];
+				var sKey = oData.key;
+				var sTranslationKey = oData.translationKey;
+				var sType = oData.translationType;
+				var sUUID = oData.uuid;
+				var sProperty = oData.property;
+				oData.translatedLanguages.forEach(function(oLanguage) {
+					if (oLanguage.value !== oLanguage.originValue) {
+						that.setTranslationValueInTexts(oLanguage.key, sUUID, sProperty, oLanguage.value);
+						aUpdatedLanguages.push(oLanguage.key);
+					}
+				});
+				var bUpdateDependentFieldsAndPreview = false;
+				if (aUpdatedLanguages.length > 0) {
+					that._oUpdatedTranslations = that._oUpdatedTranslations || {};
+					that._oUpdatedTranslations[sTranslationKey] = aUpdatedLanguages;
+					if (includes(aUpdatedLanguages, sCurrentLanugae)) {
+						bUpdateDependentFieldsAndPreview = true;
+					}
+				}
+				// refresh the translation list
+				oData = that.buildTranslationsData(sKey, sType, sUUID, sProperty);
+				oTranslationModel.setData(oData);
+				oTranslationModel.checkUpdate(true);
+				// update table
+				if (that.getModel()) {
+					that.getModel().checkUpdate(true);
+				}
+				// update preview and dependent fields
+				if (bUpdateDependentFieldsAndPreview && that._oValueBinding) {
+					that._oValueBinding.fireEvent("change");
+				}
+			}
+		});
+		var oResetTranslationButton = new Button({
+			text: oResourceBundle.getText("EDITOR_FIELD_OBJECT_DETAILS_POPOVER_BUTTON_RESET"),
+			enabled: "{languages>/isUpdated}",
+			press: function(oEvent) {
+				var oTranslationModel = oList.getModel("languages");
+				var oData = oTranslationModel.getData();
+				// set value to origin value
+				oData.translatedLanguages.forEach(function (translatedValue) {
+					translatedValue.value = translatedValue.originValue;
+					translatedValue.status = oResourceBundle.getText("EDITOR_FIELD_TRANSLATION_LIST_POPOVER_LISTITEM_GROUP_NOTUPDATED");
+				});
+				oData.isUpdated = false;
+				oTranslationModel.setData(oData);
+				oTranslationModel.checkUpdate(true);
+			}
+		});
+		var oCancelButton = new Button({
+			text: oResourceBundle.getText("EDITOR_FIELD_TRANSLATION_LIST_POPOVER_BUTTON_CANCEL"),
+			visible: bIsInTranslationPopover,
+			press: function () {
+				that._oTranslationPopover.close();
+			}
+		});
+		return new OverflowToolbar({
+			content: [
+				new ToolbarSpacer(),
+				oSaveTranslationButton,
+				oResetTranslationButton,
+				oCancelButton
+			]
+		});
+	};
+
+	ObjectField.prototype.openTranslationPopup = function (sProperty, oEvent) {
+		var that = this;
+		var oControl = oEvent.getSource();
+		var oResourceBundle = that.getResourceBundle();
+		var oNewObject = oControl.getModel().getProperty("/value");
+		if (!oNewObject._dt) {
+			oNewObject._dt = {
+				_uuid: Utils.generateUuidV4()
 			};
+		} else if (!oNewObject._dt._uuid) {
+			oNewObject._dt._uuid = Utils.generateUuidV4();
+		}
+		var sValue = oControl.getValue();
+		//get translation key of the value
+		var sKey = that.getTranslationKey(sValue);
+		var sType = "property";
+		if (sKey && sKey !== "") {
+			sType = "key";
+		} else {
+			sKey = sValue;
 		}
+		var oTranslatedValues = that.buildTranslationsData(sKey, sType, oNewObject._dt._uuid, sProperty);
+		var oTranslatonsModel;
+		if (!that._oTranslationPopover) {
+			var oList = that.buildTranslationsList();
+			var oTranslationsFooter = that.buildTranslationsFooter(oList, true);
+			var sPlacement = that._previewPosition === "right" ? "Right" : "Left";
+			that._oTranslationPopover = new Popover({
+				placement: sPlacement,
+				contentWidth: "300px",
+				contentHeight: "345px",
+				title: oResourceBundle.getText("EDITOR_FIELD_OBJECT_TRANSLATION_LIST_TITLE", "{languages>/property}"),
+				content: oList,
+				footer: oTranslationsFooter
+			}).addStyleClass("sapUiIntegrationFieldTranslation");
+			oTranslatonsModel = that.buildTranslationsModel(oTranslatedValues);
+			that._oTranslationPopover.setModel(oTranslatonsModel, "languages");
+		} else {
+			oTranslatonsModel = that._oTranslationPopover.getModel("languages");
+			oTranslatonsModel.setData(oTranslatedValues);
+			oTranslatonsModel.checkUpdate(true);
+		}
+		that._oTranslationPopover.openBy(oControl._oValueHelpIcon);
+	};
+
+	ObjectField.prototype.navToTranslationPage = function (sProperty, oEvent) {
+		var that = this;
+		var oNewObject = that._oObjectDetailsPopover.getModel().getProperty("/value");
+		var sValue = oNewObject[sProperty];
+		//get translation key of the value
+		var sKey = that.getTranslationKey(sValue);
+		var sType = "property";
+		if (sKey && sKey !== "") {
+			sType = "key";
+		} else {
+			sKey = sValue;
+		}
+		var oTranslatedValues = that.buildTranslationsData(sKey, sType, oNewObject._dt._uuid, sProperty);
+		var oTranslatonsModel = that._oTranslationListPage.getModel("languages");
+		if (!oTranslatonsModel) {
+			oTranslatonsModel = that.buildTranslationsModel(oTranslatedValues);
+			that._oTranslationListPage.setModel(oTranslatonsModel, "languages");
+		} else {
+			oTranslatonsModel.setData(oTranslatedValues);
+		}
+		that._oNavContainer.to(that._oTranslationListPage);
+		that._oTranslationListPage.focus();
+	};
+
+	ObjectField.prototype.onAdd = function(oEvent) {
+		var that = this;
+		var oControl = that.getAggregation("_field");
+		var oModel = oControl.getModel();
 		var oNewObject = that._oObjectDetailsPopover.getModel().getProperty("/value");
 		var sPath = oControl.getBinding("rows").getPath();
-		var oData = oControl.getModel().getProperty(sPath);
+		var oData = oModel.getProperty(sPath);
+		oData.forEach(function (oItem) {
+			if (oItem._dt._selected) {
+				oItem._dt._selected = false;
+			}
+		});
 		oData.push(oNewObject);
-		oControl.getModel().checkUpdate();
+		oModel.setProperty("/_hasSelected", true);
+		oModel.setProperty("/_hasTableAllSelected", false);
+		oModel.setProperty("/_hasTableSelected", false);
+		oModel.checkUpdate();
+		that.refreshValue();
+		that.updateTable();
 		that._oObjectDetailsPopover.close();
-
-		// restore the selections since the selections are lost, BCP: 2280048930, JIRA: CPOUIFTEAMB-252
-		if (bHasBeforeValue) {
-			that.applyBeforeValueAndSelections("add", oParameter);
-		}
 	};
 
 	ObjectField.prototype.onUpdate = function (oEvent) {
 		var that = this;
-		var oControl = that.getAggregation("_field");
+		var oTable = that.getAggregation("_field");
 		var oObject = that._oObjectDetailsPopover.getModel().getProperty("/value");
-		var oModel = oControl.getModel();
-		var oRow = that._oObjectDetailsPopover._openBy.getParent().getParent();
+		var oModel = oTable.getModel();
+		var oRow = that._oObjectDetailsPopover._openBy.getParent();
 		var iRowIndex = oRow.getIndex();
 
 		// get the real index via path since the rows may be filtered
-		var oRowContexts = oControl.getBinding("rows").getContexts();
-		var sPath = oRowContexts[iRowIndex].getPath();
-
-		var oParameter;
-		var bHasBeforeValue = that.checkHasValue();
-		if (bHasBeforeValue) {
-			var aRowContexts = oControl.getBinding("rows").getContexts();
-			oParameter = {
-				updatedObject: oObject,
-				rowIndex: iRowIndex,
-				path: sPath,
-				selectedIndex: oControl.getSelectedIndex(),
-				selectedIndices: oControl.getSelectedIndices(),
-				rowNumber: aRowContexts ? aRowContexts.length : 0
-			};
-		}
-
+		var aRowContexts = oTable.getBinding("rows").getContexts();
+		var sPath = aRowContexts[iRowIndex].getPath();
 		// update the object in control value model
 		oModel.setProperty(sPath, deepClone(oObject, 500));
 		oModel.checkUpdate();
 
+		//update object in field value if it is selected
+		if (oObject._dt && oObject._dt._selected) {
+			that.refreshValue();
+		}
+		that.updateTable();
+
 		that._oObjectDetailsPopover.close();
+	};
 
-		// restore the selections since the selections are lost, BCP: 2280048930, JIRA: CPOUIFTEAMB-252
-		if (bHasBeforeValue) {
-			that.applyBeforeValueAndSelections("update", oParameter);
+	ObjectField.prototype.onDelete = function(oEvent) {
+		var that = this;
+		var oTable = that.getAggregation("_field");
+		var oResourceBundle = that.getResourceBundle();
+		var aSelectedIndices = oTable.getSelectedIndices();
+		var aSelectedIndexs = [];
+		var aRowContexts = oTable.getBinding("rows").getContexts();
+		aSelectedIndices.forEach(function (iSelectIndex) {
+			var oObject = aRowContexts[iSelectIndex].getObject();
+			if (oObject._dt && oObject._dt._editable !== false) {
+				var sPath = aRowContexts[iSelectIndex].getPath();
+				var iRealIndex = sPath.substring(sPath.lastIndexOf("/") + 1);
+				aSelectedIndexs.push(iRealIndex);
+			}
+		});
+		if (aSelectedIndexs.length === 0) {
+			MessageBox.error(oResourceBundle.getText("EDITOR_FIELD_OBJECT_DELETE_ERROR_MSG"));
+			return;
+		}
+		MessageBox.confirm(oResourceBundle.getText("EDITOR_FIELD_OBJECT_DELETE_CONFIRM_MSG"), {
+			title: oResourceBundle.getText("EDITOR_FIELD_OBJECT_DELETE_CONFIRM_TITLE"),
+			onClose: function(sAction) {
+				if (sAction === MessageBox.Action.OK) {
+					var sPath = oTable.getBindingContext().getPath();
+					var oModel = oTable.getModel();
+					var oData = oModel.getProperty(sPath);
+					var oNewData = [];
+					for (var i = 0; i < oData.length; i++) {
+						if (includes(aSelectedIndexs, i + "")) {
+							that.deleteTranslationValueInTexts(undefined, oData[i]._dt._uuid);
+						} else {
+							oNewData.push(oData[i]);
+						}
+					}
+					oModel.setProperty(sPath, oNewData);
+					oModel.checkUpdate(true);
+					that.refreshValue();
+					that.updateTable();
+				} else {
+					MessageToast.show(oResourceBundle.getText("EDITOR_FIELD_OBJECT_DELETE_CONFIRM_CANCLE"));
+				}
+			}
+		});
+	};
+
+	ObjectField.prototype.refreshValue = function () {
+		var that = this;
+		var oTable = that.getAggregation("_field");
+		var oModel = oTable.getModel();
+		var sPath = oTable.getBinding("rows").getPath();
+		var oData = oModel.getProperty(sPath);
+		var oValue;
+		for (var i = 0; i < oData.length; i++) {
+			var oItem = oData[i];
+			if (oItem._dt._selected) {
+				oValue = deepClone(oItem);
+				break;
+			}
 		}
+		that.setValue(oValue);
 	};
 
 	ObjectField.prototype.clearAllFilters = function(oEvent) {
@@ -1169,93 +1791,144 @@ sap.ui.define([
 		}
 	};
 
-	ObjectField.prototype.checkHasValue = function() {
+	ObjectField.prototype.setValue = function(oValue) {
 		var that = this;
-		var oValue = that._getCurrentProperty("value");
-		if (typeof oValue === "object" && !deepEqual(oValue, {})) {
-			return true;
+		that.cleanDT(oValue);
+		that._setCurrentProperty("value", oValue);
+	};
+
+	ObjectField.prototype.cleanDT = function(oValue) {
+		if (oValue && oValue._dt && oValue._dt._selected) {
+			delete oValue._dt._selected;
+		}
+		if (oValue && oValue._dt && deepEqual(oValue._dt, {})) {
+			delete oValue._dt;
 		}
-		return false;
 	};
 
-	// restore the selections since the selections are lost, BCP: 2280048930, JIRA: CPOUIFTEAMB-252
-	ObjectField.prototype.applyBeforeValueAndSelections = function(sMode, oParameter) {
+	// get the translation text
+	ObjectField.prototype.getTranslationValueInTexts = function (sLanguage, sUUID, sProperty) {
 		var that = this;
-		var oControl = that.getAggregation("_field");
-		var iSelectedIndex = oParameter.selectedIndex;
-		var iRowNumber = oParameter.rowNumber;
-		var aRowContexts = oControl.getBinding("rows").getContexts();
-		var iNewRowNumber = aRowContexts.length;
-		var iRowIndex = oParameter.rowIndex;
-		var sPath = oControl.getBinding("rows").getPath();
-		var iRealIndexOfFilteredOut;
-		switch (sMode) {
-			case "add":
-				if (iSelectedIndex > -1) {
-					oControl.setSelectedIndex(iSelectedIndex);
-					oControl._sPathOfFilteredOut = null;
-				}
-				break;
-			case "update":
-				//update object in field value if it is selected
-				if (iRowIndex === iSelectedIndex) {
-					that._setCurrentProperty("value", oParameter.updatedObject);
-					// update the selections when row number changed which means the update may cause it filter out
-					if (iRowNumber !== iNewRowNumber) {
-						oControl._sPathOfFilteredOut = oParameter.path;
-					}
-				} else if (iRowNumber !== iNewRowNumber) {
-					// update the selections when row number changed which means the update may cause it filter out
-					if (iSelectedIndex > iRowIndex) {
-						iSelectedIndex--;
+		var oConfig = that.getConfiguration();
+		var sTranslationPath = "/texts/" + sLanguage;
+		var oProperty = this._settingsModel.getProperty(sTranslationPath) || {};
+		var oValue = oProperty[oConfig.manifestpath];
+		var sValue;
+		if (oValue && oValue[sUUID]) {
+			sValue = oValue[sUUID][sProperty];
+		}
+		return sValue;
+	};
+
+	// set the config value of the property in designtime
+	ObjectField.prototype.setObjectPropertyConfigValueInDesigntime = function (sUUID, sProperty, sConfigName, vConfigValue) {
+		var that = this;
+		var oConfig = that.getConfiguration();
+		var sDesigntimePath = "/:designtime";
+		var oData = this._settingsModel.getData();
+		if (!oData) {
+			return;
+		}
+		var oDesigntime;
+		if (!oData.hasOwnProperty(":designtime")) {
+			oDesigntime = {};
+		} else {
+			oDesigntime = deepClone(oData[":designtime"], 500);
+		}
+		if (!oDesigntime.hasOwnProperty(oConfig.manifestpath)) {
+			oDesigntime[oConfig.manifestpath] = {};
+		}
+		if (!oDesigntime[oConfig.manifestpath].hasOwnProperty(sUUID)) {
+			oDesigntime[oConfig.manifestpath][sUUID] = {};
+		}
+		if (!oDesigntime[oConfig.manifestpath][sUUID].hasOwnProperty(sProperty)) {
+			oDesigntime[oConfig.manifestpath][sUUID][sProperty] = {};
+		}
+		oDesigntime[oConfig.manifestpath][sUUID][sProperty][sConfigName] = vConfigValue;
+		this._settingsModel.setProperty(sDesigntimePath, oDesigntime);
+	};
+
+	// get the config value of the property in designtime
+	ObjectField.prototype.getObjectPropertyConfigValueInDesigntime = function (sUUID, sProperty, sConfigName) {
+		var that = this;
+		var vConfigValue;
+		var oConfig = that.getConfiguration();
+		var oData = this._settingsModel.getData();
+		if (oData && oData[":designtime"]
+			&& oData[":designtime"][oConfig.manifestpath]
+			&& oData[":designtime"][oConfig.manifestpath][sUUID]
+			&& oData[":designtime"][oConfig.manifestpath][sUUID][sProperty]
+			&& oData[":designtime"][oConfig.manifestpath][sUUID][sProperty].hasOwnProperty(sConfigName)) {
+			vConfigValue = oData[":designtime"][oConfig.manifestpath][sUUID][sProperty][sConfigName];
+		}
+		return vConfigValue;
+	};
+
+	// set the translation text
+	ObjectField.prototype.setTranslationValueInTexts = function (sLanguage, sUUID, sProperty, sValue) {
+		var that = this;
+		var oConfig = that.getConfiguration();
+		var sTranslationPath = "/texts";
+		var oData = this._settingsModel.getData();
+		if (!oData) {
+			return;
+		}
+		var oTexts;
+		if (!oData.hasOwnProperty("texts")) {
+			oTexts = {};
+		} else {
+			oTexts = deepClone(oData.texts, 500);
+		}
+		if (!oTexts.hasOwnProperty(sLanguage)) {
+			oTexts[sLanguage] = {};
+		}
+		if (!oTexts[sLanguage].hasOwnProperty(oConfig.manifestpath)) {
+			oTexts[sLanguage][oConfig.manifestpath] = {};
+		}
+		if (!oTexts[sLanguage][oConfig.manifestpath].hasOwnProperty(sUUID)) {
+			oTexts[sLanguage][oConfig.manifestpath][sUUID] = {};
+		}
+		oTexts[sLanguage][oConfig.manifestpath][sUUID][sProperty] = sValue;
+		this._settingsModel.setProperty(sTranslationPath, oTexts);
+	};
+
+	// delete the translation text
+	ObjectField.prototype.deleteTranslationValueInTexts = function (sLanguage, sUUID, sProperty) {
+		var that = this;
+		var oData = that._settingsModel.getData();
+		if (!oData || !oData.texts || !sUUID) {
+			return;
+		}
+		var oConfig = that.getConfiguration();
+		var sTranslationPath = "/texts";
+		var oTexts = deepClone(oData.texts, 500);
+		if (sLanguage) {
+			if (oTexts[sLanguage]
+				&& oTexts[sLanguage][oConfig.manifestpath]
+				&& oTexts[sLanguage][oConfig.manifestpath][sUUID]) {
+				if (sProperty) {
+					if (oTexts[sLanguage][oConfig.manifestpath][sUUID].hasOwnProperty(sProperty)) {
+						delete oTexts[sLanguage][oConfig.manifestpath][sUUID][sProperty];
+						if (deepEqual(oTexts[sLanguage][oConfig.manifestpath][sUUID], {})) {
+							delete oTexts[sLanguage][oConfig.manifestpath][sUUID];
+						}
+						this._settingsModel.setProperty(sTranslationPath, oTexts);
 					}
-					oControl.setSelectedIndex(iSelectedIndex);
-				}
-				break;
-			case "delete":
-				if (iSelectedIndex === iRowIndex) {
-					that._setCurrentProperty("value", undefined);
-				} else if (iSelectedIndex > iRowIndex) {
-					oControl.setSelectedIndex(iSelectedIndex - 1);
 				} else {
-					oControl.setSelectedIndex(iSelectedIndex);
-				}
-				// update the Paths in oControl._sPathOfFilteredOut
-				if (oControl._sPathOfFilteredOut) {
-					iRealIndexOfFilteredOut = oControl._sPathOfFilteredOut.substring(oControl._sPathOfFilteredOut.lastIndexOf("/") + 1);
-					if (iRealIndexOfFilteredOut > oParameter.realIndex) {
-						iRealIndexOfFilteredOut--;
-						oControl._sPathOfFilteredOut = sPath + "/" + iRealIndexOfFilteredOut;
-					}
-				}
-				break;
-			case "filter":
-				var oColumn = oParameter.column;
-				if (iSelectedIndex > -1) {
-					oControl._sPathOfFilteredOut = aRowContexts && aRowContexts[iSelectedIndex].getPath();
-				}
-				if (oColumn._applySelection !== false && oControl._sPathOfFilteredOut) {
-					oControl.attachEventOnce("rowsUpdated", function() {
-						var aFilteredRowContexts = oControl.getBinding("rows").getContexts() || [];
-						var sNewIndex = -1;
-						if (aFilteredRowContexts.length > 0 && oControl._sPathOfFilteredOut) {
-							for (var i = 0; i < aFilteredRowContexts.length; i++) {
-								var oContext = aFilteredRowContexts[i];
-								if (oContext.getPath() === oControl._sPathOfFilteredOut) {
-									sNewIndex = i;
-									oControl._sPathOfFilteredOut = undefined;
-									break;
-								}
-							}
-						}
-						if (sNewIndex > -1) {
-							oControl.setSelectedIndex(sNewIndex);
+					delete oTexts[sLanguage][oConfig.manifestpath][sUUID];
+					if (deepEqual(oTexts[sLanguage][oConfig.manifestpath], {})) {
+						delete oTexts[sLanguage][oConfig.manifestpath];
+						if (deepEqual(oTexts[sLanguage], {})) {
+							delete oTexts[sLanguage];
 						}
-					});
+					}
+					this._settingsModel.setProperty(sTranslationPath, oTexts);
 				}
-				delete oColumn._applySelection;
-				break;
-			default:
+			}
+		} else {
+			for (var n in oTexts) {
+				that.deleteTranslationValueInTexts(n, sUUID, sProperty);
+			}
 		}
 	};