@sapui5/sap.suite.ui.commons 1.138.0 → 1.140.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sapui5/sap.suite.ui.commons",
-  "version": "1.138.0",
+  "version": "1.140.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.138.0</version>
+	<version>1.140.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.138.0
+	 * @version 1.140.0
 	 * @since 1.65.0
 	 *
 	 * @constructor

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

@@ -134,7 +134,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.138.0
+	 * @version 1.140.0
 	 * @since 1.56.0
 	 *
 	 * @constructor

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

@@ -148,7 +148,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.138.0
+	 * @version 1.140.0
 	 * @since 1.56.0
 	 *
 	 * @constructor

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

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.138.0
+	 * @version 1.140.0
 	 * @since 1.56.0
 	 *
 	 * @constructor

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

@@ -22,7 +22,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.138.0
+	 * @version 1.140.0
 	 * @since 1.60.0
 	 *
 	 * @constructor

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

@@ -39,7 +39,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.138.0
+	 * @version 1.140.0
 	 * @since 1.56.0
 	 *
 	 * @constructor

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

@@ -21,7 +21,7 @@ sap.ui.define([
 	 * @extends sap.ui.base.ManagedObject
 	 *
 	 * @author SAP SE
-	 * @version 1.138.0
+	 * @version 1.140.0
 	 * @since 1.56.0
 	 *
 	 * @constructor

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

@@ -23,7 +23,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.138.0
+	 * @version 1.140.0
 	 * @since 1.56.0
 	 *
 	 * @constructor

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

@@ -901,7 +901,6 @@ sap.ui.define([
 				}
 				oButtonIcon = new SegmentedButtonItem({
 					icon: aCharts[i].getIcon(),
-					type: ButtonType.Transparent,
 					tooltip: aCharts[i].getTitle(),
 					customData: [new CustomData({
 						key: 'chartId',

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

@@ -33,8 +33,8 @@ sap.ui.define([
 	"sap/m/OverflowToolbar",
 	"sap/m/ToolbarSpacer",
 	"sap/m/Title",
-	"sap/m/ColumnPopoverSelectListItem",
-	"sap/m/ColumnHeaderPopover",
+	"sap/m/table/columnmenu/ActionItem",
+	"sap/m/table/columnmenu/Menu",
 	"sap/ui/core/CustomData",
 	"sap/ui/model/Sorter",
 	"sap/m/SearchField",
@@ -77,8 +77,8 @@ sap.ui.define([
 	OverflowToolbar,
 	ToolbarSpacer,
 	Title,
-	ColumnPopoverSelectListItem,
-	ColumnHeaderPopover,
+	ActionItem,
+	Columnmenu,
 	CustomData,
 	Sorter,
 	SearchField,
@@ -118,7 +118,7 @@ sap.ui.define([
 	 * @class
 	 * @public
 	 * @internal
-	 * @version 1.138.0
+	 * @version 1.140.0
 	*/
 	var CloudFilePicker = Dialog.extend("sap.suite.ui.commons.CloudFilePicker", {
 		metadata: {
@@ -707,31 +707,31 @@ sap.ui.define([
 			if (sColumnType === "CreatedByUser" || sColumnType === "FileShareItemContentSize" || sColumnType === "FileShareItemContentType") {
 				return;
 			}
-			var _aSortButton = [
-				new ColumnPopoverSelectListItem({
-					icon: "sap-icon://sort-ascending",
-					action: function() {
-						this._fHandleSorting(oColumn, true);
-					}.bind(this)
-				}),
-				new ColumnPopoverSelectListItem({
-					icon: "sap-icon://sort-descending",
-					action: function() {
-						this._fHandleSorting(oColumn, false);
-					}.bind(this)
-				})
-			];
-			var oHeaderPopOver = new ColumnHeaderPopover({
-				items: [_aSortButton]
+			var oColumnMenu = new Columnmenu({
+				items: [
+					new ActionItem({
+						icon: "sap-icon://sort-ascending",
+						press: function() {
+							this._fHandleSorting(oColumn, true);
+						}.bind(this)
+					}),
+					new ActionItem({
+						icon: "sap-icon://sort-descending",
+						press: function() {
+							this._fHandleSorting(oColumn, false);
+						}.bind(this)
+					})
+				]
 			});
-			oHeaderPopOver.openBy(oColumn);
+
+			oColumnMenu.openBy(oColumn);
 		}.bind(this));
 
 		if (this.getFilePickerType() === FilePickerType.Upload && this.getSelectionMode() === SelectionMode.MultiSelect) {
 			var oColumn = new Column({
 				width: "10%",
 				importance: "High"
-			})
+			});
 			this.oTableControl.insertColumn(oColumn, 0);
 			var oTemplate = this.oTableControl.getBindingInfo("items").template;
 			oTemplate.insertCell(
@@ -787,14 +787,14 @@ sap.ui.define([
 					if (oItem.FileShareItemName.includes('(')) {
 						var match = oItem.FileShareItemName.match(regex);
 						var counter = Number(match[0]);
-						if(counter > fcount) {
+						if (counter > fcount) {
 							fcount = counter;
 						}
 					}
 				});
 				if (fcount) {
 					fcount = fcount + 1;
-				} else{
+				} else {
 					fcount = fcount + 2;
 				}
 				oNewFolderInput.setValue(oResourceBundle.getText("CFP_TITLE_NEWFOLDER") + '(' + fcount + ')');
@@ -870,7 +870,7 @@ sap.ui.define([
 	};
 
 	CloudFilePicker.prototype._checkForDuplicateFileAndFolder = function (sSearchText, sFileShareKey, sDocumentType, sContentType,bNewFolderName) {
-		if(bNewFolderName) {
+		if (bNewFolderName) {
 			var filter = "startswith(FileShareItemName,\'" + sSearchText + "\') and FileShareItemKind eq \'" + sDocumentType + "\'and FileShareItemContentType eq \'" + sContentType + "\'";
 		} else {
 			filter = "FileShareItemName eq \'" + sSearchText + "\'and FileShareItemKind eq \'" + sDocumentType + "\'and FileShareItemContentType eq \'" + sContentType + "\'";

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

@@ -47,7 +47,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.138.0
+	 * @version 1.140.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -38,7 +38,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.138.0
+	 * @version 1.140.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -296,7 +296,14 @@ sap.ui.define([
 
 		eBarWrapper.addChild(eText);
 		eText.addClass("sapSuiteUiCommonsTimelineGroupHeaderSpan");
-		eText.addChildEscaped(" " + oTimelineItem.getTitle());
+
+		// Use the new _getGroupTypeLabel method
+		var sGroupTypeLabel = this._getGroupTypeLabel(oTimelineItem);
+		if (sGroupTypeLabel) {
+			eText.addChildEscaped(" " + sGroupTypeLabel + ": " + oTimelineItem.getTitle());
+		} else {
+			eText.addChildEscaped(" " + oTimelineItem.getTitle());
+		}
 
 		if (oTimelineItem._orientation === "V") {
 			eTimelineItem.addChild(eIconBarWrapper);
@@ -576,14 +583,50 @@ sap.ui.define([
 			eTimelineItem.setAttribute("aria-setsize", oTimelineItem._callParentFn("_getItemsCount"));
 		}
 		if (bIsGroupHeader) {
+			var sGroupTypeLabel = this._getGroupTypeLabel(oTimelineItem);
 			if (!oTimelineItem._isGroupCollapsed()) {
-				sGroupHeader = oResBundle.getText("TIMELINE_ACCESSIBILITY_GROUP_HEADER") + ": " + oTimelineItem.getTitle() + " " + oResBundle.getText("TIMELINE_ACCESSIBILITY_GROUP_EXPAND");
+				if (sGroupTypeLabel) {
+					sGroupHeader = oResBundle.getText("TIMELINE_ACCESSIBILITY_GROUP_HEADER") + ": " + sGroupTypeLabel + " " + oTimelineItem.getTitle() + " " + oResBundle.getText("TIMELINE_ACCESSIBILITY_GROUP_EXPAND");
+				} else {
+					sGroupHeader = oResBundle.getText("TIMELINE_ACCESSIBILITY_GROUP_HEADER") + ": " + oTimelineItem.getTitle() + " " + oResBundle.getText("TIMELINE_ACCESSIBILITY_GROUP_EXPAND");
+				}
 			} else {
-				sGroupHeader = oResBundle.getText("TIMELINE_ACCESSIBILITY_GROUP_HEADER") + ": " + oTimelineItem.getTitle() + " " + oResBundle.getText("TIMELINE_ACCESSIBILITY_GROUP_COLLAPSE");
+				if (sGroupTypeLabel) {
+					sGroupHeader = oResBundle.getText("TIMELINE_ACCESSIBILITY_GROUP_HEADER") + ": " + sGroupTypeLabel + " " + oTimelineItem.getTitle() + " " + oResBundle.getText("TIMELINE_ACCESSIBILITY_GROUP_COLLAPSE");
+				} else {
+					sGroupHeader = oResBundle.getText("TIMELINE_ACCESSIBILITY_GROUP_HEADER") + ": " + oTimelineItem.getTitle() + " " + oResBundle.getText("TIMELINE_ACCESSIBILITY_GROUP_COLLAPSE");
+				}
 			}
 			eTimelineItem.setAttribute("aria-label", sGroupHeader, false);
 		}
 	};
 
+	/**
+	 * Returns the localized label for the current Timeline grouping type (Year, Month, Quarter, Week, Day).
+	 * Looks up the value of the GroupByType property from the parent Timeline control and returns the corresponding
+	 * localized string from the resource bundle. If the type is not recognized, returns undefined.
+	 * @param {sap.suite.ui.commons.TimelineItem} oTimelineItem The item to be rendered
+	 * @returns {string|undefined} The localized label for the group type, or undefined if not found.
+	 * @private
+	 */
+	TimelineItemRenderer._getGroupTypeLabel = function (oTimelineItem) {
+		var oTimeline = oTimelineItem.getParent();
+		var sType = oTimeline.getGroupByType();
+
+		// Compare against enum values from library
+		var mTypeToKey = {};
+		mTypeToKey[library.TimelineGroupType.Year] = "TIMELINE_YEAR";
+		mTypeToKey[library.TimelineGroupType.Month] = "TIMELINE_MONTH";
+		mTypeToKey[library.TimelineGroupType.Quarter] = "TIMELINE_QUARTER";
+		mTypeToKey[library.TimelineGroupType.Week] = "TIMELINE_WEEK";
+		mTypeToKey[library.TimelineGroupType.Day] = "TIMELINE_DAY";
+
+		var sKey = mTypeToKey[sType];
+		if (sKey && oResBundle.hasText(sKey)) {
+			return oResBundle.getText(sKey);
+		}
+		return undefined;
+	};
+
 	return TimelineItemRenderer;
 }, true);

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

@@ -1117,7 +1117,7 @@ sap.ui.define([
                                 that._filterDialogRangePage.setFilterCount(0);
                                 that._objects.getTimestampFilterPicker().clearDates();
                                 if (that._rangeFilterType == "None") {
-                                    that.toggleGroupTypeSelector();
+                                    that.toggleGroupTypeSelector(that._rangeFilterType);
                                 }
                             },
 							filterDetailPageOpened: function (oItem) {

package/src/sap/suite/ui/commons/collaboration/CollaborationHelper.js

@@ -13,6 +13,10 @@ sap.ui.define(
 		var PARAM_SAP_STAGEVIEW_HASH = "&sap-stageview-hash";
 		var PARAM_SAP_CARD_ID = "&sap-ui-cardId";
 		var PARAM_SAP_XX_CARD_ID = "&sap-ui-xx-cardId";
+		var PARAM_SAP_CARD_INFO = "&info=";
+		var PARAM_SAP_USHELL_CONFIG = "sap-ushell-config";
+		var PARAM_SAP_COLLABORATION_TEAMS = "sap-collaboration-teams";
+		var PARAM_SAP_UI_FESR_ENV = "sap-ui-fesr-env";
 		var TRANSIENT_KEY = "transient";
 		var oLogger = Log.getLogger("sap.suite.ui.commons.collaboration.CollaborationHelper");
 
@@ -140,19 +144,112 @@ sap.ui.define(
 					const sUrl = sCurrentUrl.split(PARAM_SAP_CARD_ID)[0];
 					window.location.replace(sUrl);
 				} else if (sCurrentUrl.indexOf(PARAM_SAP_CARD_TITLE) > -1) {
-					const UshellContainer = sap.ui.require("sap/ushell/Container");
 					const sUrl = sCurrentUrl.split(PARAM_SAP_CARD_TITLE)[0];
-					// Get indication is if we are in AppRuntime (for special use cases handling, e.g. BTP Fiori App in S/Cube)
-					if (UshellContainer?.inAppRuntime()){
-						await CollaborationMessageConsumer.updateTopLevelURLforAppRuntime(sUrl);
-					} else {
-						window.location.replace(sUrl);
-					}
+					await this._redirectBasedOnRuntime(sUrl);
+				} else if (sCurrentUrl.includes(PARAM_SAP_CARD_INFO) && this._isFromTeams(sCurrentUrl)) {
+					const sUrl = sCurrentUrl.split(PARAM_SAP_CARD_INFO)[0];
+					await this._redirectBasedOnRuntime(sUrl);
 				}
 				return Promise.resolve();
 			}.bind(this));
 		};
 
+		/**
+		 * Checks whether the given URL indicates that it originated from a Microsoft Teams environment.
+		 *
+		 * This is determined by the presence of the query parameter `sap-collaboration-teams=true`.
+		 *
+		 * @param {string} sCurrentUrl - The full URL to inspect.
+		 * @returns {boolean} True if the URL contains `sap-collaboration-teams=true`; otherwise, false.
+		 */
+		CollaborationHelper._isFromTeams = function (sCurrentUrl) {
+			const urlObj = new URL(sCurrentUrl);
+			const bIsFromTeams = urlObj.searchParams.get("sap-collaboration-teams");
+			return bIsFromTeams === "true";
+		};
+
+		/**
+		 * Handles URL redirection according to the runtime environment.
+		 *
+		 * - In AppRuntime (e.g., BTP Fiori App in S/Cube), updates the top-level URL.
+		 * - Otherwise, performs a standard window location redirect.
+		 *
+		 * @param {string} sUrl - The target URL for redirection.
+		 * @private
+		 */
+		CollaborationHelper._redirectBasedOnRuntime = async function (sUrl) {
+			const UshellContainer = sap.ui.require("sap/ushell/Container");
+
+			// Get indication is if we are in AppRuntime (for special use cases handling, e.g. BTP Fiori App in S/Cube)
+			if (UshellContainer && UshellContainer.inAppRuntime()) {
+				await CollaborationMessageConsumer.updateTopLevelURLforAppRuntime(sUrl);
+			} else {
+				const targetUrl = this._stripTeamsParams(sUrl);
+				window.location.replace(targetUrl);
+			}
+		};
+
+		/**
+		 * Removes 'sap-ushell-config' and 'sap-collaboration-teams' query parameters
+		 * from the given URL while preserving the hash fragment.
+		 *
+		 * @param {string} sUrl - The original full URL
+		 * @returns {string} - The cleaned URL
+		 * @private
+		 */
+		CollaborationHelper._removeTeamsParams = function (sUrl) {
+			try {
+				const urlParts = sUrl.split("#");
+				const baseUrl = urlParts[0];
+				const hashPart = urlParts[1] ? "#" + urlParts[1] : "";
+
+				const [path, queryString] = baseUrl.split("?");
+				if (!queryString) {
+					return sUrl;
+				}
+
+				const params = new URLSearchParams(queryString);
+				params.delete(PARAM_SAP_USHELL_CONFIG);
+				params.delete(PARAM_SAP_COLLABORATION_TEAMS);
+				params.delete(PARAM_SAP_UI_FESR_ENV);
+
+				const newBaseUrl = params.toString()
+					? `${path}?${params.toString()}`
+					: path;
+
+				return newBaseUrl + hashPart;
+			} catch (e) {
+				return sUrl;
+			}
+		};
+
+		/**
+		 * If the current window is the top window, we assume it's not running inside an iframe, e.g. Microsoft Teams.
+		 * In this case, we remove the Teams parameters from the URL.
+		 *
+		 * @param {string} sUrl The URL to be cleaned of Teams parameters.
+		 * @returns {string} - The cleaned URL
+		 * @private
+		 */
+		CollaborationHelper._stripTeamsParams = function (sUrl) {
+			if (this._isTopWindow()) {
+				return this._removeTeamsParams(sUrl);
+			}
+			return sUrl;
+		};
+
+		/**
+		 * Determines whether the current window is the top-level window.
+		 * This is typically used to detect if the application is running inside an iframe (e.g., in Microsoft Teams).
+		 *
+		 * @returns {boolean} - Returns true if the current window is not inside an iframe, false otherwise.
+		 * @private
+		 */
+		CollaborationHelper._isTopWindow = function () {
+			return window.self === window.top;
+		};
+
+
 		/**
 		 * Hides the avatar of the user if the app is running in the Microsoft Teams application.
 		 * @private

package/src/sap/suite/ui/commons/collaboration/ContactPopover.fragment.xml

@@ -7,11 +7,11 @@
 		class="sapUiContentPadding"
 		placement="Auto"
         showHeader="false"
-        contentWidth="25rem"
+        contentWidth="21.875rem"
         afterClose="afterClose"
         afterOpen="afterOpen">
         <VBox visible="{userData>/isUserExistsInTeams}">
-            <HBox class="sapUiSmallMarginBeginEnd sapUiSmallMarginTopBottom" >
+            <HBox>
                 <Avatar id="avatar" src="{= ${userData>/photo} ? ${userData>/photo} : 'sap-icon://person-placeholder' }"
                     displaySize="M" class="sapUiSmallMarginEnd" displayShape="Circle" macrodata:email="{userData>/mail}" fesr:press="MST:ContactAction"
                     macrodata:type="chat" tooltip="{userData>/badgeTooltip}" badgeValueState="{userData>/badgeValueState}" badgeTooltip="{userData>/badgeTooltip}" badgeIcon="{userData>/badgeIcon}"/>
@@ -20,9 +20,8 @@
                     <Text text="{userData>/jobtitle}"/>
                 </VBox>
             </HBox>
-            <Toolbar width="100%" height="1px" visible="{userData>/isDirectCommunicationEnabled}"/>
-            <OverflowToolbar visible="{userData>/isDirectCommunicationEnabled}">
-				<Title text="{i18n>COLLABORATION_MSTEAMS_SHARE}" level="H5" class="sapUiTinyMarginBegin"/>
+            <OverflowToolbar visible="{userData>/isDirectCommunicationEnabled}" class="sapMFlexItem sapUiNoContentPadding sapUiTinyMarginTop">
+				<Title text="{i18n>COLLABORATION_MSTEAMS_SHARE}" level="H5"/>
 				<ToolbarSpacer/>
                 <Button
                     press="handleMSTeamsPress"
@@ -30,8 +29,8 @@
                     macrodata:type="chat"
                     tooltip="{i18n>CHAT_BUTTON_TOOLTIP}"
                     icon="sap-icon://discussion"
-                    type="Ghost"
-                    class="sapUiSmallMarginEnd"
+                    type="Transparent"
+					class="sapUiTinyMarginEnd"
                     fesr:press="MST:ContactAction"
                 />
                 <Button
@@ -40,8 +39,8 @@
                     macrodata:type="videoCall"
                     tooltip="{i18n>VIDEOCALL_BUTTON_TOOLTIP}"
                     icon="sap-icon://video"
-                    type="Ghost"
-                    class="sapUiSmallMarginEnd"
+                    type="Transparent"
+					class="sapUiTinyMarginEnd"
                     fesr:press="MST:ContactAction"
                 />
                 <Button
@@ -50,31 +49,32 @@
                     macrodata:type="call"
                     tooltip="{i18n>CALL_BUTTON_TOOLTIP}"
                     icon="sap-icon://call"
-                    type="Ghost"
+                    type="Transparent"
+					class="sapUiTinyMarginEnd"
                     fesr:press="MST:ContactAction"
                 />
             </OverflowToolbar >
-            
-            <VBox class="sapUiSmallMarginBeginEnd sapUiSmallMarginTopBottom">
+
+            <VBox class="sapMFlexItem sapUiNoContentPadding sapUiSmallMarginTop">
 
                 <Title text="{i18n>POPOVER_CONTACT_DETAILS}" level="H5" class="sapUiTinyMarginBottom sapUiTinyMarginTop" />
 
-                <VBox visible="{= !!${userData>/mobilephone}}" class="sapUiTinyMarginBottom" >
+                <VBox visible="{= !!${userData>/mobilephone}}" class="sapUiTinyMarginTop sapUiTinyMarginBottom" >
                     <Label id="UserMobile" text="{i18n>POPOVER_CONTACT_SECTION_MOBILE}:" />
                     <Link text="{userData>/mobilephone}" href="{path: 'userData>/mobilephone', formatter: '.formatUri'}" ariaLabelledBy="UserMobile"/>
                 </VBox>
 
-                <VBox visible="{= !!${userData>/businessphone}}"  class="sapUiTinyMarginBottom" >
+                <VBox visible="{= !!${userData>/businessphone}}"  class="sapUiTinyMarginTop sapUiTinyMarginBottom" >
                     <Label id="UserPhone" text="{i18n>POPOVER_CONTACT_SECTION_PHONE}:" />
                     <Link text="{userData>/businessphone}" href="{path: 'userData>/businessphone', formatter: '.formatUri'}" ariaLabelledBy="UserPhone"/>
                 </VBox>
 
-                <VBox visible="{= !!${userData>/mail}}"  class="sapUiTinyMarginBottom" >
+                <VBox visible="{= !!${userData>/mail}}"  class="sapUiTinyMarginTop sapUiTinyMarginBottom" >
                     <Label id="UserEmail" text="{i18n>POPOVER_CONTACT_SECTION_EMAIL}:" />
                     <Link text="{userData>/mail}" href="{path: 'userData>/mail', formatter: '.formatUri'}" ariaLabelledBy="UserEmail"/>
                 </VBox>
 
-                <VBox visible="{= !!${userData>/officelocation}}"  class="sapUiTinyMarginBottom" >                
+                <VBox visible="{= !!${userData>/officelocation}}"  class="sapUiTinyMarginTop sapUiTinyMarginBottom" >
                     <Label text="{i18n>POPOVER_CONTACT_SECTION_OFFICE_LOCATION}:" />
                     <Text text="{userData>/officelocation}" />
                 </VBox>
@@ -90,4 +90,4 @@
 			</IllustratedMessage >
         </HBox>
 	</Popover>
-</core:FragmentDefinition>
+</core:FragmentDefinition>