@openui5/sap.ui.layout 1.116.0 → 1.117.0

package/src/sap/ui/layout/form/FormElement.js

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.0
 	 *
 	 * @constructor
 	 * @public
@@ -312,12 +312,12 @@ sap.ui.define([
 	 *
 	 * @param {boolean} bEditable Editable state of the <code>Form</code>
 	 * @protected
-	 * @restricted sap.ui.layout.form.FormContainer
+	 * @ui5-restricted sap.ui.layout.form.FormContainer
 	 * @since 1.74.0
 	 */
 	FormElement.prototype._setEditable = function(bEditable) {
 
-		var bOldEditable = this.getProperty("_editable");
+		var bOldEditable = this._getEditable();
 		this.setProperty("_editable", bEditable, true); // do not invalidate whole FormElement
 
 		if (bEditable !== bOldEditable) {
@@ -326,6 +326,22 @@ sap.ui.define([
 
 	};
 
+	/**
+	 * Gets the editable state of the <code>FormElement</code>.
+	 *
+	 * This must only be called from the <code>Form</code> and its <code>FormLayout</code>.
+	 *
+	 * @returns {boolean} Editable state of the <code>Form</code>
+	 * @protected
+	 * @ui5-restricted sap.ui.layout.form.FormLayout
+	 * @since 1.117.0
+	 */
+	FormElement.prototype._getEditable = function() {
+
+		return this.getProperty("_editable");
+
+	};
+
 	/**
 	 * Labels inside of a Form must be invalidated if "editable" changed on Form
 	 * @protected
@@ -453,7 +469,7 @@ sap.ui.define([
 			}
 
 			var oFormElement = this.getParent();
-			return !oFormElement.getProperty("_editable");
+			return !oFormElement._getEditable();
 		}
 
 		return false;

package/src/sap/ui/layout/form/FormLayout.js

@@ -36,7 +36,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.0
 	 *
 	 * @constructor
 	 * @public
@@ -84,10 +84,14 @@ sap.ui.define([
 			jQuery(oControl.getFocusDomRef()).data("sap.InNavArea", true);
 		}
 
-		// In the visual designed layouts, the controls should have the size of the Form cells to align
-		// -> The width must be set to 100% (if no other width set)
-		if (oControl.getWidth && ( !oControl.getWidth() || oControl.getWidth() == "auto" ) &&
+		if (this.renderControlsForSemanticElement() && oFormElement.isA("sap.ui.layout.form.SemanticFormElement") && !oFormElement._getEditable()) {
+			// If in SemanticFormElement in display mode controls are not concatenated but rendered as they are devided by delemitters they need to keep their own size,
+			// but must not be larger than the available space.
+			oControl.$().css("max-width", "100%");
+		} else if (oControl.getWidth && ( !oControl.getWidth() || oControl.getWidth() == "auto" ) &&
 				(!oControl.getFormDoNotAdjustWidth || !oControl.getFormDoNotAdjustWidth())) {
+			// In the visual designed layouts, the controls should have the size of the Form cells to align
+			// -> The width must be set to 100% (if no other width set)
 			oControl.$().css("width", "100%");
 		}
 
@@ -929,36 +933,53 @@ sap.ui.define([
 	};
 
 	/**
-	 * In <code>sap.ui.layout.form.SemanticFormElement</> delimiters are rendered.
-	 * They should use only a small space. So <code>Layout</code> dependent <code>LayoutData</code>
+	 * In {@link sap.ui.layout.SemanticFormElement SemanticFormElement}, delimiters are rendered.
+	 * They should use only a small space. So <code>Layout</code>-dependent <code>LayoutData</code>
 	 * are needed.
 	 *
-	 * This function need to be implemented by the specific <code>Layout</code>.
+	 * This function needs to be implemented by the specific <code>Layout</code>.
 	 *
 	 * @return {sap.ui.core.LayoutData | Promise} LayoutData or promise retuning LayoutData
-	 * @private
+	 * @protected
 	 * @since: 1.86.0
 	 */
 	FormLayout.prototype.getLayoutDataForDelimiter = function() {
 	};
 
 	/**
-	 * In <code>sap.ui.layout.form.SemanticFormElement</> delimiters are rendered.
+	 * In {@link sap.ui.layout.SemanticFormElement SemanticFormElement}, delimiters are rendered.
 	 * The fields should be rendered per default in a way, the field and the corresponding delimiter filling one row in
 	 * phone mode. In desktop mode they should all be in one row.
 	 *
-	 * This function need to be implemented by the specific <code>Layout</code>.
+	 * This function needs to be implemented by the specific <code>Layout</code>.
 	 *
 	 * @param {int} iFields Number of field in the <code>SemanticFormElement</code>
 	 * @param {int} iIndex Index of field in the <code>SemanticFormElement</code>
 	 * @param {sap.ui.core.LayoutData} [oLayoutData] existing <code>LayoutData</code> that might be just changed
 	 * @return {sap.ui.core.LayoutData | Promise} LayoutData or promise retuning LayoutData
-	 * @private
+	 * @protected
 	 * @since: 1.86.0
 	 */
 	FormLayout.prototype.getLayoutDataForSemanticField = function(iFields, iIndex, oLayoutData) {
 	};
 
+	/**
+	 * For {@link sap.ui.layout.SemanticFormElement SemanticFormElement}, all text-based controls should be concatenated in display mode.
+	 * If the <code>Layout</code> supports rendering of single controls, they are rendered divided by delimiters.
+	 * If the <code>Layout</code> doesn't support this, one concatenated text is rendered. Here only text is supported, no links or other special rendering.
+	 *
+	 * This function needs to be implemented by the specific <code>Layout</code>.
+	 *
+	 * @return {boolean} <code>true</code> if layout allows to render single controls for {@link sap.ui.layout.SemanticFormElement SemanticFormElement}
+	 * @protected
+	 * @since: 1.117.0
+	 */
+	FormLayout.prototype.renderControlsForSemanticElement = function() {
+
+		return false;
+
+	};
+
 	/**
 	 * Determines the sizes for <code>Form</code> and <code>FormContainer</code> from the theme
 	 *

package/src/sap/ui/layout/form/FormLayoutRenderer.js

@@ -126,7 +126,11 @@ sap.ui.define([
 		var aElements = oContainer.getVisibleFormElements();
 		for (var j = 0, jl = aElements.length; j < jl; j++) {
 			var oElement = aElements[j];
-			this.renderElement(rm, oLayout, oElement);
+			if (oElement.isA("sap.ui.layout.form.SemanticFormElement") && !oElement._getEditable()) {
+				this.renderSemanticElement(rm, oLayout, oElement);
+			} else {
+				this.renderElement(rm, oLayout, oElement);
+			}
 		}
 
 		if (bExpandable) {
@@ -162,6 +166,13 @@ sap.ui.define([
 
 	};
 
+	FormLayoutRenderer.renderSemanticElement = function(rm, oLayout, oElement){
+
+		// just render like standard Element as default
+		this.renderElement(rm, oLayout, oElement);
+
+	};
+
 	/**
 	 * Renders the title for a <code>Form</code> or a <code>FormContainer</code>
 	 *

package/src/sap/ui/layout/form/GridContainerData.js

@@ -22,7 +22,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.LayoutData
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/layout/form/GridElementData.js

@@ -22,7 +22,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.LayoutData
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/layout/form/GridLayout.js

@@ -28,7 +28,7 @@ sap.ui.define(['sap/ui/layout/library', './FormLayout', './GridLayoutRenderer'],
 	 * @extends sap.ui.layout.form.FormLayout
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/layout/form/ResponsiveGridLayout.js

@@ -53,7 +53,7 @@ sap.ui.define([
 	 *
 	 * This control cannot be used stand-alone, it just renders a <code>Form</code>, so it must be assigned to a <code>Form</code> using the <code>layout</code> aggregation.
 	 * @extends sap.ui.layout.form.FormLayout
-	 * @version 1.116.0
+	 * @version 1.117.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/layout/form/ResponsiveLayout.js

@@ -50,7 +50,7 @@ sap.ui.define([
 	 * @extends sap.ui.layout.form.FormLayout
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/layout/form/SemanticFormElement.js

@@ -30,7 +30,7 @@ sap.ui.define([
 	 * @extends sap.ui.layout.form.FormElement
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.0
 	 *
 	 * @constructor
 	 * @public
@@ -83,7 +83,8 @@ sap.ui.define([
 
 		this._oObserver.observe(this, {
 			properties: ["_editable", "delimiter"],
-			aggregations: ["fieldLabels"]
+			aggregations: ["fieldLabels"],
+			parent: true
 		});
 
 	};
@@ -101,7 +102,7 @@ sap.ui.define([
 
 		var aDelimiters = this.getAggregation("delimiters", []);
 		if (aDelimiters.indexOf(oElement) < 0) {
-			if (this.getProperty("_editable")) {
+			if (!_renderAsText.call(this)) {
 				// assign label texts in in edit mode
 				var iIndex = this.indexOfField(oElement);
 				if (iIndex >= 0) {
@@ -180,7 +181,15 @@ sap.ui.define([
 			_updateLayoutData.call(this); // as Layout might be set after Fields, so LayoutData can only be determined now
 		}
 
-		if (this.getProperty("_editable")) {
+		if (!_renderAsText.call(this)) {
+			if (this.getAggregation("_displayField")) {
+				// switch to control mode missing, this could happen if something unexpected chaged on field what leads to update of getFormRenderAsControl
+				// (happens if the change is not observed because of missing property in getFormObservingProperties or some internal change)
+				// -> update now, even if it is somehow late and could lead to re-rendering
+				this.destroyAggregation("_displayField");
+				_updateControlsForEdit.call(this);
+			}
+
 			var aFields = this.getFields();
 			var aDelemiters = this.getAggregation("_delimiters", []);
 			for (var i = 0; i < aFields.length; i++) {
@@ -193,6 +202,15 @@ sap.ui.define([
 				}
 			}
 		} else {
+			if (!this.getAggregation("_displayField")) {
+				// switch to display mode missing, this could happen if something unexpected chaged on field what leads to update of getFormRenderAsControl
+				// (happens if the change is not observed because of missing property in getFormObservingProperties or some internal change)
+				// -> update now, even if it is somehow late and could lead to re-rendering
+				this.destroyAggregation("_delimiters");
+				this._bLayoutDataCreated = false;
+				_updateControlsForDisplay.call(this);
+			}
+
 			var oDisplay = this.getAggregation("_displayField");
 			if (oDisplay) {
 				aFieldsForRendering.push(oDisplay);
@@ -213,7 +231,9 @@ sap.ui.define([
 
 		if (oChanges.object === this) {
 			// it's the FormElement
-			if (oChanges.name === "fields") {
+			if (oChanges.type === "parent") {
+				_parentChanged.call(this, oChanges.mutation, oChanges.parent);
+			} else if (oChanges.name === "fields") {
 				_fieldChanged.call(this, oChanges.child, oChanges.mutation);
 			} else if (oChanges.name === "_editable") {
 				_editableChanged.call(this, oChanges.current);
@@ -223,8 +243,12 @@ sap.ui.define([
 				_fieldLabelsChanged.call(this, oChanges.mutation, oChanges.child);
 			}
 		} else {
-			// it's some content control
-			if (oChanges.object.isA("sap.ui.core.Label")) {
+			// it's some content control or parent
+			if (oChanges.type === "parent") {
+				_parentChanged.call(this, oChanges.mutation, oChanges.parent);
+			} else if (oChanges.name === "layout") {
+				_layoutChanged.call(this, oChanges.child, oChanges.mutation);
+			} else if (oChanges.object.isA("sap.ui.core.Label")) {
 				_fieldLabelChanged.call(this, oChanges);
 			} else {
 				_controlChanged.call(this, oChanges);
@@ -240,9 +264,12 @@ sap.ui.define([
 		if (bEditable) {
 			this.destroyAggregation("_displayField");
 			_updateControlsForEdit.call(this);
-		} else {
+		} else if (_renderAsText.call(this)) {
 			this.destroyAggregation("_delimiters");
+			this._bLayoutDataCreated = false;
 			_updateControlsForDisplay.call(this);
+		} else { // switched to display mode but render controls -> update delemitters with spacing
+			_updateControlsForEdit.call(this);
 		}
 
 	}
@@ -254,8 +281,13 @@ sap.ui.define([
 				throw new Error(oField + " is not valid Form content. " + this); // only support allowed Fields
 			}
 			var aProperties = ["visible"];
+			if (oField.getFormObservingProperties) {
+				aProperties = aProperties.concat(oField.getFormObservingProperties());
+			}
 			if (oField.getFormValueProperty) {
+				if (aProperties.indexOf(oField.getFormValueProperty()) === -1) {
 					aProperties.push(oField.getFormValueProperty());
+				}
 			} else if (oField.getMetadata().getProperty("value")) {
 				aProperties.push("value");
 			} else if (oField.getMetadata().getProperty("text")) {
@@ -273,7 +305,7 @@ sap.ui.define([
 			}
 		}
 
-		if (this.getProperty("_editable")) {
+		if (!_renderAsText.call(this)) {
 			_updateControlsForEdit.call(this);
 		} else {
 			_updateControlsForDisplay.call(this, true);
@@ -285,7 +317,7 @@ sap.ui.define([
 
 	function _delimiterChanged(sDelimiter) {
 
-		if (this.getProperty("_editable")) {
+		if (!_renderAsText.call(this)) {
 			_updateControlsForEdit.call(this);
 		} else {
 			_updateDisplayText.call(this, false);
@@ -315,13 +347,14 @@ sap.ui.define([
 	function _controlChanged(oChanges) {
 
 		var sProperyName = oChanges.object.getFormValueProperty ? oChanges.object.getFormValueProperty() : null;
+		var aObservingProperties = oChanges.object.getFormObservingProperties ? oChanges.object.getFormObservingProperties() : [];
 		if (oChanges.name === sProperyName || oChanges.name === "value" || oChanges.name === "text") {
 			// update display control
-			if (!this.getProperty("_editable")) {
+			if (_renderAsText.call(this)) {
 				_updateDisplayText.call(this, false);
 			}
-		} else if (oChanges.name === "visible") {
-			if (this.getProperty("_editable")) {
+		} else if (oChanges.name === "visible" || aObservingProperties.indexOf(oChanges.name) >= 0) {
+			if (!_renderAsText.call(this)) {
 				_updateControlsForEdit.call(this);
 			} else {
 				_updateControlsForDisplay.call(this, true);
@@ -342,26 +375,31 @@ sap.ui.define([
 	function _updateControlsForEdit() {
 
 		var aFields = this.getFields();
-		var aDelemiters = this.getAggregation("_delimiters", []);
+		var aDelimiters = this.getAggregation("_delimiters", []);
 		var sDelimiter = this.getDelimiter();
 		var sId = this.getId() + "-delimiter-";
 		var i = 0;
 
+		if (!this._getEditable()) {
+			sDelimiter = " " + sDelimiter + " "; // use Space to align spacing with concatenated texts
+		}
+
 		for (i = 0; i < aFields.length; i++) {
 			if (i < aFields.length - 1) {
-				if (aDelemiters.length > i) {
-					library.form.FormHelper.updateDelimiter(aDelemiters[i], sDelimiter);
+				if (aDelimiters.length > i) {
+					library.form.FormHelper.updateDelimiter(aDelimiters[i], sDelimiter);
 				} else {
 					var oDelimiter = library.form.FormHelper.createDelimiter(sDelimiter, sId + i);
+					oDelimiter.addStyleClass("sapUiFormDelimiter");
 					this.addAggregation("_delimiters", oDelimiter);
 				}
 			}
 		}
 
 		// remove unused delimiters
-		if (aDelemiters.length > 0 && aDelemiters.length > aFields.length - 1) {
-			for (i = aFields.length - 1; i < aDelemiters.length; i++) {
-				aDelemiters[i].destroy();
+		if (aDelimiters.length > 0 && aDelimiters.length > aFields.length - 1) {
+			for (i = aFields.length - 1; i < aDelimiters.length; i++) {
+				aDelimiters[i].destroy();
 			}
 		}
 
@@ -499,7 +537,7 @@ sap.ui.define([
 			return;
 		}
 
-		if (this.getProperty("_editable")) {
+		if (this._getEditable()) {
 			// delimiters
 			for (i = 0; i < aDelemiters.length; i++) {
 				var oDelimiter = aDelemiters[i];
@@ -548,6 +586,65 @@ sap.ui.define([
 
 	}
 
+	function _renderAsText() {
+
+		if (this._getEditable()) {
+			return false;
+		} else {
+			var aFields = this.getFields();
+			var bRenderAsControl = true;
+
+			for (var i = 0; i < aFields.length; i++) {
+				if (!aFields[i].getFormRenderAsControl || !aFields[i].getFormRenderAsControl()) {
+					bRenderAsControl = false;
+					break;
+				}
+			}
+
+			var oFormContainer = this.getParent();
+			var oForm = oFormContainer && oFormContainer.getParent();
+			var oLayout = oForm && oForm.getLayout();
+			var bRenderControls = oLayout ? oLayout.renderControlsForSemanticElement() : true; // if no layout assigned right now render as controls per default
+			return !(bRenderAsControl && bRenderControls);
+		}
+
+	}
+
+	function _parentChanged(sMutation, oParent) {
+
+		var oLayout;
+		if (sMutation === "set") {
+			var oForm;
+			if (oParent.isA("sap.ui.layout.form.FormContainer")) {
+				this._oObserver.observe(oParent, {
+					parent: true
+				});
+				oForm = oParent.getParent();
+			} else if (oParent.isA("sap.ui.layout.form.Form")) {
+				this._oObserver.observe(oParent, {
+					aggregations: ["layout"]
+				});
+				oForm = oParent;
+			}
+			oLayout = oForm && oForm.getLayout();
+		} else if (oParent.isA("sap.ui.layout.form.FormContainer") || oParent.isA("sap.ui.layout.form.Form")) {
+			this._oObserver.unobserve(oParent);
+		}
+
+		if (oLayout) { // as long as we have no layout no update needed
+			_layoutChanged.call(this, oLayout);
+		}
+
+	}
+
+	function _layoutChanged(oLayout, sMutation) {
+
+		// as layout change could lead to change of rendering mode (layout might not support to render controls) mode needs to be checked
+		_editableChanged.call(this, this._getEditable());
+		_updateLayoutData.call(this);
+
+	}
+
 	return SemanticFormElement;
 
 });

package/src/sap/ui/layout/form/SimpleForm.js

@@ -8,19 +8,17 @@
 sap.ui.define([
 	'sap/ui/core/Control',
 	'sap/ui/base/ManagedObjectObserver',
-	'sap/ui/core/ResizeHandler',
 	'sap/ui/layout/library',
 	'./Form',
 	'./FormContainer',
 	'./FormElement',
 	'./FormLayout',
 	'./SimpleFormRenderer',
-	"sap/base/Log",
-	"sap/ui/thirdparty/jquery"
+	'sap/base/Log',
+	'sap/ui/thirdparty/jquery'
 ], function(
 	Control,
 	ManagedObjectObserver,
-	ResizeHandler,
 	library,
 	Form,
 	FormContainer,
@@ -45,6 +43,8 @@ sap.ui.define([
 	var GridContainerData;
 	var GridElementData;
 	var ColumnLayout;
+	var ResizeHandler;
+
 
 	/**
 	 * Constructor for a new sap.ui.layout.form.SimpleForm.
@@ -67,7 +67,7 @@ sap.ui.define([
 	 * <b>Note:</b> If a more complex form is needed, use the <code>{@link sap.ui.layout.form.Form Form}</code> control instead.
 	 *
 	 * @extends sap.ui.core.Control
-	 * @version 1.116.0
+	 * @version 1.117.0
 	 *
 	 * @constructor
 	 * @public
@@ -96,6 +96,7 @@ sap.ui.define([
 				 * irrespective of whether a <code>width</code> is reached or the available parents width is reached.
 				 *
 				 * <b>Note:</b> This property is only used if a <code>ResponsiveLayout</code> is used as a layout.
+				 * @deprecated As of version 1.93, use another <code>Layout</code>
 				 */
 				minWidth : {type : "int", group : "Appearance", defaultValue : -1},
 
@@ -125,6 +126,7 @@ sap.ui.define([
 				 * Specifies the min-width in pixels of the label in all form rows.
 				 *
 				 * <b>Note:</b> This property is only used if a <code>ResponsiveLayout</code> is used as a layout.
+				 * @deprecated As of version 1.93, use another <code>Layout</code>
 				 */
 				labelMinWidth : {type : "int", group : "Misc", defaultValue : 192},
 
@@ -136,9 +138,11 @@ sap.ui.define([
 				 *
 				 * <b>Note</b> If possible, set the <code>layout</code> before adding content to prevent calculations for the default layout.
 				 *
-				 * <b>Note</b> The <code>ResponsiveLayout</code> has been deprecated and must no longer be used. For compatibility reasons the default could not be changed.
+				 * <b>Note</b> The <code>ResponsiveLayout</code> has been deprecated and must no longer be used.
+				 *
+				 * <b>Note</b> As of version 1.117, the <code>ResponsiveGridLayout</code> is used as default.
 				 */
-				layout : {type : "sap.ui.layout.form.SimpleFormLayout", group : "Misc", defaultValue : SimpleFormLayout.ResponsiveLayout},
+				layout : {type : "sap.ui.layout.form.SimpleFormLayout", group : "Misc", defaultValue : SimpleFormLayout.ResponsiveGridLayout},
 
 				/**
 				 * Default span for labels in extra large size.
@@ -478,7 +482,7 @@ sap.ui.define([
 				(!this._bColumnLayoutRequested && sLayout === SimpleFormLayout.ColumnLayout)) {
 			// if Layout is still loaded do it after it is loaded
 			var bLayout = true;
-			if (!oForm.getLayout()) {
+			if (!oForm.getLayout()) { // default layout used -> as we don't know if layout will be set it must latest be created on rendering
 				bLayout = _setFormLayout.call(this);
 			}
 
@@ -496,8 +500,10 @@ sap.ui.define([
 			this.$().css("visibility", "hidden"); //avoid that a wrong layouting is visible
 			this._applyLinebreaks();
 
-			//attach the resize handler
-			this._sResizeListenerId = ResizeHandler.register(this.getDomRef(),  jQuery.proxy(this._resize, this));
+			//attach the resize handler (only if layout an ResizeHandler already loaded)
+			if (!this._bResponsiveLayoutRequested && ResizeHandler) {
+				this._sResizeListenerId = ResizeHandler.register(this.getDomRef(),  jQuery.proxy(this._resize, this));
+			}
 			this._bChangedByMe = false;
 		}
 
@@ -1109,13 +1115,14 @@ sap.ui.define([
 	SimpleForm.prototype.setLayout = function(sLayout) {
 
 		var sOldLayout = this.getLayout();
+		var bDefault = this.isPropertyInitial("layout"); // if default is used and layout not defined setLayout is not called
 		if (sLayout != sOldLayout) {
 			_removeOldLayoutData.call(this);
 		}
 
 		this.setProperty("layout", sLayout);
 
-		if (sLayout != sOldLayout) {
+		if (sLayout != sOldLayout || bDefault) { // Layout changed or default set explicit -> we know what layout is used and can create the Control
 			var bSet = _setFormLayout.call(this);
 
 			if (bSet) {
@@ -1177,12 +1184,14 @@ sap.ui.define([
 
 			switch (this.getLayout()) {
 			case SimpleFormLayout.ResponsiveLayout:
-				if ((!ResponsiveLayout || !ResponsiveFlowLayoutData) && !this._bResponsiveLayoutRequested) {
+				if ((!ResponsiveLayout || !ResponsiveFlowLayoutData || !ResizeHandler) && !this._bResponsiveLayoutRequested) {
 					ResponsiveLayout = sap.ui.require("sap/ui/layout/form/ResponsiveLayout");
 					ResponsiveFlowLayoutData = sap.ui.require("sap/ui/layout/ResponsiveFlowLayoutData");
-					if (!ResponsiveLayout || !ResponsiveFlowLayoutData) {
+					ResizeHandler = sap.ui.require("sap/ui/core/ResizeHandler");
+					if (!ResponsiveLayout || !ResponsiveFlowLayoutData || !ResizeHandler) {
 						sap.ui.require(["sap/ui/layout/form/ResponsiveLayout",
-						                "sap/ui/layout/ResponsiveFlowLayoutData"],
+						                "sap/ui/layout/ResponsiveFlowLayoutData",
+										"sap/ui/core/ResizeHandler"],
 						                _ResponsiveLayoutLoaded.bind(this));
 						this._bResponsiveLayoutRequested = true;
 					}
@@ -1246,14 +1255,18 @@ sap.ui.define([
 
 	}
 
-	function _ResponsiveLayoutLoaded(fnResponsiveLayout, fnResponsiveFlowLayoutData) {
+	function _ResponsiveLayoutLoaded(fnResponsiveLayout, fnResponsiveFlowLayoutData, fnResizeHandler) {
 
 		ResponsiveLayout = fnResponsiveLayout;
 		ResponsiveFlowLayoutData = fnResponsiveFlowLayoutData;
+		ResizeHandler = fnResizeHandler;
 		this._bResponsiveLayoutRequested = false;
 
 		if (this.getLayout() == SimpleFormLayout.ResponsiveLayout) { // as layout might changed
 			_updateLayoutAfterLoaded.call(this);
+			if (this.getDomRef() && !this._sResizeListenerId) { // register resize handler after layout and ResizeHandler is loaded
+				this._sResizeListenerId = ResizeHandler.register(this.getDomRef(),  jQuery.proxy(this._resize, this));
+			}
 		}
 
 	}

package/src/sap/ui/layout/library.js

@@ -20,13 +20,13 @@ sap.ui.define([
 	 * @namespace
 	 * @alias sap.ui.layout
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.0
 	 * @since 1.15
 	 * @public
 	 */
 	var thisLib = sap.ui.getCore().initLibrary({
 		name : "sap.ui.layout",
-		version: "1.116.0",
+		version: "1.117.0",
 		dependencies: ["sap.ui.core"],
 		designtime: "sap/ui/layout/designtime/library.designtime",
 		types: [

package/src/sap/ui/layout/themes/base/FormLayout.less

@@ -111,4 +111,9 @@
 .sapUiSizeCompact .sapUiFormContainerTitle > .sapUiFormTitle {
 	height: 2rem;
 	line-height: 2rem;
+}
+
+/* SemanticFormElement */
+.sapUiForm .sapUiFormDelimiter { /* add Form class to make sure to overwrite sapMText setting */
+	white-space: pre-wrap; /* To render whitespaces in display mode if controls are rendered */
 }

package/ui5.yaml

@@ -1,5 +1,5 @@
 ---
-specVersion: "2.4"
+specVersion: "3.0"
 type: library
 metadata:
   name: sap.ui.layout