@sapui5/sap.suite.ui.generic.template 1.130.2 → 1.131.0

package/src/sap/suite/ui/generic/template/lib/AppComponent.js

@@ -58,7 +58,10 @@ sap.ui.define([
 	"sap/m/IllustratedMessageType",
 	"sap/suite/ui/generic/template/lib/ai/FioriAIHandler",
 	"sap/suite/ui/generic/template/lib/RetryAfterHandler",
-	"sap/suite/ui/generic/template/js/RuntimeFormatters"  // just to make sure that this class is loaded
+	"sap/suite/ui/generic/template/js/RuntimeFormatters",  // just to make sure that this class is loaded
+	"sap/f/FlexibleColumnLayoutData",
+	"sap/f/FlexibleColumnLayoutDataForDesktop",
+	"sap/f/FlexibleColumnLayoutDataForTablet"
 ], function(
 	extend,
 	isPlainObject,
@@ -96,7 +99,12 @@ sap.ui.define([
 	VersionInfo,
 	IllustratedMessageType, 
 	FioriAIHandler,
-	RetryAfterHandler) {
+	RetryAfterHandler,
+	RuntimeFormatters,
+	FlexibleColumnLayoutData,
+	FlexibleColumnLayoutDataForDesktop,
+	FlexibleColumnLayoutDataForTablet
+) {
 	"use strict";
 	var	sClassName = "lib.AppComponent";
 
@@ -138,7 +146,9 @@ sap.ui.define([
 	function getMethods(oAppComponent, oAppId) {
 
 		var fnLeaveAppResolve;
-		var	oTemplateContract = { // template contract object which is used for data interchange between framework classes
+		var oTemplateContract = { // template contract object which is used for data interchange between framework classes
+			getStoredLayout: getStoredLayout,
+			setColumnDistributionModel: setColumnDistributionModel,
 			oAppComponent: oAppComponent,
 			leaveAppPromise: Promise.resolve(),	// promise which is resolved once the user leaves the component
 			ghostapp: (function(){
@@ -270,6 +280,9 @@ sap.ui.define([
 		var oNavigationController; // instance of NavigationController
 		var fnDeregister; // function to be called to deregister at TemplateContract
 
+		var shellPersonalizationService;
+		var applicationPersonalizers = {};
+
 		// Begin: Private helper methods called in init
 
 		// This function instantiates the global private model that can be used as named model with name  _templPrivGlobal in all views and fragments.
@@ -505,17 +518,226 @@ sap.ui.define([
 			setLeaveAppPromise();
 			var oRetryAfterHandler = new RetryAfterHandler(oTemplateContract, oAppComponent);
 			oRetryAfterHandler.registerRetryAfterHandler();
+
+			if (UShellContainer) {
+				var oShellPersonalizationServicePromise = UShellContainer.getServiceAsync("PersonalizationV2");
+				oShellPersonalizationServicePromise.then((oShellPersonalizationService) => {
+					shellPersonalizationService = oShellPersonalizationService;
+				});
+			}
 			
 			oLogger.info("Init done for AppComponent " + sAppComponentId);
 		}
 
+		/**
+		 * Gets the personalizer from the shell service.
+		 * We set some defaults for the scope object.
+		 * @param persId Personalization object
+		 * @param scope Scope object
+		 * @param component
+		 * @returns {Promise<PersonalizerType> | undefined} Personalizer object which handles personalization
+		 */
+		async function getPersonalizer(persId, scope, component) {
+			if (!shellPersonalizationService) {
+				return;
+			}
+			scope = {
+				// merge some defaults
+				keyCategory: shellPersonalizationService.constants.keyCategory.FIXED_KEY,
+				writeFrequency: shellPersonalizationService.constants.writeFrequency.LOW,
+				clientStorageAllowed: false,
+				validity: Infinity,
+				...scope
+			};
+			return shellPersonalizationService.getPersonalizer(persId, scope, component);
+		}
+
+		/**
+		 * Prepares the container name for personalizer.
+		 * @returns Container name
+		 */
+		function getContainerName() {
+			// personalizer logs error if name longer than 40 symbols
+			var sContainer = `App#${(oAppComponent).getManifest()["sap.app"].id}`;
+			return sContainer;
+		}
+
+		/**
+		 * Initializes the personalizer to access the Application data stored in the shell Personalization.
+		 * @param {string} itemName The name of the item for which the personalizer is created.
+		 * @returns {Promise<PersonalizerType>} A personalizer
+		 */
+		async function getApplicationPersonalizer(itemName) {
+			if (!applicationPersonalizers[itemName]) {
+				applicationPersonalizers[itemName] = getPersonalizer(
+					{
+						container: getContainerName(),
+						item: itemName
+					},
+					{},
+					oAppComponent
+				);
+			}
+			return applicationPersonalizers[itemName];
+		}
+
+		/**
+		 * Returns data from the personalization service.
+		 * @param {string} itemName
+		 * @returns {Promise<object | undefined>} Data
+		 */
+		async function getApplicationPersonalizationData(itemName) {
+			return (await (await getApplicationPersonalizer(itemName))?.getPersData());
+		}
+
+		/**
+		 * Stores an object in the personalization service.
+		 * @param {string} itemName
+		 * @param {object} data
+		 * @returns {Promise<void>} A promise
+		 */
+		async function setApplicationPersonalizationData(itemName, data) {
+			(await getApplicationPersonalizer(itemName)).setPersData(data);
+		}
+
+		/**
+		 * Retieves the FCL state from the personalization service.
+		 * @returns The FCL state
+		 */
+		async function getFCLPersonalizationData() {
+			var oEmptyFCLState = {
+				defaultLayouts: {},
+				columnsDistribution: {
+					desktop: {},
+					tablet: {}
+				}
+			};
+			return ((await getApplicationPersonalizationData("FCL-Personalization")) ?? oEmptyFCLState);
+		}
+
+		/**
+		 * Sets the FCL state in the personalization service.
+		 * @param fclState The FCL state
+		 */
+		function setFCLPersonalizationData(fclState) {
+			setApplicationPersonalizationData("FCL-Personalization", fclState);
+		}
+
+		/**
+		 * Requests the FCL state from the personalization service and sets the model accordingly.
+		 */
+		async function setColumnDistributionModel() {
+			if (!shellPersonalizationService) {
+				return;
+			}
+			var oColumnsDistribution = (await getFCLPersonalizationData()).columnsDistribution;
+			if (oColumnsDistribution) {
+				var oTemplatePrivateGlobalModel = oAppComponent.getModel("_templPrivGlobal");
+				oTemplatePrivateGlobalModel.setProperty("/generic/FCL/FCLColumnsDistribution", oColumnsDistribution);
+			}
+		}
+
+		/**
+		 * Is called when the user changes the FCL columns distribution.
+		 * Updates the FCL state in the personalization service.
+		 * @param {Event<{ media: "tablet" | "desktop"; layout: LayoutTypeType; columnsSizes: string }>} event
+		 */
+		async function onColumnsDistributionChange(event) {
+			if (!shellPersonalizationService) {
+				return;
+			}
+			
+			var { media, layout, columnsSizes } = event.getParameters();
+			
+			var oTemplatePrivateGlobalModel = oAppComponent.getModel("_templPrivGlobal");
+			oTemplatePrivateGlobalModel.setProperty(`/generic/FCL/FCLColumnsDistribution/${media}/${layout}`, columnsSizes);
+			
+			var oFclState = await getFCLPersonalizationData();
+			var iColumnsDisplayed = getNumberOfColumnsFromLayout(layout);
+			if (iColumnsDisplayed) {
+				oFclState.defaultLayouts[iColumnsDisplayed] = layout;
+				oFclState.columnsDistribution[media][layout] = columnsSizes;
+				setFCLPersonalizationData(oFclState);
+			}
+		}
+
+		/**
+		 * Gets the number of columns displayed in the FCL based on the layout.
+		 * @param {LayoutTypeType} layout  The layout
+		 * @returns {1 | 2 | 3 | null} The number of columns displayed
+		 */
+		function getNumberOfColumnsFromLayout(layout) {
+			var iColumnsDisplayed = /^(One|Two|Three)Column/.exec(layout)?.[1];
+			switch (iColumnsDisplayed) {
+				case "One":
+					return 1;
+				case "Two":
+					return 2;
+				case "Three":
+					return 3;
+				default:
+					return null;
+			}
+		}
+
+		/**
+		 * Gets the layout stored in the personalization service based on the proposed layout.
+		 * @param {LayoutTypeType | undefined } proposedLayout
+		 * @returns The FCL layout stored in the personalization service
+		 */
+		async function getStoredLayout(oProposedLayout) {
+			if (shellPersonalizationService) {
+				var iColumnsDisplayed = getNumberOfColumnsFromLayout(oProposedLayout);
+				if (iColumnsDisplayed) {
+					var defaultLayouts = (await getFCLPersonalizationData()).defaultLayouts;
+					return defaultLayouts?.[iColumnsDisplayed] ?? oProposedLayout;
+				}
+			}
+			return oProposedLayout;
+		}
+
+		function initFlexibleColumnLayout() {
+			var oFCL = new FlexibleColumnLayout();
+
+			var oLayoutData = new FlexibleColumnLayoutData();
+			var oDesktopLayoutData = new FlexibleColumnLayoutDataForDesktop();
+			var oTabletLayoutData = new FlexibleColumnLayoutDataForTablet();
+			
+			var sFCLColumnsDistributionPath = "_templPrivGlobal>/generic/FCL/FCLColumnsDistribution";
+			var sDesktopFCLColumnsDistributionPath = `${sFCLColumnsDistributionPath}/desktop`;
+			var sTabletFCLColumnsDistributionPath = `${sFCLColumnsDistributionPath}/tablet`;
+			
+			oDesktopLayoutData.bindProperty("twoColumnsBeginExpanded", `${sDesktopFCLColumnsDistributionPath}/TwoColumnsBeginExpanded`);
+			oDesktopLayoutData.bindProperty("twoColumnsMidExpanded", `${sDesktopFCLColumnsDistributionPath}/TwoColumnsMidExpanded`);
+			oDesktopLayoutData.bindProperty("threeColumnsBeginExpandedEndHidden", `${sDesktopFCLColumnsDistributionPath}/ThreeColumnsBeginExpandedEndHidden`);
+			oDesktopLayoutData.bindProperty("threeColumnsEndExpanded", `${sDesktopFCLColumnsDistributionPath}/ThreeColumnsEndExpanded`);
+			oDesktopLayoutData.bindProperty("threeColumnsMidExpanded", `${sDesktopFCLColumnsDistributionPath}/ThreeColumnsMidExpanded`);
+			oDesktopLayoutData.bindProperty("threeColumnsMidExpandedEndHidden", `${sDesktopFCLColumnsDistributionPath}/ThreeColumnsMidExpandedEndHidden`);
+
+			oTabletLayoutData.bindProperty("twoColumnsBeginExpanded", `${sTabletFCLColumnsDistributionPath}/TwoColumnsBeginExpanded`);
+			oTabletLayoutData.bindProperty("twoColumnsMidExpanded", `${sTabletFCLColumnsDistributionPath}/TwoColumnsMidExpanded`);
+			oTabletLayoutData.bindProperty("threeColumnsBeginExpandedEndHidden", `${sTabletFCLColumnsDistributionPath}/ThreeColumnsBeginExpandedEndHidden`);
+			oTabletLayoutData.bindProperty("threeColumnsEndExpanded", `${sTabletFCLColumnsDistributionPath}/ThreeColumnsEndExpanded`);
+			oTabletLayoutData.bindProperty("threeColumnsMidExpanded", `${sTabletFCLColumnsDistributionPath}/ThreeColumnsMidExpanded`);
+			oTabletLayoutData.bindProperty("threeColumnsMidExpandedEndHidden", `${sTabletFCLColumnsDistributionPath}/ThreeColumnsMidExpandedEndHidden`);
+
+			oLayoutData.setDesktopLayoutData(oDesktopLayoutData);
+			oLayoutData.setTabletLayoutData(oTabletLayoutData);
+			oFCL.setAggregation("layoutData", oLayoutData);
+
+			oFCL.attachColumnsDistributionChange(onColumnsDistributionChange);
+
+			return oFCL;
+		}
+
 		function createContent(){
 			// Method must only be called once
 			if (oTemplateContract.oNavigationHost){
 				return "";
 			}
 			if (oAppComponent.getFlexibleColumnLayout()){
-				var oFCL = new FlexibleColumnLayout();
+				var oFCL = initFlexibleColumnLayout();
+				
 				oTemplateContract.oNavigationHost = oFCL;
 				oTemplateContract.aNavigationObservers = [
 					new ProcessObserver({
@@ -938,7 +1160,7 @@ sap.ui.define([
 	 * @public
 	 * @extends sap.ui.core.UIComponent
 	 * @author SAP SE
-	 * @version 1.130.2
+	 * @version 1.131.0
 	 * @name sap.suite.ui.generic.template.lib.AppComponent
 	 */
 	var oAppComponent = UIComponent.extend("sap.suite.ui.generic.template.lib.AppComponent", {

package/src/sap/suite/ui/generic/template/lib/ComponentUtils.js

@@ -1,4 +1,5 @@
-sap.ui.define(["sap/ui/base/Object",
+sap.ui.define([
+	"sap/ui/base/Object",
 	"sap/ui/model/base/ManagedObjectModel",
 	"sap/suite/ui/generic/template/genericUtilities/controlHelper",
 	"sap/suite/ui/generic/template/genericUtilities/FeLogger",
@@ -8,9 +9,22 @@ sap.ui.define(["sap/ui/base/Object",
 	"sap/base/util/extend",
 	"sap/base/util/isEmptyObject",
 	"sap/suite/ui/generic/template/genericUtilities/FeError",
-	"sap/suite/ui/generic/template/lib/CommandComponentUtils"
-	], function(BaseObject, ManagedObjectModel, controlHelper, FeLogger, oDataModelHelper, CRUDActionHandler, StatePreserver, extend, isEmptyObject, FeError,
-		CommandComponentUtils) {
+	"sap/suite/ui/generic/template/lib/CommandComponentUtils",
+	"sap/suite/ui/generic/template/lib/ViewCreationHelper"
+], function(
+	BaseObject,
+	ManagedObjectModel,
+	controlHelper,
+	FeLogger,
+	oDataModelHelper,
+	CRUDActionHandler,
+	StatePreserver,
+	extend,
+	isEmptyObject,
+	FeError,
+	CommandComponentUtils,
+	ViewCreationHelper
+) {
 	"use strict";
 	var	sClassName = "lib.ComponentUtils";
 	var oLogger = new FeLogger(sClassName).getLogger();
@@ -479,78 +493,97 @@ sap.ui.define(["sap/ui/base/Object",
 				}
 				return;
 			}
+			var oViewReadyPromise = Promise.resolve();
+			if (oComponentRegistryEntry.oController) {
+				var oView = oComponentRegistryEntry.oController.getView();
+				if (oView && oView.isDestroyed()) {
+					// View creation of a specific component use to happen only once in the lifecycle of the component. 
+					// View is expected to be alive for the lifecycle of the template component. In some edge cases where 
+					// the same application variant is used as a target application & the source application has Keep-Alive 
+					// as true the source application, aggregated components & their corresponding views are not destroyed. 
+					// When target application is started and component is being created FE checks for the view with ID & if 
+					// exist it is destroyed. This means the Source App & component is active but its view will be destroyed. 
+					// Now if user navigates back to the source application & opens the same view again. To handle this
+					// scenario, FE checks for such situation and re-creates the view here.
+					oViewReadyPromise = ViewCreationHelper.initializeViewCreation(oComponentRegistryEntry);
+					oComponent.onBeforeRendering(oComponentRegistryEntry);
+				}
+			}
 			var oComponentContainer = oComponent.getComponentContainer();
 			if (!oComponentContainer){
 				return;
 			}
-			var oUIModel = oComponent.getModel("ui");
-			var bIsNonDraftCreate = !!oComponentRegistryEntry.nonDraftCreateContext;
-			if (bIsNonDraftCreate) {
-				var oBindingContext = oComponentContainer.getBindingContext();
-				if (oBindingContext === oComponentRegistryEntry.nonDraftCreateContext){
-					return; // page is already in correct state
-				}
-				oUIModel.setProperty("/enabled", true);
-				oUIModel.setProperty("/editable", true);
-				oUIModel.setProperty("/createMode", true);
-				fnUnbind(); // unbind if bound to another context or an element binding
-				if (fnHeaderDataAvailableResolve){
-					fnHeaderDataAvailableResolve(oComponentRegistryEntry.nonDraftCreateContext);
-					fnHeaderDataAvailableResolve = null;
+
+			oViewReadyPromise.then(function() {
+				var oUIModel = oComponent.getModel("ui");
+				var bIsNonDraftCreate = !!oComponentRegistryEntry.nonDraftCreateContext;
+				if (bIsNonDraftCreate) {
+					var oBindingContext = oComponentContainer.getBindingContext();
+					if (oBindingContext === oComponentRegistryEntry.nonDraftCreateContext){
+						return; // page is already in correct state
+					}
+					oUIModel.setProperty("/enabled", true);
+					oUIModel.setProperty("/editable", true);
+					oUIModel.setProperty("/createMode", true);
+					fnUnbind(); // unbind if bound to another context or an element binding
+					if (fnHeaderDataAvailableResolve){
+						fnHeaderDataAvailableResolve(oComponentRegistryEntry.nonDraftCreateContext);
+						fnHeaderDataAvailableResolve = null;
+					} else {
+						oHeaderDataAvailablePromise = Promise.resolve(oComponentRegistryEntry.nonDraftCreateContext);
+					}
+					fnPreparePageDataLoaded();
+					if (oComponentRegistryEntry.methods.beforeRebind) {
+						oComponentRegistryEntry.methods.beforeRebind(oHeaderDataAvailablePromise);
+					}
+					oComponentContainer.setBindingContext(oComponentRegistryEntry.nonDraftCreateContext);
+					Promise.all([oComponentRegistryEntry.oViewRenderedPromise, oComponentRegistryEntry.viewRegistered]).then(fnCallPathUnchangedReuseCallbacks.bind(null, true, false));
+					if (oComponentRegistryEntry.methods.afterRebind) {
+						oComponentRegistryEntry.methods.afterRebind();
+					}			
 				} else {
-					oHeaderDataAvailablePromise = Promise.resolve(oComponentRegistryEntry.nonDraftCreateContext);
-				}
-				fnPreparePageDataLoaded();
-				if (oComponentRegistryEntry.methods.beforeRebind) {
-					oComponentRegistryEntry.methods.beforeRebind(oHeaderDataAvailablePromise);
-				}
-				oComponentContainer.setBindingContext(oComponentRegistryEntry.nonDraftCreateContext);
-				Promise.all([oComponentRegistryEntry.oViewRenderedPromise, oComponentRegistryEntry.viewRegistered]).then(fnCallPathUnchangedReuseCallbacks.bind(null, true, false));
-				if (oComponentRegistryEntry.methods.afterRebind) {
-					oComponentRegistryEntry.methods.afterRebind();
-				}			
-			} else {
-				var oElementBinding = oComponentContainer.getElementBinding();
-				if (oElementBinding){
-					if (sLogicalBindingPath === sBindingPath) {
-						/*
-						* component is already bound to this object - no rebound to avoid that 1:1, 1:N and expands are read
-						* again
-						*/
-						if (oElementBinding.isSuspended()) {
-							oElementBinding.resume();
-							fnAdaptToContext();
-						}
-						if (bIsDataLoading){
-							fnStartBusy();
-						}
-						oComponentRegistryEntry.oApplication.getBusyHelper().getUnbusy().then(fnCallPathUnchangedReuseCallbacks.bind(null, bAreKeysDifferent, false));
-						if (!bIsComponentCurrentlyActive){
-							fnPreparePageDataLoaded();
-						}
-						if (!bIsComponentCurrentlyActive && !isDraftEnabled()){ // in non-draft case: even if this object has been left in edit mode we now return to display mode, since the changes have already been discarded
-							var bEditFlowOfRoot = oComponentRegistryEntry.oApplication.getEditFlowOfRoot();
-							if (bEditFlowOfRoot === "direct") {
-								oUIModel.setProperty("/editable", true);
-							} else {
-								oUIModel.setProperty("/editable", false);
+					var oElementBinding = oComponentContainer.getElementBinding();
+					if (oElementBinding){
+						if (sLogicalBindingPath === sBindingPath) {
+							/*
+							* component is already bound to this object - no rebound to avoid that 1:1, 1:N and expands are read
+							* again
+							*/
+							if (oElementBinding.isSuspended()) {
+								oElementBinding.resume();
+								fnAdaptToContext();
+							}
+							if (bIsDataLoading){
+								fnStartBusy();
 							}
+							oComponentRegistryEntry.oApplication.getBusyHelper().getUnbusy().then(fnCallPathUnchangedReuseCallbacks.bind(null, bAreKeysDifferent, false));
+							if (!bIsComponentCurrentlyActive){
+								fnPreparePageDataLoaded();
+							}
+							if (!bIsComponentCurrentlyActive && !isDraftEnabled()){ // in non-draft case: even if this object has been left in edit mode we now return to display mode, since the changes have already been discarded
+								var bEditFlowOfRoot = oComponentRegistryEntry.oApplication.getEditFlowOfRoot();
+								if (bEditFlowOfRoot === "direct") {
+									oUIModel.setProperty("/editable", true);
+								} else {
+									oUIModel.setProperty("/editable", false);
+								}
+							}
+							oUIModel.setProperty("/enabled", true);
+							return;
+						} else if (!bIsComponentCurrentlyActive){
+							fnUnbind();
 						}
-						oUIModel.setProperty("/enabled", true);
-						return;
-					} else if (!bIsComponentCurrentlyActive){
-						fnUnbind();
 					}
+					// the following properties will be adapted by the change event of the binding
+					oUIModel.setProperty("/enabled", false);
+					oUIModel.setProperty("/editable", false);
+					oUIModel.setProperty("/createMode", false);
+					// and read the header data if necessary
+					fnRebindHeaderData(sBindingPath);
+
+					fnPreparePageDataLoaded();
 				}
-				// the following properties will be adapted by the change event of the binding
-				oUIModel.setProperty("/enabled", false);
-				oUIModel.setProperty("/editable", false);
-				oUIModel.setProperty("/createMode", false);
-				// and read the header data if necessary
-				fnRebindHeaderData(sBindingPath);
-
-				fnPreparePageDataLoaded();
-			}
+			});
 		}
 
 		// This method can be called in two scenarios:

package/src/sap/suite/ui/generic/template/lib/FlexibleColumnLayoutHandler.js

@@ -62,6 +62,8 @@ sap.ui.define(["sap/ui/base/Object", "sap/f/FlexibleColumnLayoutSemanticHelper",
 			var oFCLSettings  = oTemplateContract.oAppComponent.getFlexibleColumnLayout();
 			var oFlexibleColumnLayoutSemanticHelper = FlexibleColumnLayoutSemanticHelper.getInstanceFor(oFlexibleColumnLayout, oFCLSettings);
 
+			oTemplateContract.setColumnDistributionModel();
+
 			var oUiState;
 			var sCurrentLayout;
 			var sStoredTargetLayout;
@@ -293,7 +295,7 @@ sap.ui.define(["sap/ui/base/Object", "sap/f/FlexibleColumnLayoutSemanticHelper",
 					oHostViewPreparationPromise = oNavigationControllerProxy.prepareHostView(oSuccessorNode);
 					aPromises.push(oHostViewPreparationPromise);
 				}
-				var fnImpl = function(){ // implementation on what needs to be done. Relies on oFlexibleColumnLayoutSemanticHelper being ready to use
+				var fnImpl = async function(){ // implementation on what needs to be done. Relies on oFlexibleColumnLayoutSemanticHelper being ready to use
 					if (isMultipleColumn(oCurrentIdentity.treeNode)){
 						sCurrentLayout = getFCLLayoutFromIdentity(oCurrentIdentity);
 						if (!sCurrentLayout){
@@ -319,14 +321,17 @@ sap.ui.define(["sap/ui/base/Object", "sap/f/FlexibleColumnLayoutSemanticHelper",
 					} else {
 						sCurrentLayout = oCurrentIdentity.treeNode.fCLLevel === 0 ? aDefaultLayouts[0] : LayoutType.EndColumnFullScreen;
 					}
+
+					sCurrentLayout = await oTemplateContract.getStoredLayout(sCurrentLayout);
+
 					oFlexibleColumnLayout.setLayout(sCurrentLayout);
 					oFlexibleColumnLayout.setAutoFocus(false);
 					oFlexibleColumnLayout.setRestoreFocusOnBackNavigation(true);
-					if (oCurrentIdentity.treeNode.fCLLevel === 1 || oCurrentIdentity.treeNode.fCLLevel === 2){
+					if (oCurrentIdentity.treeNode.fCLLevel === 1 || oCurrentIdentity.treeNode.fCLLevel === 2) {
 						var oNewUiState = oFlexibleColumnLayoutSemanticHelper.getCurrentUIState();
-						if (oNewUiState.columnsVisibility.midColumn){
+						if (oNewUiState.columnsVisibility.midColumn) {
 							var iDownto = 1 - oNewUiState.columnsVisibility.beginColumn;
-							for (var oPredecessorNode = oCurrentIdentity.treeNode; oPredecessorNode.fCLLevel > iDownto;){
+							for (var oPredecessorNode = oCurrentIdentity.treeNode; oPredecessorNode.fCLLevel > iDownto;) {
 								oPredecessorNode = oTemplateContract.mRoutingTree[oPredecessorNode.parentRoute];
 								oCurrentIdentity.componentsDisplayed[oPredecessorNode.sRouteName] = 1;
 								oPredecessorNode.display();