@sapui5/sap.suite.ui.commons 1.106.0 → 1.107.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sapui5/sap.suite.ui.commons",
-  "version": "1.106.0",
+  "version": "1.107.0",
   "description": "SAPUI5 Library sap.suite.ui.commons",
   "homepage": "https://sap.github.io/ui5-tooling/pages/SAPUI5/",
   "author": "SAP SE (https://www.sap.com)",

package/src/sap/suite/ui/commons/.library

@@ -7,7 +7,7 @@
 		SAP UI development toolkit for HTML5 (SAPUI5)
 		(c) Copyright 2009-2015 SAP SE. All rights reserved
 	</copyright>
-	<version>1.106.0</version>
+	<version>1.107.0</version>
 
 	<documentation>SAP UI library: sap.suite.ui.commons</documentation>
 

package/src/sap/suite/ui/commons/AriaProperties.js

@@ -19,7 +19,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.106.0
+	 * @version 1.107.0
 	 * @since 1.65.0
 	 *
 	 * @constructor

package/src/sap/suite/ui/commons/CalculationBuilder.js

@@ -124,7 +124,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.106.0
+	 * @version 1.107.0
 	 * @since 1.56.0
 	 *
 	 * @constructor

package/src/sap/suite/ui/commons/CalculationBuilderExpression.js

@@ -111,7 +111,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.106.0
+	 * @version 1.107.0
 	 * @since 1.56.0
 	 *
 	 * @constructor

package/src/sap/suite/ui/commons/CalculationBuilderFunction.js

@@ -18,7 +18,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.106.0
+	 * @version 1.107.0
 	 * @since 1.56.0
 	 *
 	 * @constructor
@@ -85,7 +85,8 @@ sap.ui.define([
 					singularName: "item"
 				}
 			}
-		}
+		},
+		renderer: null // this control has no own renderer, it is rendered by the CalculationBuilder
 	});
 
 	CalculationBuilderFunction.prototype._getLabel = function () {

package/src/sap/suite/ui/commons/CalculationBuilderGroup.js

@@ -15,7 +15,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.106.0
+	 * @version 1.107.0
 	 * @since 1.60.0
 	 *
 	 * @constructor

package/src/sap/suite/ui/commons/CalculationBuilderItem.js

@@ -30,7 +30,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.106.0
+	 * @version 1.107.0
 	 * @since 1.56.0
 	 *
 	 * @constructor

package/src/sap/suite/ui/commons/CalculationBuilderValidationResult.js

@@ -1,22 +1,20 @@
 sap.ui.define([
 	"sap/ui/thirdparty/jquery",
-	"./library",
-	"sap/ui/core/Control",
 	"sap/ui/base/ManagedObject"
-], function (jQuery, library, Control, ManagedObject) {
+], function (jQuery, ManagedObject) {
 	"use strict";
 
 	/**
 	 * Constructor for a new validation result.
 	 *
 	 * @class
-	 * This control can be used for creating your own validation algorithm for custom functions.<br>
+	 * This can be used for creating your own validation algorithm for custom functions.<br>
 	 * Custom functions can be defined using {@link sap.suite.ui.commons.CalculationBuilderFunction}.
 	 *
 	 * @extends sap.ui.base.ManagedObject
 	 *
 	 * @author SAP SE
-	 * @version 1.106.0
+	 * @version 1.107.0
 	 * @since 1.56.0
 	 *
 	 * @constructor

package/src/sap/suite/ui/commons/CalculationBuilderVariable.js

@@ -15,7 +15,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.106.0
+	 * @version 1.107.0
 	 * @since 1.56.0
 	 *
 	 * @constructor
@@ -60,7 +60,8 @@ sap.ui.define([
 					singularName: "Item"
 				}
 			}
-		}
+		},
+		renderer: null // this control has no own renderer, it is rendered by the CalculationBuilder
 	});
 
 	CalculationBuilderVariable.prototype._getLabel = function () {

package/src/sap/suite/ui/commons/CloudFileInfo.js

@@ -62,7 +62,7 @@ sap.ui.define([
                 /**
                  * Indicate if an action is a allowed or not
                  */
-                 isDocumentCreationAllowed : {type : "boolean", group : "Data"}
+                isDocumentCreationAllowed : {type : "boolean", group : "Data"}
             }
 		}
 	});

