@openui5/sap.ui.integration 1.117.1 → 1.119.0

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

@@ -31,7 +31,12 @@ sap.ui.define([
 	"sap/m/ColumnListItem",
 	"sap/m/ScrollContainer",
 	"sap/base/util/ObjectPath",
-	"sap/ui/integration/util/BindingHelper"
+	"sap/ui/integration/util/BindingHelper",
+	"sap/ui/integration/editor/fields/ObjectListField",
+	"sap/ui/layout/form/SimpleForm",
+	"sap/ui/integration/util/Utils",
+	"sap/base/util/deepClone",
+	"sap/base/util/deepEqual"
 ], function (
 	Control,
 	Popover,
@@ -60,7 +65,12 @@ sap.ui.define([
 	ColumnListItem,
 	ScrollContainer,
 	ObjectPath,
-	BindingHelper
+	BindingHelper,
+	ObjectListField,
+	SimpleForm,
+	Utils,
+	deepClone,
+	deepEqual
 ) {
 	"use strict";
 
@@ -70,7 +80,7 @@ sap.ui.define([
 	 * @alias sap.ui.integration.editor.Settings
 	 * @author SAP SE
 	 * @since 1.83.0
-	 * @version 1.117.1
+	 * @version 1.119.0
 	 * @private
 	 * @experimental since 1.83.0
 	 * @ui5-restricted
@@ -88,6 +98,7 @@ sap.ui.define([
 		oCurrentInstance = null,
 		oDynamicPanel,
 		oSettingsPanel,
+		oTransformPanel,
 		oDescriptionLabel,
 		oDynamicValueField,
 		oMenu,
@@ -97,7 +108,9 @@ sap.ui.define([
 		oSettingsButton,
 		oSegmentedButton,
 		oResetToDefaultButton,
-		oPopover;
+		oPopover,
+		iOffsetMaxHeight = 450,
+		iOffsetMaxWidth = 360;
 	Settings.prototype.setConfiguration = function (oConfig) {
 		this._originalConfig = oConfig;
 		oConfig = merge({}, oConfig);
@@ -108,11 +121,11 @@ sap.ui.define([
 		});
 	};
 
-	Settings.prototype.open = function (oField, oReferrer, oPreview, oHost, oParent, fnApply, fnCancel) {
+	Settings.prototype.open = function (oControl, oReferrer, oEditor, oHost, oParent, fnApply, fnCancel) {
 		var oCurrentData = this.getModel("currentSettings").getData(),
 			sParameterId = oParent.getParameterId();
 		//prepare fields in key
-		if (oCurrentData.values) {
+		if (oCurrentData.values && oCurrentData.values.item) {
 			this.prepareFieldsInKey(oCurrentData);
 		}
 		oCurrentInstance = this;
@@ -123,33 +136,42 @@ sap.ui.define([
 		this.fnCancel = fnCancel;
 		this._oOpener = oParent;
 		bCancel = true;
-		oField.addDependent(this);
+		oControl.addDependent(this);
 		//adjust page admin values table height
-		if (!oCurrentData.allowDynamicValues && oCurrentData.values) {
+		if (!oCurrentData.allowDynamicValues && oCurrentData.values && oCurrentData.values.item) {
 			Core.byId(sParameterId + "_settings_popover_scroll_container").setHeight("155px");
 		}
 		//force update of all bindings
 		this.getModel("currentSettings").checkUpdate(true, true);
 		applyVariableDescription(oResourceBundle.getText("EDITOR_SELECT_FROM_LIST"), []);
 		if (oReferrer) {
-			var iOffsetWidth = (!oPreview || oPreview.getDomRef() === null || oPreview.getDomRef().offsetWidth === 0) ? 270 : oPreview.getDomRef().offsetWidth;
-			var iOffsetHeight = (!oPreview || oPreview.getDomRef() === null || oPreview.getDomRef().offsetHeight === 0) ? 350 : oPreview.getDomRef().offsetHeight;
-			oPopover.setContentWidth(iOffsetWidth + "px");
+			var iOffsetHeight = oEditor.getDomRef().offsetHeight;
+			iOffsetHeight = iOffsetHeight > iOffsetMaxHeight ? iOffsetMaxHeight : iOffsetHeight;
 			oPopover.setContentHeight((iOffsetHeight - 50) + "px");
+			var iOffsetWidth;
 			var sPlacement = "Right";
-			var iX = oField.getDomRef().getBoundingClientRect().x;
-			var iWidth = document.body.offsetWidth;
-			if ( 2 * iX > iWidth) {
+			var oEditorBoundingClientRect = oEditor.getDomRef().getBoundingClientRect();
+			var oControlBoundingClientRect = oControl.getDomRef().getBoundingClientRect();
+			var iXofControl = oControlBoundingClientRect.x + oControlBoundingClientRect.width / 2 - oEditorBoundingClientRect.x;
+			var iEditorWidth = oEditorBoundingClientRect.width;
+			if ( 2 * iXofControl > iEditorWidth) {
 				sPlacement = "Left";
+				iOffsetWidth = iXofControl - oControlBoundingClientRect.width * 1.5;
+			} else {
+				iOffsetWidth = iEditorWidth - iXofControl - oControlBoundingClientRect.width;
 			}
+			iOffsetWidth = iOffsetWidth > iOffsetMaxWidth ? iOffsetMaxWidth : iOffsetWidth;
+			oPopover.setContentWidth(iOffsetWidth + "px");
 			oPopover.setPlacement(sPlacement);
-			oDynamicValueField.setValue(oField._label);
-			oPopover.openBy(oField);
+			oDynamicValueField.setValue(oControl._label);
+			oPopover.openBy(oControl);
 		} else {
 			oPopover.open();
 		}
 		oCurrentModel = this.getModel("currentSettings");
-		if (oCurrentModel.getProperty("/_hasDynamicValue")) {
+		if (oCurrentModel.getProperty("/type") === "destination") {
+			selectTransform(sParameterId);
+		} else if (oCurrentModel.getProperty("/_hasDynamicValue")) {
 			selectDynamic(sParameterId);
 		} else if (oCurrentModel.getProperty("/_hasSettings")) {
 			selectSettings(sParameterId);
@@ -175,11 +197,12 @@ sap.ui.define([
 
 	function createPopover(oData, oField) {
 		var sParameterId = oField.getParameterId(),
-			oHeader = createHeader(sParameterId),
-		    oResetToDefaultButton = createResetBtn(oData, sParameterId),
+			oHeader = createHeader(oData, sParameterId),
+		    oResetToDefaultButton = createResetBtn(oData, sParameterId, oField),
 		    oDynamicPanel = createDynamicPanel(sParameterId),
 			oCurrentValue = createCurrentValuesBox(sParameterId),
 		    oSettingsPanel = createSettingPanel(oData, oField),
+			oTransformPanel = createTransformPanel(oData, oField),
 		    oPopover = new Popover({
 			id: sParameterId + "_settings_popover",
 			showArrow: true,
@@ -196,22 +219,42 @@ sap.ui.define([
 						text: oResourceBundle.getText("EDITOR_MORE_OK"),
 						type: "Emphasized",
 						press: function () {
-							//handle page admin values
-							if (oData.values) {
-								var oTable = Core.byId(sParameterId + "_settings_popover_pav_table"),
-								selectedContexts = oTable.getSelectedContexts(),
-								selectedKeys = [];
-								if (oCurrentModel.getProperty("/selectedValues") === "Partion") {
-									for (var i = 0; i < selectedContexts.length; i++) {
-										var selectedKey = oCurrentInstance.getKeyFromItem(selectedContexts[i].getObject());
-										selectedKeys.push(selectedKey);
+							if (oData.type === "destination") {
+								if (oField._oNewParameter) {
+									var newParameter = Object.assign({}, oField._oNewParameter);
+									var aValues = deepClone(Object.assign([], oField._oValue.value));
+									aValues = aValues.sort(function (a, b) {
+										// if _position property not exists, do nothing
+										if (!a._dt || !a._dt._position || !b._dt || !b._dt._position) {
+											return 0;
+										}
+										return a._dt._position - b._dt._position;
+									});
+									aValues.forEach(function (value) {
+										delete value._dt;
+									});
+									newParameter.configuration.values.data.json = {
+										"values": aValues
+									};
+									setNextSetting("pageAdminNewDestinationParameter", newParameter);
+								}
+							} else {
+								//handle page admin values
+								if (oData.values && oData.values.item) {
+									var oTable = Core.byId(sParameterId + "_settings_popover_pav_table"),
+									selectedContexts = oTable.getSelectedContexts(),
+									selectedKeys = [];
+									if (oCurrentModel.getProperty("/selectedValues") === "Partion") {
+										for (var i = 0; i < selectedContexts.length; i++) {
+											var selectedKey = oCurrentInstance.getKeyFromItem(selectedContexts[i].getObject());
+											selectedKeys.push(selectedKey);
+										}
+										setNextSetting("pageAdminValues", selectedKeys);
+									} else {
+										setNextSetting("pageAdminValues", []);
 									}
-									setNextSetting("pageAdminValues", selectedKeys);
-								} else {
-									setNextSetting("pageAdminValues", []);
 								}
 							}
-
 							oCurrentInstance._applyCurrentSettings();
 							bCancel = false;
 							oPopover.close();
@@ -238,7 +281,7 @@ sap.ui.define([
 				});
 
 				//handle page admin values selection
-				if (oData.values) {
+				if (oData.values && oData.values.item) {
 					var oTable = Core.byId(sParameterId + "_settings_popover_pav_table"),
 					paValues = oCurrentModel.getProperty("/_next/pageAdminValues");
 					if (paValues !== undefined && paValues.length > 0) {
@@ -266,6 +309,7 @@ sap.ui.define([
 		oPopover.addContent(oDynamicPanel);
 		oPopover.addContent(oCurrentValue);
 		oPopover.addContent(oSettingsPanel);
+		oPopover.addContent(oTransformPanel);
 
 		oPopover.addStyleClass("sapUiIntegrationFieldSettings");
 
@@ -310,78 +354,92 @@ sap.ui.define([
 		return oSegmentedButton;
 	}
 
-	function createHeader(sParameterId) {
+	function createHeader(oData, sParameterId) {
 		oSegmentedButton = createSegmentedButton(sParameterId);
 		var oDynamicValueText = new Text(sParameterId + "_settings_popover_dynamicvalue_txt", {
 			text: oResourceBundle.getText("EDITOR_MORE_DYNAMICVALUES"),
 			tooltip: oResourceBundle.getText("EDITOR_MORE_DYNAMICVALUES"),
-			visible: "{= ${currentSettings>allowDynamicValues} && !${currentSettings>allowSettings}}"
+			visible: oData.type !== "destination" && oData.allowDynamicValues && !oData.allowSettings
 		}).addStyleClass("sapUiTinyMagin");
 		var oSettingsText = new Text(sParameterId + "_settings_popover_settings_txt", {
 			text: oResourceBundle.getText("EDITOR_MORE_SETTINGS"),
-			visible: "{= !${currentSettings>allowDynamicValues} && ${currentSettings>allowSettings}}"
+			visible: oData.type !== "destination" && !oData.allowDynamicValues && oData.allowSettings
+		}).addStyleClass("sapUiTinyMagin");
+		var oTransformText = new Text(sParameterId + "_settings_popover_transform_txt", {
+			text: oResourceBundle.getText("EDITOR_MORE_TRANSFORM"),
+			visible: oData.type === "destination"
 		}).addStyleClass("sapUiTinyMagin");
 
 		var oTitle = new OverflowToolbar({
 			content: [
 				oSegmentedButton,
 				oDynamicValueText,
-				oSettingsText
+				oSettingsText,
+				oTransformText
 			]
 		}).addStyleClass("headertitle");
 		return oTitle;
 	}
 
-	function createResetBtn(oData, sParameterId) {
+	function createResetBtn(oData, sParameterId, oField) {
 	    oResetToDefaultButton = new Button(sParameterId + "_settings_popover_reset_btn", {
 			type: "Transparent",
 			text: oResourceBundle.getText("EDITOR_MORE_RESET"),
-			enabled: "{= ${currentSettings>_next/visible} === (typeof(${currentSettings>visibleToUser}) === 'undefined' ? false : !${currentSettings>visibleToUser}) || ${currentSettings>_next/editable} === (typeof(${currentSettings>editableToUser}) === 'undefined' ? false : !${currentSettings>editableToUser}) || ${currentSettings>_next/allowDynamicValues} === (typeof(${currentSettings>allowDynamicValues}) === 'undefined' ? false : !${currentSettings>allowDynamicValues}) || ${currentSettings>_beforeValue} !== ${currentSettings>value}}",
+			enabled: "{= ${currentSettings>_next/visible} === (typeof(${currentSettings>visibleToUser}) === 'undefined' ? false : !${currentSettings>visibleToUser}) || ${currentSettings>_next/editable} === (typeof(${currentSettings>editableToUser}) === 'undefined' ? false : !${currentSettings>editableToUser}) || ${currentSettings>_next/allowDynamicValues} === (typeof(${currentSettings>allowDynamicValues}) === 'undefined' ? false : !${currentSettings>allowDynamicValues}) || ${currentSettings>_beforeValue} !== ${currentSettings>value} || ${currentSettings>type} === 'destination'}",
 			tooltip: oResourceBundle.getText("EDITOR_MORE_SETTINGS_P_ADMIN_RESET"),
 			press: function () {
-				var bVisibleDefault = typeof (oCurrentModel.getProperty("/visibleToUser")) === 'undefined' ? true : oCurrentModel.getProperty("/visibleToUser");
-				var bEditableDefault = typeof (oCurrentModel.getProperty("/editableToUser")) === 'undefined' ? true : oCurrentModel.getProperty("/editableToUser");
-				var bAllowDynamicValuesDefault = typeof (oCurrentModel.getProperty("/allowDynamicValues")) === 'undefined' ? true : oCurrentModel.getProperty("/allowDynamicValues");
-				var oPopover = Core.byId(sParameterId + "_settings_popover");
-				setNextSetting("visible", bVisibleDefault);
-				setNextSetting("editable", bEditableDefault);
-				setNextSetting("allowDynamicValues", bAllowDynamicValuesDefault);
-				if (oCurrentModel.getProperty("/translatable")) {
-					if (oCurrentModel.getProperty("/_translatedDefaultValue") && oCurrentModel.getProperty("/_translatedDefaultValue") !== "") {
-						oCurrentModel.setProperty("/value", oCurrentModel.getProperty("/_translatedDefaultValue"));
-					} else if (oCurrentModel.getProperty("/_translatedDefaultPlaceholder") && oCurrentModel.getProperty("/_translatedDefaultPlaceholder") !== "") {
-						oCurrentModel.setProperty("/value", oCurrentModel.getProperty("/_translatedDefaultPlaceholder"));
-					}
-					oCurrentModel.setProperty("/_changed", false);
+				if (oData.type === "destination") {
+					setNextSetting("pageAdminNewDestinationParameter", undefined);
+					oField._oValue = undefined;
+					oField._oNewParameter = undefined;
 				} else {
-					oCurrentModel.setProperty("/value", oCurrentModel.getProperty("/_beforeValue"));
-				}
+					var bVisibleDefault = typeof (oCurrentModel.getProperty("/visibleToUser")) === 'undefined' ? true : oCurrentModel.getProperty("/visibleToUser");
+					var bEditableDefault = typeof (oCurrentModel.getProperty("/editableToUser")) === 'undefined' ? true : oCurrentModel.getProperty("/editableToUser");
+					var bAllowDynamicValuesDefault = typeof (oCurrentModel.getProperty("/allowDynamicValues")) === 'undefined' ? true : oCurrentModel.getProperty("/allowDynamicValues");
+					setNextSetting("visible", bVisibleDefault);
+					setNextSetting("editable", bEditableDefault);
+					setNextSetting("allowDynamicValues", bAllowDynamicValuesDefault);
+					if (oCurrentModel.getProperty("/translatable")) {
+						if (oCurrentModel.getProperty("/_translatedDefaultValue") && oCurrentModel.getProperty("/_translatedDefaultValue") !== "") {
+							oCurrentModel.setProperty("/value", oCurrentModel.getProperty("/_translatedDefaultValue"));
+						} else if (oCurrentModel.getProperty("/_translatedDefaultPlaceholder") && oCurrentModel.getProperty("/_translatedDefaultPlaceholder") !== "") {
+							oCurrentModel.setProperty("/value", oCurrentModel.getProperty("/_translatedDefaultPlaceholder"));
+						}
+						oCurrentModel.setProperty("/_changed", false);
+					} else {
+						oCurrentModel.setProperty("/value", oCurrentModel.getProperty("/_beforeValue"));
+						if (oData.type.indexOf("object") > -1) {
+							oField.setValue(oCurrentModel.getProperty("/_beforeValue"));
+							oField.resetControl();
+						}
+					}
 
-				//reset table selection
-				if (oData.values) {
-					var oTable = Core.byId(sParameterId + "_settings_popover_pav_table"),
-						sItems = oCurrentModel.getProperty("/_next/pageAdminValues"),
-						aItems = oTable.getItems();
-					// 	pavItemKey = oCurrentModel.getData().values.item.key;
-					// pavItemKey = pavItemKey.substring(1, pavItemKey.length - 1);
-					if (sItems !== undefined && sItems.length > 0 && sItems.length < aItems.length) {
-						oTable.removeSelections();
-						for (var i = 0; i < sItems.length; i++) {
-							for (var j = 0; j < aItems.length; j++) {
-								// var aItemValue = aItems[j].getBindingContext("currentSettings").getObject();
-								var aItemValue = oCurrentInstance.getKeyFromItem(aItems[j].getBindingContext().getObject());
-								if (sItems[i] === aItemValue) {
-									oTable.setSelectedItem(aItems[j]);
+					//reset table selection
+					if (oData.values && oData.values.item) {
+						var oTable = Core.byId(sParameterId + "_settings_popover_pav_table"),
+							sItems = oCurrentModel.getProperty("/_next/pageAdminValues"),
+							aItems = oTable.getItems();
+						// 	pavItemKey = oCurrentModel.getData().values.item.key;
+						// pavItemKey = pavItemKey.substring(1, pavItemKey.length - 1);
+						if (sItems !== undefined && sItems.length > 0 && sItems.length < aItems.length) {
+							oTable.removeSelections();
+							for (var i = 0; i < sItems.length; i++) {
+								for (var j = 0; j < aItems.length; j++) {
+									// var aItemValue = aItems[j].getBindingContext("currentSettings").getObject();
+									var aItemValue = oCurrentInstance.getKeyFromItem(aItems[j].getBindingContext().getObject());
+									if (sItems[i] === aItemValue) {
+										oTable.setSelectedItem(aItems[j]);
+									}
 								}
 							}
+							oCurrentModel.setProperty("/selectedValues", "Partion");
+						} else {
+							oTable.selectAll();
+							oCurrentModel.setProperty("/selectedValues", "All");
 						}
-						oCurrentModel.setProperty("/selectedValues", "Partion");
-					} else {
-						oTable.selectAll();
-						oCurrentModel.setProperty("/selectedValues", "All");
 					}
 				}
-
+				var oPopover = Core.byId(sParameterId + "_settings_popover");
 				oPopover.getFooter().getContent()[2].firePress();
 			}
 		}).addStyleClass("resetbutton");
@@ -391,13 +449,23 @@ sap.ui.define([
 	function selectSettings(sParameterId) {
 		oSettingsPanel.setVisible(true);
 		oDynamicPanel.setVisible(false);
+		oTransformPanel.setVisible(false);
 		Core.byId(sParameterId + "_settings_popover_segmented_btn").setSelectedKey("settings");
 		var oCurrentValue = Core.byId(sParameterId + "_settings_popover_currentvalue");
 		oCurrentValue.setVisible(false);
 	}
 
+	function selectTransform(sParameterId) {
+		oTransformPanel.setVisible(true);
+		oSettingsPanel.setVisible(false);
+		oDynamicPanel.setVisible(false);
+		var oCurrentValue = Core.byId(sParameterId + "_settings_popover_currentvalue");
+		oCurrentValue.setVisible(false);
+	}
+
 	function selectDynamic(sParameterId) {
 		oSettingsPanel.setVisible(false);
+		oTransformPanel.setVisible(false);
 		oDynamicPanel.setVisible(true);
 		Core.byId(sParameterId + "_settings_popover_segmented_btn").setSelectedKey("dynamic");
 		var oFlat = oCurrentInstance.getModel("contextflat"),
@@ -589,6 +657,9 @@ sap.ui.define([
 	function createSettingPanel(oData, oField) {
 		var sParameterId = oField.getParameterId();
 		oSettingsPanel = new VBox({ visible: false });
+		if (oData.type === "destination") {
+			return oSettingsPanel;
+		}
 		var oBox = new VBox().addStyleClass("commonSettings");
 		oSettingsPanel.addItem(oBox);
 		oBox.addItem(new Title({
@@ -607,6 +678,8 @@ sap.ui.define([
 		});
 		settingsAdminVisibleCKB.addAriaLabelledBy(settingsAdminVisibleLabel);
 		oBox.addItem(new HBox({
+			alignItems: "Start",
+			justifyContent: "SpaceBetween",
 			items: [
 				settingsAdminVisibleLabel,
 				settingsAdminVisibleCKB
@@ -625,6 +698,8 @@ sap.ui.define([
 		});
 		settingsAdminEditCKB.addAriaLabelledBy(settingsAdminEditLabel);
 		oBox.addItem(new HBox({
+			alignItems: "Start",
+			justifyContent: "SpaceBetween",
 			items: [
 				settingsAdminEditLabel,
 				settingsAdminEditCKB
@@ -643,6 +718,8 @@ sap.ui.define([
 		});
 		settingsAdminDYNCKB.addAriaLabelledBy(settingsAdminDYNLabel);
 		oBox.addItem(new HBox({
+			alignItems: "Start",
+			justifyContent: "SpaceBetween",
 			visible: "{= ${currentSettings>allowDynamicValues}!== false}",
 			items: [
 				settingsAdminDYNLabel,
@@ -651,7 +728,7 @@ sap.ui.define([
 		}).addStyleClass("cbrow"));
 
 		//Binding page admin data to table
-		if (oData.values) {
+		if (oData.values && oData.values.item) {
 			var vData;
 			if (oData.values.data) {
 				var sPath = oData.values.data.path,
@@ -676,6 +753,8 @@ sap.ui.define([
 				vData = ObjectPath.get([ePath], oField.getModel().getData());
 			}
 			oBox.addItem(new HBox({
+				alignItems: "Start",
+				justifyContent: "SpaceBetween",
 				visible: "{= ${currentSettings>_next/visible} !== false && ${currentSettings>_next/editable} !== false}",
 				items: [
 					new Label(sParameterId + "_settings_popover_allowselectedvalues_label", {
@@ -717,7 +796,6 @@ sap.ui.define([
 			var pavTable = new Table({
 				id: sParameterId + "_settings_popover_pav_table",
 				mode: "MultiSelect",
-				width: "84%",
 				select: function (oEvent) {
 					onTableSelection(oEvent, sParameterId);
 				},
@@ -726,7 +804,7 @@ sap.ui.define([
 				]
 			}).addStyleClass("tableHdr");
 			var pavItemText = oData.values.item.text,
-			    vModel = new JSONModel(vData);
+				vModel = new JSONModel(vData);
 			pavTable.setModel(vModel);
 			var oTemplate = new ColumnListItem().addStyleClass("pavlistItem");
 			if (vData) {
@@ -744,7 +822,6 @@ sap.ui.define([
 			var oScrollContainer = new ScrollContainer({
 				id: sParameterId + "_settings_popover_scroll_container",
 				height: "125px",
-				width: "94%",
 				vertical: true,
 				horizontal: false,
 				visible: "{= ${currentSettings>_next/visible} !== false && ${currentSettings>_next/editable} !== false}",
@@ -756,6 +833,196 @@ sap.ui.define([
 		return oSettingsPanel;
 	}
 
+	function createTransformPanel(oData, oField) {
+		oTransformPanel = new VBox({ visible: false });
+		if (oData.type !== "destination") {
+			return oTransformPanel;
+		}
+		var oLabel = new Label({
+			text: oResourceBundle.getText("EDITOR_MORE_TRANSFORM_P_ADMIN_LABEL"),
+			wrapping: true
+		});
+		var oLabelValue = new Input({
+			id: oField.getAssociation("_editor") + "_" + oField.getParameterKey() + ".toParameter_label",
+			value: "{/configuration/label}"
+		});
+		oLabelValue.addAriaLabelledBy(oLabel);
+		var valueLabel = new Label({
+			text: oResourceBundle.getText("EDITOR_MORE_TRANSFORM_P_ADMIN_MAPPINGS"),
+			wrapping: true
+		});
+
+		var iPositionCount = 1,
+			oDestinationList = deepClone(oField.getModel("destinations").getData()._values),
+			oPageAdminNewDestinationParameter = oData._next ? oData._next.pageAdminNewDestinationParameter : undefined;
+		if (!oField._oValue) {
+			var oValues = oPageAdminNewDestinationParameter ? oPageAdminNewDestinationParameter.configuration.values.data.json.values : [];
+
+			if (Array.isArray(oValues) && oValues.length > 0) {
+				// add uuid and position for each result in value, and mark them as selected
+				oValues.forEach(function (oValueItem) {
+					oValueItem.label = oValueItem.label || oValueItem.name;
+					oValueItem._dt = {
+						_uuid: Utils.generateUuidV4(),
+						_position: iPositionCount
+					};
+					iPositionCount++;
+				});
+			} else {
+				var oSelectedDestinationItem = oField.getAggregation("_field").getSelectedItem();
+				var sPath = oSelectedDestinationItem ? oSelectedDestinationItem.getBindingContext("destinations").getPath() : undefined;
+				if (sPath) {
+					var oDestination =  deepClone(oSelectedDestinationItem.getModel("destinations").getProperty(sPath));
+					oDestination.label = oDestination.label || oDestination.name;
+					oDestination._dt = {
+						_uuid: Utils.generateUuidV4(),
+						_position: iPositionCount
+					};
+					oValues = [
+						oDestination
+					];
+				}
+			}
+			oField._oValue = {
+				value: oValues
+			};
+		} else {
+			// add uuid and position for each result in value, and mark them as selected
+			oField._oValue.value.forEach(function (oValueItem) {
+				oValueItem._dt = oValueItem._dt || {};
+				var oValueCloned = deepClone(oValueItem);
+				delete oValueCloned._dt;
+				if (typeof oValueCloned === "object" && !deepEqual(oValueCloned, {})) {
+					oValueItem.label = oValueCloned.label || oValueCloned.name;
+				}
+			});
+		}
+		var oModel = new JSONModel(oField._oValue);
+
+		oField._oDestinationValueObjectConfig = {
+			"label": "Destination Mappings",
+			"type": "object[]",
+			"values": {
+				"data": {
+					"path": "/value"
+				},
+				"allowAdd": true
+			},
+			"showSelectionColumn": false,
+			"properties": {
+				"label": {
+					"label": "Label",
+					"column": {
+						"width": "50%"
+					},
+					"cell": {
+						"text": "{label}",
+						"editable": true
+					}
+				},
+				"name": {
+					"label": "Name",
+					"column": {
+						"width": "50%"
+					},
+					"cell": {
+						"type": "string",
+						"values": {
+							"data": {
+								"json": oDestinationList,
+								"path": "/"
+							},
+							"item": {
+								"text": "{settings>name}",
+								"key": "{settings>name}"
+							},
+							"sorter": "name"
+						},
+						"change": function(oEvent) {
+							var oControl = oEvent.getSource();
+							var oObject = oControl.getBindingContext().getObject();
+							// if label is undefined, set its value to name value
+							if (oObject && !oObject.label && oObject.name) {
+								oObject.label = oObject.name;
+							}
+						}
+					}
+				}
+			},
+			"value": oField._oValue.value
+		};
+		var oValueField = new ObjectListField(oField.getAssociation("_editor") + "_" + oField.getParameterKey() + ".toParameter_field", {
+			configuration: oField._oDestinationValueObjectConfig,
+			allowPopover: false,
+			parameterKey: oField.getParameterKey() + ".toParameter",
+			objectBindings: {
+				currentSettings: {
+					path: "currentSettings>/"
+				}
+			}
+		});
+		oValueField.setAssociation("_editor", oField.getAssociation("_editor"));
+		oValueField.setModel(oModel);
+		oValueField.setModel(new JSONModel(oField._oDestinationValueObjectConfig), "currentSettings");
+
+		var oForm = new SimpleForm({
+			layout: "ResponsiveGridLayout",
+			labelSpanXL: 4,
+			labelSpanL: 4,
+			labelSpanM: 4,
+			//labelSpanS: "{= ${/editMode} === 'Properties' ? 4 : 12}",
+			labelSpanS: 12,
+			emptySpanXL: 1,
+			emptySpanL: 1,
+			emptySpanM: 1,
+			emptySpanS: 0,
+			columnsXL: 1,
+			columnsL: 1,
+			columnsM: 1,
+			content: [
+				oLabel,
+				oLabelValue,
+				valueLabel,
+				oValueField
+			]
+		});
+
+		/*
+		_oRelatedParameterListPage.addContent();
+		*/
+		if (!oField._oNewParameter) {
+			oField._oNewParameter = {
+				"parameter": oField.getParameterKey() + ".toParameter",
+				"configuration": {
+					"label": oData.label,
+					"manifestpath": oData.manifestpath,
+					"type": "string",
+					"visible": true,
+					"editable": true,
+					"values": {
+						"data": {
+							"path": "/values"
+						},
+						"item": {
+							"text": "{label}",
+							"key": "{name}"
+						}
+					},
+					"parameterFromDestination": true
+				}
+			};
+			if (oPageAdminNewDestinationParameter) {
+				delete oPageAdminNewDestinationParameter.configuration.values.data.json;
+				oField._oNewParameter = Object.assign(oField._oNewParameter, oPageAdminNewDestinationParameter);
+			}
+		}
+		var oFormModel = new JSONModel(oField._oNewParameter);
+		oForm.setModel(oFormModel);
+		oTransformPanel.addItem(oForm);
+
+		return oTransformPanel;
+	}
+
 	function onMultiSelectionClick(sParameterId) {
 		var oTable = Core.byId(sParameterId + "_settings_popover_pav_table"),
 		    oResetBtn = Core.byId(sParameterId + "_settings_popover_reset_btn"),
@@ -883,6 +1150,7 @@ sap.ui.define([
 			oSettingsButton: oSettingsButton,
 			oDynamicPanel: oDynamicPanel,
 			oSettingsPanel: oSettingsPanel,
+			oTransformPanel: oTransformPanel,
 			oCurrentModel: oCurrentModel,
 			updateCurrentValue: updateCurrentValue,
 			oCurrentInstance: oCurrentInstance,

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

@@ -374,6 +374,7 @@
 
 .sapUiIntegrationFieldSettings .SettingsPAVTable {
 	margin-left: 1rem;
+	width: calc(100% - 2rem) !important;
 }
 
 .tableHdr .sapMListTblHeaderCell {
@@ -436,6 +437,12 @@
 	margin: 0 0.3rem;
 }
 
+/* Image Select */
+.sapUiIntegrationImageSelect .image {
+	max-height: 30em;
+	max-width: 20em;
+}
+
 /* Icon Select */
 .sapUiIntegrationIconSelectList li[aria-posinset] IMG.sapMSelectListItemIcon {
 	width: 1.1rem;