@sapui5/sap.fe.templates 1.103.0 → 1.104.1

package/src/sap/fe/templates/ListReport/view/fragments/MultipleMode.fragment.ts

@@ -1,62 +1,90 @@
 import { BuildingBlockBase, defineBuildingBlock, xmlAttribute } from "sap/fe/core/buildingBlocks/BuildingBlock";
 import { xml } from "sap/fe/core/buildingBlocks/BuildingBlockRuntime";
-import type { ListReportDefinition } from "sap/fe/core/converters/templates/ListReportConverter";
+import type {
+	ListReportDefinition,
+	SingleChartViewDefinition,
+	SingleTableViewDefinition
+} from "sap/fe/core/converters/templates/ListReportConverter";
 
 @defineBuildingBlock({ name: "MultipleMode", namespace: "sap.fe.templates.ListReport.view.fragments", isOpen: true })
 export default class MultipleMode extends BuildingBlockBase {
 	@xmlAttribute({ type: "sap.ui.model.Context" })
 	converterContext!: ListReportDefinition;
 
+	getInnerControlsAPI() {
+		return (
+			this.converterContext?.views
+				.reduce((innerControls: string[], view) => {
+					const innerControlId =
+						(view as SingleTableViewDefinition).tableControlId || (view as SingleChartViewDefinition).chartControlId;
+					if (innerControlId) {
+						innerControls.push(`${innerControlId}::${(view as SingleTableViewDefinition).tableControlId ? "Table" : "Chart"}`);
+					}
+					return innerControls;
+				}, [])
+				.join(",") || ""
+		);
+	}
+
 	getTemplate() {
 		return xml`
-			<IconTabBar
+			<fe:MultipleModeControl
 				xmlns="sap.m"
-
-				xmlns:customData="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
-				expandable="false"
-				headerMode="Inline"
-				id="${this.converterContext.iconTabBarId}"
+				xmlns:fe="sap.fe.templates.ListReport.controls"
+				xmlns:core="sap.ui.core"
+				xmlns:macro="sap.fe.macros"
 				select=".handlers.onTabMultiModeChange"
-				stretchContentHeight="true"
-				customData:showCounts="${this.converterContext.showTabCounts}"
+				innerControls= "${this.getInnerControlsAPI()}"
+				showCounts="${this.converterContext.multiViewsControl?.showTabCounts}"
+				freezeContent="true"
+				id="${this.converterContext.multiViewsControl?.id}::Control"
 			>
-				<items>
-				${this.converterContext.views
-					.map((view, viewIdx) => {
-						return `<template:with path="converterContext>views/${viewIdx}/" var="view"
-									xmlns:core="sap.ui.core"
-									xmlns:template="http://schemas.sap.com/sapui5/extension/sap.ui.core.template/1">
-							<template:with path="view>presentation" var="presentationContext">
-							<IconTabFilter
-								text="${view.title}"
-								key="{= \${view>tableControlId} || \${view>customTabId} || \${view>chartControlId}}"
-								customData:selectionVariant="{view>selectionVariantPath}"
-								visible="{view>visible}"
-							>
-								<content>
-									<template:if test="{= \${view>type} === 'Custom'}">
-										<template:then>
-											<core:Fragment fragmentName="sap.fe.templates.ListReport.view.fragments.CustomView" type="XML" />
-										</template:then>
-										<template:else>
-											<MessageStrip
-										        text="{= '{= (\${internal>tabs/ignoredFieldsTitle/' + (\${view>tableControlId} || \${view>chartControlId}) + '} ) }' }"
-												type="Information"
-												showIcon="true"
-												showCloseButton="true"
-												class="sapUiSmallMargin"
-												visible="{= '{= (\${internal>tabs/ignoredFields/' +(\${view>tableControlId} || \${view>chartControlId}) + '} || []).length>0 }' }"
-											>
-											</MessageStrip>
-											<core:Fragment fragmentName="sap.fe.templates.ListReport.view.fragments.CollectionVisualization" type="XML" />
-										</template:else>
-									</template:if>
-								</content>
-							</IconTabFilter>
-						</template:with></template:with>`;
-					})
-					.join("")}
-				</items>
-			</IconTabBar>`;
+				<IconTabBar
+					expandable="false"
+					headerMode="Inline"
+					id="${this.converterContext.multiViewsControl?.id}"
+					stretchContentHeight="true"
+				>
+					<items>
+					${this.converterContext.views
+						.map((view, viewIdx) => {
+							return `<template:with path="converterContext>views/${viewIdx}/" var="view"
+										template:require="{
+											ID: 'sap/fe/core/helpers/StableIdHelper'
+										}"
+										xmlns:core="sap.ui.core"
+										xmlns:template="http://schemas.sap.com/sapui5/extension/sap.ui.core.template/1">
+								<template:with path="view>presentation" var="presentationContext">
+								<IconTabFilter
+									text="${view.title}"
+									key="{= ID.generate([\${view>tableControlId} || \${view>customTabId} || \${view>chartControlId}])}"
+									visible="{view>visible}"
+								>
+									<content>
+										<template:if test="{= \${view>type} === 'Custom'}">
+											<template:then>
+												<core:Fragment fragmentName="sap.fe.templates.ListReport.view.fragments.CustomView" type="XML" />
+											</template:then>
+											<template:else>
+												<MessageStrip
+													text="{= '{= (\${tabsInternal>/' + (\${view>tableControlId} || \${view>chartControlId}) + '/notApplicable/title} ) }' }"
+													type="Information"
+													showIcon="true"
+													showCloseButton="true"
+													class="sapUiSmallMargin"
+													visible="{= '{= (\${tabsInternal>/' + (\${view>tableControlId} || \${view>chartControlId}) + '/notApplicable/fields} || []).length>0 }' }"
+												>
+												</MessageStrip>
+												<core:Fragment fragmentName="sap.fe.templates.ListReport.view.fragments.CollectionVisualization" type="XML" />
+											</template:else>
+										</template:if>
+									</content>
+								</IconTabFilter>
+							</template:with></template:with>`;
+						})
+						.join("")}
+					</items>
+				</IconTabBar>
+			</fe:MultipleModeControl>`;
 	}
 }

package/src/sap/fe/templates/ObjectPage/ObjectPage.view.xml

@@ -284,7 +284,7 @@
 									unittest:id="FlexBoxTest"
 									dt:designtime="sap/fe/templates/ObjectPage/designtime/FlexBox.designtime"
 									wrap="Wrap"
-									fitContainer="true"
+									fitContainer="false"
 									alignItems="Stretch"
 								>
 									<template:if test="{header>avatar}">