package/src/sap/suite/ui/commons/CloudFilePicker.js

@@ -43,7 +43,10 @@ sap.ui.define([
 	"sap/base/Log",
 	"sap/ui/model/odata/type/DateTimeOffset",
 	"sap/ui/core/Item",
-	"sap/ui/core/SortOrder"
+	"sap/ui/core/SortOrder",
+	"sap/m/IllustratedMessage",
+	"sap/m/IllustratedMessageType",
+	"sap/m/IllustratedMessageSize"
 ], function (
 	Button,
 	Dialog,
@@ -81,7 +84,10 @@ sap.ui.define([
 	Log,
 	DateTimeOffset,
 	Item,
-	SortOrder
+	SortOrder,
+	IllustratedMessage,
+	IllustratedMessageType,
+	IllustratedMessageSize
 ) {
 	"use strict";
 
@@ -90,7 +96,7 @@ sap.ui.define([
 	var ValueState = coreLibrary.ValueState;
 	var FilePickerModes = library.FilePickerModes;
 	var oTableControl, oSelectControl, oBreadcrumbLinkControl, oFileNameControl,
-		aVisibleLinks, oNavigationMap, oConfirmationButton, oNewFolderButton, oNewFolderColumnListItem;
+		aVisibleLinks, oNavigationMap, oConfirmationButton, oNewFolderButton, oNewFolderColumnListItem, oCurrentParentData;
 
 	var oResourceBundle = sap.ui.getCore().getLibraryResourceBundle("sap.suite.ui.commons");
 
@@ -105,7 +111,7 @@ sap.ui.define([
 	 * @class
 	 * @public
 	 * @internal
-	 * @version 1.106.0
+	 * @version 1.107.0
 	*/
 	var CloudFilePicker = Dialog.extend("sap.suite.ui.commons.CloudFilePicker", {
 		metadata: {
@@ -177,14 +183,6 @@ sap.ui.define([
 					type: "boolean",
 					group: "Data",
 					defaultValue: false
-				},
-				/**
-				 * Specifies whether new folder can be created
-				 */
-				enableNewFolderCreation: {
-					type: "boolean",
-					group: "Data",
-					defaultValue: false
 				}
 			},
 			events: {
@@ -297,7 +295,22 @@ sap.ui.define([
 					var mParameters = oEvent.getParameters();
 					if (mParameters.error) {
 						this.setBusy(false);
-						oTableControl.setNoDataText(null);
+						var oMessage = new IllustratedMessage({
+							illustrationType: IllustratedMessageType.ErrorScreen,
+							illustrationSize: IllustratedMessageSize.Spot,
+							enableVerticalResponsiveness: true,
+							title: oResourceBundle.getText("CFP_NO_FILESHARE_FOUND"),
+							description: oResourceBundle.getText("CFP_NO_FILESHARE_FOUND_RELOAD"),
+							additionalContent: [
+								new Button({
+									text: oResourceBundle.getText("CFP_BUTTON_RELOAD"),
+									press: function () {
+										oSelectControl.getBinding("items").refresh();
+									}
+								})
+							]
+						});
+						oTableControl.setNoData(oMessage);
 					} else {
 						if (oEvent.getSource() && oEvent.getSource().getContexts() && oEvent.getSource().getContexts().length) {
 							var sPath = oEvent.getSource().getContexts()[0].sPath;
@@ -380,19 +393,18 @@ sap.ui.define([
 	};
 
 	CloudFilePicker.prototype._createTableContent = function () {
-		if (this.getEnableNewFolderCreation()) {
-			oNewFolderButton = new Button({
-				text: oResourceBundle.getText("CFP_TITLE_NEWFOLDER"),
-				type: ButtonType.Transparent,
-				enabled: false,
-				press: function () {
-					this._createNewFolderInline();
-				}.bind(this)
-			});
-		}
+		oNewFolderButton = new Button({
+			text: oResourceBundle.getText("CFP_TITLE_NEWFOLDER"),
+			type: ButtonType.Transparent,
+			enabled: false,
+			press: function () {
+				this._createNewFolderInline();
+			}.bind(this)
+		});
 		oTableControl = new Table({
 					headerToolbar: new OverflowToolbar({
-					content:	[new Title({text: oResourceBundle.getText("CFP_LIST_HEADER")}),
+					content:[
+								new Title({text: oResourceBundle.getText("CFP_LIST_HEADER")}),
 								new ToolbarSpacer(),
 								new SearchField({
 									layoutData: new OverflowToolbarLayoutData({
@@ -403,8 +415,8 @@ sap.ui.define([
 									}),
 									visible:false
 								}),
-								oNewFolderButton ? oNewFolderButton : null
-								],
+								oNewFolderButton
+							],
 					design: 'Transparent'
 				}),
 				columns: [
@@ -414,7 +426,8 @@ sap.ui.define([
 							key: "bindingProperty",
 							value: 'FileShareItemName'
 						})],
-						width: "auto"
+						width: "auto",
+						importance: "High"
 					}),
 					new Column({
 						hAlign: "Left",
@@ -423,7 +436,8 @@ sap.ui.define([
 							key: "bindingProperty",
 							value: 'FileShareItemContentType'
 						})],
-						width: "17%"
+						width: "17%",
+						importance: "High"
 					}),
 					new Column({
 						header: new Text({text: oResourceBundle.getText("CFP_OWNER")}),
@@ -431,7 +445,9 @@ sap.ui.define([
 							key: "bindingProperty",
 							value: 'CreatedByUser'
 						})],
-						width: "17%"
+						width: "17%",
+						importance: "Low",
+						visible: Device.system.phone ? false : true
 					}),
 					new Column({
 						hAlign: "End",
@@ -440,7 +456,9 @@ sap.ui.define([
 							key: "bindingProperty",
 							value: 'LastChangeDateTime'
 						})],
-						width: "17%"
+						width: "17%",
+						importance: "Low",
+						visible: Device.system.phone ? false : true
 					}),
 					new Column({
 						hAlign: "End",
@@ -449,7 +467,9 @@ sap.ui.define([
 							key: "bindingProperty",
 							value: 'FileShareItemContentSize'
 						})],
-						width: "10%"
+						width: "10%",
+						importance: "Low",
+						visible: Device.system.phone ? false : true
 					})
 				],
 				autoPopinMode: true,
@@ -465,9 +485,9 @@ sap.ui.define([
 					var bIsFolder = oContext.getObject("FileShareItemKind") === "folder";
 					if (bIsFolder) {
 						var oSelectedFolderInfo = this._createSelectionParameter(oSelectedItem);
-						this._resetAndApplyDefaultSorting();
 						var sFileShareItemId = oSelectedFolderInfo.getFileShareItemId();
 						oSelectedFolderInfo.path = oContext.getCanonicalPath();
+						oCurrentParentData = oSelectedFolderInfo;
 						oNavigationMap.set(sFileShareItemId, oSelectedFolderInfo);
 						var oNewContext = oContext
 							.getModel()
@@ -511,13 +531,18 @@ sap.ui.define([
 							new HBox({
 								items: [
 								new Icon({src:{
-									parts: ["FileShareItemKind", "FileShareItemContentType"],
+									parts: ["FileShareItemKind", "FileShareItemContentType", "isDocumentCreationAllowed"],
 									formatter: function (
 										sFileShareItemKind,
-										sFileShareItemContentType
+										sFileShareItemContentType,
+										sIsDocumentCreationAllowed
 									) {
 										if (sFileShareItemKind === "folder") {
-											return "sap-icon://folder-full";
+											if (sIsDocumentCreationAllowed === "No") {
+												return "sap-icon://locked";
+											} else {
+												return "sap-icon://folder-full";
+											}
 										} else {
 											return IconPool.getIconForMimeType(sFileShareItemContentType);
 										}
@@ -547,21 +572,9 @@ sap.ui.define([
 				},
 				updateFinished: function (oEvent) {
 					if (!oTableControl.getBusy()) {
-						var sResolvedPath = oEvent.getSource().getBinding("items").getResolvedPath(), aCurrentPaths = sResolvedPath.split(/[(,=)]/), sCurrentParentFileShareItem;
-						if (aCurrentPaths && aCurrentPaths.length && aCurrentPaths.indexOf("FileShareItem") > -1) {
-							sCurrentParentFileShareItem = aCurrentPaths[aCurrentPaths.indexOf("FileShareItem") + 1].replace(/[']+/g, '');
-						}
-						var oCurrentParentData = oNavigationMap.get(sCurrentParentFileShareItem);
 						if (oCurrentParentData && Object.keys(oCurrentParentData).length !== 0) {
 							this._setConfirmationButtonEnabled(oCurrentParentData.getProperty("isDocumentCreationAllowed"));
-							// New folder creation to be allowed only at child level of a particular drive
-							if (oNewFolderButton) {
-								if (oNavigationMap.size && oCurrentParentData.getProperty("isDocumentCreationAllowed")) {
-									oNewFolderButton.setEnabled(true);
-								} else {
-									oNewFolderButton.setEnabled(false);
-								}
-							}
+							this._enableDisableNewFolderBtn();
 						}
 					}
 				}.bind(this)
@@ -569,7 +582,10 @@ sap.ui.define([
 
 		oTableControl.bActiveHeaders = true;
 		oTableControl.attachEvent("columnPress", function(oEvent) {
-			var oColumn = oEvent.getParameter("column");
+			var oColumn = oEvent.getParameter("column"), sColumnType = oColumn.getCustomData()[0].getValue();
+			if (sColumnType === "CreatedByUser" || sColumnType === "FileShareItemContentSize") {
+				return;
+			}
 			var _aSortButton = [
 				new ColumnPopoverSelectListItem({
 					icon: "sap-icon://sort-ascending",
@@ -655,6 +671,15 @@ sap.ui.define([
 		return !!oDuplicateItem;
 	};
 
+	CloudFilePicker.prototype._enableDisableNewFolderBtn = function () {
+		// New folder creation to be allowed only at child level of a particular drive
+		if (oNavigationMap.size && oCurrentParentData.getProperty("isDocumentCreationAllowed")) {
+			oNewFolderButton.setEnabled(true);
+		} else {
+			oNewFolderButton.setEnabled(false);
+		}
+	};
+
 	CloudFilePicker.prototype._makeNewFolderEntry = function (sFolderName) {
 		this.setBusy(true);
 		var oBinding = oTableControl.getBinding("items"), fnResolve, oPromise = new Promise(function (resolve) {
@@ -771,7 +796,6 @@ sap.ui.define([
 								var iLinkIndex = oBreadcrumbLinkControl.indexOfLink(
 									oEvent.getSource()
 								);
-								this._resetAndApplyDefaultSorting();
 								var aRemovedLinks = aVisibleLinks.splice(iLinkIndex + 1);
 								var oSelectedFolderInfo, oNewContext;
 								this._updateBreadcrumbLinks();

package/src/sap/suite/ui/commons/MicroProcessFlow.js

@@ -28,7 +28,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.106.0
+	 * @version 1.107.0
 	 *
 	 * @constructor
 	 * @public
@@ -73,7 +73,9 @@ sap.ui.define([
 				}
 			}
 		},
-		renderer: function (oRM, oMicroProcessFlow) {
+		renderer: {
+			apiVersion: 2,
+			render: function (oRM, oMicroProcessFlow) {
 			var aContent = oMicroProcessFlow.getContent(),
 				sWidth = oMicroProcessFlow.getWidth(),
 				iLength = aContent.length,
@@ -84,55 +86,74 @@ sap.ui.define([
 				return;
 			}
 
-			oRM.write("<div ");
+			oRM.openStart("div", oMicroProcessFlow);
 
-			oRM.writeAttributeEscaped("role", "listbox");
-			oRM.writeAttributeEscaped("aria-roledescription", oResourceBundle.getText("ACC_CTR_TYPE_MICRO_PROCESS_FLOW"));
-			oRM.writeControlData(oMicroProcessFlow);
-			oRM.writeAttribute("aria-label",sLabel);
+			oRM.attr("role", "listbox");
+			oRM.attr("aria-roledescription", oResourceBundle.getText("ACC_CTR_TYPE_MICRO_PROCESS_FLOW"));
+			oRM.attr("aria-label",sLabel);
 
 			if (sWidth) {
-				oRM.addStyle("width", sWidth);
+				oRM.style("width", sWidth);
 			}
-			oRM.writeStyles();
 
-			oRM.addClass("sapSuiteUiCommonsMicroProcessFlow");
-			oRM.writeClasses(oMicroProcessFlow);
-			oRM.write(">");
+			oRM.class("sapSuiteUiCommonsMicroProcessFlow");
+			oRM.openEnd();
 
 			if (oMicroProcessFlow._hasScrolling()) {
-				oRM.write("<div tabindex=\"0\" id=\"" + oMicroProcessFlow.getId() + "-leftscroller\" class=\"sapSuiteUiCommonsMicroProcessFlowScroller sapSuiteUiCommonsMicroProcessFlowLeftScroller\">");
+				oRM.openStart("div");
+				oRM.attr("tabindex", "0");
+				oRM.attr("id", oMicroProcessFlow.getId() + "-leftscroller");
+				oRM.class("sapSuiteUiCommonsMicroProcessFlowScroller").class("sapSuiteUiCommonsMicroProcessFlowLeftScroller");
+				oRM.openEnd();
 				oRM.renderControl(oMicroProcessFlow._getLeftScroller());
-				oRM.write("<span id=\"" + oMicroProcessFlow.getId() + "-leftlabel\" class=\"sapSuiteUiCommonsMicroProcessFlowLeftLabel\"></span>");
-				oRM.write("</div>");
+				oRM.openStart("span");
+				oRM.attr("id", oMicroProcessFlow.getId() + "-leftlabel");
+				oRM.class("sapSuiteUiCommonsMicroProcessFlowLeftLabel");
+				oRM.openEnd();
+				oRM.close("span");
+				oRM.close("div");
+
 			}
 
-			oRM.write("<div id=\"" + oMicroProcessFlow.getId() + "-content\" class=\"sapSuiteUiCommonsMicroProcessFlowContent\">");
-			oRM.write("<div id=\"" + oMicroProcessFlow.getId() + "-scrolling\" class=\"sapSuiteUiCommonsMicroProcessFlowScrolling sapSuiteUiCommonsMicroProcessFlowScrollingTransition\"");
+			oRM.openStart("div");
+			oRM.attr("id", oMicroProcessFlow.getId() + "-content");
+			oRM.class("sapSuiteUiCommonsMicroProcessFlowContent");
+			oRM.openEnd();
+			oRM.openStart("div");
+			oRM.attr("id", oMicroProcessFlow.getId() + "-scrolling");
+			oRM.class("sapSuiteUiCommonsMicroProcessFlowScrolling").class("sapSuiteUiCommonsMicroProcessFlowScrollingTransition");
 
 			if (oMicroProcessFlow.getRenderType() === RenderType.Wrap) {
-				oRM.addStyle("flex-wrap", "wrap");
-				oRM.writeStyles();
+				oRM.style("flex-wrap", "wrap");
 			}
 
-			oRM.write(">");
+			oRM.openEnd();
 
 			aContent.forEach(function (oItem, i) {
 				oItem._setAccessibilityData(i + 1, iLength);
 				oRM.renderControl(oItem);
 			});
 
-			oRM.write("</div>");
-			oRM.write("</div>");
+			oRM.close("div");
+			oRM.close("div");
 
 			if (oMicroProcessFlow._hasScrolling()) {
-				oRM.write("<div tabindex=\"0\" id=\"" + oMicroProcessFlow.getId() + "-rightscroller\" class=\"sapSuiteUiCommonsMicroProcessFlowScroller sapSuiteUiCommonsMicroProcessFlowRightScroller\">");
-				oRM.write("<span id=\"" + oMicroProcessFlow.getId() + "-rightlabel\" class=\"sapSuiteUiCommonsMicroProcessFlowRightLabel\"></span>");
+				oRM.openStart("div");
+				oRM.attr("id", oMicroProcessFlow.getId() + "-rightscroller");
+				oRM.attr("tabindex", "0");
+				oRM.class("sapSuiteUiCommonsMicroProcessFlowScroller").class("sapSuiteUiCommonsMicroProcessFlowRightScroller");
+				oRM.openEnd();
+				oRM.openStart("span");
+				oRM.attr("id", oMicroProcessFlow.getId() + "-rightlabel");
+				oRM.class("sapSuiteUiCommonsMicroProcessFlowRightLabel");
+				oRM.openEnd();
+				oRM.close("span");
 				oRM.renderControl(oMicroProcessFlow._getRightScroller());
-				oRM.write("</div>");
+				oRM.close("div");
 			}
 
-			oRM.write("</div>");
+			oRM.close("div");
+		}
 		}
 	});
 

package/src/sap/suite/ui/commons/MicroProcessFlowItem.js

@@ -30,7 +30,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.106.0
+	 * @version 1.107.0
 	 *
 	 * @constructor
 	 * @public
@@ -123,46 +123,49 @@ sap.ui.define([
 			this._setupEvents();
 			this._setAccessibility();
 		},
-		renderer: function (oRM, oMicroProcessFlowItem) {
+		renderer: {
+			apiVersion: 2,
+			render: function (oRM, oMicroProcessFlowItem) {
 			var fnRenderSeparator = function () {
 				// wrapper
-				oRM.write("<div");
-				oRM.writeAttributeEscaped("id", oMicroProcessFlowItem.getId() + "-separator");
-				oRM.addClass("sapSuiteUiCommonsMicroProcessFlowItemSeparatorWrapper");
-				oRM.writeClasses();
-				oRM.addStyle("width", oMicroProcessFlowItem._getStepWidth());
-				oRM.writeStyles();
-				oRM.write(">");
+				oRM.openStart("div");
+				oRM.attr("id", oMicroProcessFlowItem.getId() + "-separator");
+				oRM.class("sapSuiteUiCommonsMicroProcessFlowItemSeparatorWrapper");
+				oRM.style("width", oMicroProcessFlowItem._getStepWidth());
+				oRM.openEnd();
 
 				// separator
-				oRM.write("<div ");
-				oRM.addClass("sapSuiteUiCommonsMicroProcessFlowItemSeparator");
+				oRM.openStart("div");
+				oRM.class("sapSuiteUiCommonsMicroProcessFlowItemSeparator");
 				// last item doesn't have visible separator, but can have intermediary
 				if (!oMicroProcessFlowItem.getShowSeparator() || bIsLast) {
-					oRM.addClass("sapSuiteUiCommonsMicroProcessFlowItemHiddenSeparator");
+					oRM.class("sapSuiteUiCommonsMicroProcessFlowItemHiddenSeparator");
 				}
-				oRM.writeClasses();
-				oRM.write(">");
-				oRM.write("</div>");
+				oRM.openEnd();
+				oRM.close("div");
 
 				if (bShowIntermediary) {
 					fnRenderIntermediary();
 				}
 
-				oRM.write("</div>");
+				oRM.close("div");
 			};
 
 			var fnRenderIntermediary = function () {
 				var oIntermediary = oMicroProcessFlowItem.getIntermediary();
 
-				oRM.write("<div class=\"sapSuiteUiCommonsMicroProcessFlowItemIntermediary\" >");
+				oRM.openStart("div");
+				oRM.class("sapSuiteUiCommonsMicroProcessFlowItemIntermediary");
+				oRM.openEnd();
 				if (oIntermediary) {
 					oRM.renderControl(oIntermediary);
 				} else {
-					oRM.write("<div class=\"sapSuiteUiCommonsMicroProcessFlowItemOnHoldElement\" >");
-					oRM.write("</div>");
+					oRM.openStart("div");
+					oRM.class("sapSuiteUiCommonsMicroProcessFlowItemOnHoldElement");
+					oRM.openEnd();
+					oRM.close("div");
 				}
-				oRM.write("</div>");
+				oRM.close("div");
 			};
 
 			var sIcon = oMicroProcessFlowItem.getIcon() || oMicroProcessFlowItem._getIconByState(),
@@ -172,29 +175,29 @@ sap.ui.define([
 				oCustomControl = oMicroProcessFlowItem.getCustomControl(),
 				sTitle = oMicroProcessFlowItem.getTitle();
 
-			oRM.write("<div ");
-			oRM.addClass("sapSuiteUiCommonsMicroProcessFlowItemWrapper");
-			oRM.writeClasses(oMicroProcessFlowItem);
-			oRM.writeControlData(oMicroProcessFlowItem);
-			oRM.write(">");
+			oRM.openStart("div", oMicroProcessFlowItem);
+			oRM.class("sapSuiteUiCommonsMicroProcessFlowItemWrapper");
+			oRM.openEnd();
 
-			oRM.write("<div");
+			oRM.openStart("div");
+			oRM.attr("id", sId + "-item");
 			if (sTitle) {
-				oRM.writeAttributeEscaped("title", sTitle);
+				oRM.attr("title", sTitle);
 			}
-			oRM.writeAttributeEscaped("id", sId + "-item");
-			oRM.writeAttribute("class", "sapSuiteUiCommonsMicroProcessFlowItemContent");
-			oRM.write(">");
+			oRM.class("sapSuiteUiCommonsMicroProcessFlowItemContent");
+			oRM.openEnd("div");
 
 			if (oCustomControl) {
 				oRM.renderControl(oCustomControl);
 			} else {
-				oRM.write("<div tabindex=\"0\" id=\"" + sId + "-itemContent\" class=\"sapSuiteUiCommonsMicroProcessFlowItem sapSuiteUiCommonsMicroProcessFlowItem" +
-					oMicroProcessFlowItem.getState() + "\"");
-				oRM.writeAttributeEscaped("aria-label", oMicroProcessFlowItem._getAriaText());
-				oRM.writeAttributeEscaped("role", "option");
-				oRM.writeAttributeEscaped("aria-selected", "false");
-				oRM.write(">");
+				oRM.openStart("div");
+				oRM.attr("id", sId + "-itemContent");
+				oRM.attr("tabindex", "0");
+				oRM.class("sapSuiteUiCommonsMicroProcessFlowItem").class("sapSuiteUiCommonsMicroProcessFlowItem" + oMicroProcessFlowItem.getState());
+				oRM.attr("aria-label", oMicroProcessFlowItem._getAriaText());
+				oRM.attr("role", "option");
+				oRM.attr("aria-selected", "false");
+				oRM.openEnd();
 
 				if (sIcon) {
 					oRM.renderControl(new sap.ui.core.Icon({
@@ -202,15 +205,16 @@ sap.ui.define([
 						src: sIcon
 					}).addStyleClass("sapSuiteUiCommonsMicroProcessFlowItemIcon"));
 				}
-				oRM.write("</div>");
+				oRM.close("div");
 			}
-			oRM.write("</div>");
+			oRM.close("div");
 
 			if (!bIsLast || bShowIntermediary) {
 				fnRenderSeparator();
 			}
 
-			oRM.write("</div>");
+			oRM.close("div");
+		}
 		}
 	});