@sapui5/sap.fe.macros 1.141.0 → 1.142.0

package/src/sap/fe/macros/table/MdcTableTemplate.tsx

@@ -1,6 +1,7 @@
 import type { ConvertedMetadata, EntitySet, NavigationProperty } from "@sap-ux/vocabularies-types";
 import type {
 	Chart,
+	ConnectedFields,
 	DataField,
 	DataFieldForAction,
 	DataFieldForAnnotation,
@@ -47,7 +48,8 @@ import type {
 	CustomBasedTableColumn
 } from "sap/fe/core/converters/controls/Common/table/Columns";
 import { StandardActionKeys, type StandardAction } from "sap/fe/core/converters/controls/Common/table/StandardActions";
-import { UI, singletonPathVisitor } from "sap/fe/core/helpers/BindingHelper";
+import { getConnectedFieldsData } from "sap/fe/core/converters/helpers/DataFieldHelper";
+import { Entity, UI, singletonPathVisitor } from "sap/fe/core/helpers/BindingHelper";
 import ModelHelper from "sap/fe/core/helpers/ModelHelper";
 import { generate } from "sap/fe/core/helpers/StableIdHelper";
 import { isAnnotationOfTerm, isAnnotationOfType, isSingleton } from "sap/fe/core/helpers/TypeGuards";
@@ -80,6 +82,7 @@ import MenuItem from "sap/m/MenuItem";
 import ObjectStatus from "sap/m/ObjectStatus";
 import SegmentedButton from "sap/m/SegmentedButton";
 import SegmentedButtonItem from "sap/m/SegmentedButtonItem";
+import Text from "sap/m/Text";
 import VBox from "sap/m/VBox";
 import { ObjectMarkerVisibility } from "sap/m/library";
 import CellSelector from "sap/m/plugins/CellSelector";
@@ -180,6 +183,7 @@ function getDataStateIndicator(handlerProvider: TableEventHandlerProvider): Data
 	return (
 		<DataStateIndicator
 			filter={handlerProvider.dataStateIndicatorFilter}
+			enabled={compileExpression(not(equal(pathInModel("enableTableDataStateIndicator", "pageInternal"), false)))}
 			enableFiltering={true}
 			dataStateChange={handlerProvider.dataStateChange}
 		/>
@@ -921,6 +925,7 @@ export function getComputedColumn(
 				<DraftIndicator
 					draftIndicatorType={ObjectMarkerVisibility.IconOnly}
 					contextPath={collection.getPath()}
+					visible={or(not(Entity.IsActive), Entity.HasDraft)}
 					usedInTable={true}
 					usedInAnalyticalTable={enableAnalytics}
 				/>
@@ -1163,7 +1168,8 @@ export function getMacroFieldTemplate(
 	ariaLabelledBy: string | undefined,
 	showEmptyIndicator: boolean | undefined,
 	className: string | undefined,
-	handlerProvider: TableEventHandlerProvider
+	handlerProvider: TableEventHandlerProvider,
+	isConnectedField = false
 ): string {
 	const dataFieldObject = dataFieldContext.getObject();
 	let columnEditMode: string | undefined;
@@ -1200,7 +1206,7 @@ export function getMacroFieldTemplate(
 		ignoreNavigationAvailable: enableAnalytics ?? false,
 		isAnalytics: enableAnalytics,
 		forInlineCreationRows: creationMode?.name === "InlineCreationRows",
-		isCurrencyOrUnitAligned: true,
+		isCurrencyOrUnitAligned: isConnectedField ? false : true,
 		compactSemanticKey: isCompactType === undefined ? undefined : `${isCompactType}`,
 		dateTimeStyle: getDefaultDateTimeStyle(dataFieldContext),
 		isAnalyticalAggregatedRow: tableDefinition.control.analyticalConfiguration?.aggregationOnLeafLevel,
@@ -1212,13 +1218,14 @@ export function getMacroFieldTemplate(
 			editMode={columnEditMode}
 			contextPath={collection.getPath()}
 			metaPath={dataFieldContext.getPath()}
-			textAlign={textAlign}
+			textAlign={isConnectedField ? "Left" : textAlign}
 			wrap={tableType === "ResponsiveTable"}
 			class={className}
 			liveChange={handlerProvider.fieldLiveChange}
-			ariaLabelledBy={ariaLabelledBy ? [ariaLabelledBy] : undefined}
+			ariaLabelledBy={ariaLabelledBy ? ariaLabelledBy.split(" ") : undefined}
 			navigateAfterAction={column.isNavigable}
 			showErrorObjectStatus={column.formatOptions?.showErrorObjectStatus as unknown as boolean}
+			disableStrictHandling={column.disableStrictHandling}
 		>
 			{{
 				formatOptions: <FieldFormatOptions {...formatOptions} />
@@ -1323,7 +1330,7 @@ function getColumnContentTemplate(
 		const dataFieldCollectionContext = dataFieldContext
 			.getModel()
 			.createBindingContext(dataFieldContext.getPath() + "/Target/$AnnotationPath/Data");
-		const fieldGroupColectionLength = fieldGroup.Data.length - 1;
+		const fieldGroupCollectionLength = fieldGroup.Data.length - 1;
 
 		const items = fieldGroup.Data.map((fieldGroupDataField: DataFieldAbstractTypes, fieldGroupDataFieldIdx: number) => {
 			const fieldGroupDataFieldContext = dataFieldCollectionContext
@@ -1371,7 +1378,7 @@ function getColumnContentTemplate(
 									true,
 									TableHelper.getMarginClass(
 										fieldGroupDataFieldContext.getObject("Target/$AnnotationPath/Visualization/$EnumMember"),
-										fieldGroupDataFieldIdx === fieldGroupColectionLength
+										fieldGroupDataFieldIdx === fieldGroupCollectionLength
 									),
 									handlerProvider
 								)
@@ -1397,7 +1404,7 @@ function getColumnContentTemplate(
 					false,
 					TableHelper.getMarginClass(
 						fieldGroupDataFieldContext.getObject("Target/$AnnotationPath/Visualization/$EnumMember"),
-						fieldGroupDataFieldIdx === fieldGroupColectionLength
+						fieldGroupDataFieldIdx === fieldGroupCollectionLength
 					),
 					handlerProvider
 				);
@@ -1417,7 +1424,7 @@ function getColumnContentTemplate(
 			<VBox
 				visible={TableHelper.getVBoxVisibility(
 					dataFieldCollectionContext.getObject(),
-					column.FieldGroupHiddenExpressions,
+					column.collectionFieldsHiddenExpression,
 					dataFieldContext.getObject()
 				)}
 			>
@@ -1426,6 +1433,115 @@ function getColumnContentTemplate(
 				}}
 			</VBox>
 		);
+	} else if (
+		isAnnotationOfType<DataFieldForAnnotation>(dataField, UIAnnotationTypes.DataFieldForAnnotation) &&
+		isAnnotationOfTerm<ConnectedFields>(dataField.Target.$target, UIAnnotationTerms.ConnectedFields)
+	) {
+		const connectedFields: ConnectedFields = dataField.Target.$target;
+		const connectedFieldsContext = dataFieldContext
+			.getModel()
+			.createBindingContext(dataFieldContext.getPath() + "/Target/$AnnotationPath/Data");
+		const fieldsDelimiter = CommonHelper.getDelimiter(connectedFields.Template as string);
+		const connectedFieldsData = getConnectedFieldsData(connectedFields);
+		const items = connectedFieldsData.map((connectedFieldsElement: DataFieldAbstractTypes, connectedFieldsElementIdx: number) => {
+			const connectedFieldsElementContext = dataFieldContext
+				.getModel()
+				.createBindingContext(`${connectedFieldsContext.getPath()}/${(connectedFieldsElement as DataField)?.Value?.path}`);
+			const fieldTemplate = getMacroFieldTemplate(
+				tableId,
+				tableDefinition,
+				column,
+				connectedFieldsElementContext,
+				collection,
+				enableAnalytics,
+				tableType,
+				isTableReadOnly,
+				creationMode,
+				undefined,
+				isCompactType,
+				"Left",
+				`${TableHelper.getColumnStableId(tableId, dataFieldOP)}`,
+				false,
+				undefined,
+				handlerProvider,
+				true
+			);
+
+			if (connectedFieldsElementIdx < connectedFieldsData.length - 1) {
+				if (tableType === "ResponsiveTable") {
+					return [
+						fieldTemplate,
+						/*Use ObjectStatus in ResponsiveTable: its line box matches cell height,
+        				so the delimiter is vertically centered in both display & edit modes.*/
+						<ObjectStatus
+							// NBSP on both sides to keep spacing
+							text={`\u00A0${fieldsDelimiter}\u00A0`}
+							state="None"
+						>
+							{{
+								// Prevent the delimiter from being squeezed to zero width on tight layouts.
+								layoutData: <FlexItemData shrinkFactor={0} />
+							}}
+						</ObjectStatus>
+					];
+				}
+
+				// Grid/Tree tables: Text works fine here (keeps baseline behavior in display, centers in edit).
+				return [
+					fieldTemplate,
+					<Text
+						// NBSP on both sides to keep spacing
+						text={`\u00A0${fieldsDelimiter}\u00A0`}
+						//single line
+						wrapping="false"
+						// actually render the NBSPs
+						renderWhitespace="true"
+					>
+						{{
+							// Avoid squeeze-to-dot effect when space is tight.
+							layoutData: <FlexItemData shrinkFactor={0} />
+						}}
+					</Text>
+				];
+			} else {
+				return [fieldTemplate];
+			}
+		});
+
+		/* Inner container alignment:
+           		- ResponsiveTable: always center (better visual consistency)
+           		- Grid/Tree: baseline in display, center in edit (mix of Text/Input heights)*/
+		const innerHBox = (
+			<HBox
+				wrap="NoWrap"
+				alignItems={
+					tableType === "ResponsiveTable"
+						? "Center"
+						: compileExpression(ifElse(UI.IsEditable, constant("Center"), constant("Baseline")))
+				}
+			>
+				{{
+					items: items
+				}}
+			</HBox>
+		);
+
+		// Outer wrapper: render a real box, take the row height, and center vertically.
+		// This guarantees vertical centering of the whole connected-fields block within the cell.
+		template = (
+			<HBox
+				wrap="NoWrap"
+				renderType="Div"
+				fitContainer={true}
+				alignItems="Center"
+				visible={column.collectionFieldsHiddenExpression}
+				justifyContent={column.horizontalAlign}
+			>
+				{{
+					items: [innerHBox]
+				}}
+			</HBox>
+		);
 	} else {
 		template = getMacroFieldTemplate(
 			tableId,
@@ -1499,6 +1615,7 @@ export function getColumnTemplate(
 	const enableAutoColumnWidth = tableProperties.enableAutoColumnWidth ?? tableProperties.tableDefinition.control.enableAutoColumnWidth;
 	const widthIncludingColumnHeader = tableProperties.tableDefinition.control.widthIncludingColumnHeader;
 	const tableType = tableProperties.tableDefinition.control.type;
+	const isConnectedField = dataFieldObject.Target?.$AnnotationPath?.includes(UIAnnotationTerms.ConnectedFields);
 
 	return (
 		<Column
@@ -1538,7 +1655,11 @@ export function getColumnTemplate(
 			header={column.label || column.name}
 			propertyKey={column.name}
 			hAlign={column.horizontalAlign || FieldHelper.getColumnAlignment(dataFieldObject, { collection: collection })}
-			headerVisible={TableHelper.setHeaderLabelVisibility(dataFieldObject, dataFieldContext.getObject("Target/$AnnotationPath/Data"))}
+			headerVisible={
+				isConnectedField
+					? true
+					: TableHelper.setHeaderLabelVisibility(dataFieldObject, dataFieldContext.getObject("Target/$AnnotationPath/Data"))
+			}
 			tooltip={column.tooltip}
 			required={tableProperties.readOnly ? undefined : column.required}
 		>

package/src/sap/fe/macros/table/OverflowGroups.js

@@ -0,0 +1,59 @@
+/*!
+ * SAP UI development toolkit for HTML5 (SAPUI5)
+ *      (c) Copyright 2009-2025 SAP SE. All rights reserved
+ */
+sap.ui.define(["sap/fe/base/ClassSupport", "sap/fe/macros/controls/BuildingBlockObjectProperty"], function (ClassSupport, BuildingBlockObjectProperty) {
+  "use strict";
+
+  var _dec, _dec2, _dec3, _class, _class2, _descriptor, _descriptor2;
+  var _exports = {};
+  var property = ClassSupport.property;
+  var defineUI5Class = ClassSupport.defineUI5Class;
+  function _initializerDefineProperty(e, i, r, l) { r && Object.defineProperty(e, i, { enumerable: r.enumerable, configurable: r.configurable, writable: r.writable, value: r.initializer ? r.initializer.call(l) : void 0 }); }
+  function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
+  function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+  function _applyDecoratedDescriptor(i, e, r, n, l) { var a = {}; return Object.keys(n).forEach(function (i) { a[i] = n[i]; }), a.enumerable = !!a.enumerable, a.configurable = !!a.configurable, ("value" in a || a.initializer) && (a.writable = !0), a = r.slice().reverse().reduce(function (r, n) { return n(i, e, r) || r; }, a), l && void 0 !== a.initializer && (a.value = a.initializer ? a.initializer.call(l) : void 0, a.initializer = void 0), void 0 === a.initializer ? (Object.defineProperty(i, e, a), null) : a; }
+  function _initializerWarningHelper(r, e) { throw Error("Decorating class property failed. Please ensure that transform-class-properties is enabled and runs after the decorators transform."); }
+  /**
+   * Configuration of toolbar separators to be used inside the table toolbar
+   * @public
+   */
+  let OverflowGroup = (_dec = defineUI5Class("sap.fe.macros.table.OverflowGroup"), _dec2 = property({
+    type: "int",
+    required: true
+  }), _dec3 = property({
+    type: "boolean"
+  }), _dec(_class = (_class2 = /*#__PURE__*/function (_BuildingBlockObjectP) {
+    function OverflowGroup(settings) {
+      var _this;
+      _this = _BuildingBlockObjectP.call(this, settings) || this;
+      /**
+       * Defines the group of the toolbar separator in the overflow toolbar.
+       * @public
+       */
+      _initializerDefineProperty(_this, "overflowGroup", _descriptor, _this);
+      /**
+       * Defines if a toolbar separator should be displayed.
+       * @public
+       */
+      _initializerDefineProperty(_this, "showSeparator", _descriptor2, _this);
+      return _this;
+    }
+    _exports = OverflowGroup;
+    _inheritsLoose(OverflowGroup, _BuildingBlockObjectP);
+    return OverflowGroup;
+  }(BuildingBlockObjectProperty), _descriptor = _applyDecoratedDescriptor(_class2.prototype, "overflowGroup", [_dec2], {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    initializer: null
+  }), _descriptor2 = _applyDecoratedDescriptor(_class2.prototype, "showSeparator", [_dec3], {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    initializer: null
+  }), _class2)) || _class);
+  _exports = OverflowGroup;
+  return _exports;
+}, false);
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJPdmVyZmxvd0dyb3VwIiwiX2RlYyIsImRlZmluZVVJNUNsYXNzIiwiX2RlYzIiLCJwcm9wZXJ0eSIsInR5cGUiLCJyZXF1aXJlZCIsIl9kZWMzIiwiX2NsYXNzIiwiX2NsYXNzMiIsIl9CdWlsZGluZ0Jsb2NrT2JqZWN0UCIsInNldHRpbmdzIiwiX3RoaXMiLCJjYWxsIiwiX2luaXRpYWxpemVyRGVmaW5lUHJvcGVydHkiLCJfZGVzY3JpcHRvciIsIl9kZXNjcmlwdG9yMiIsIl9leHBvcnRzIiwiX2luaGVyaXRzTG9vc2UiLCJCdWlsZGluZ0Jsb2NrT2JqZWN0UHJvcGVydHkiLCJfYXBwbHlEZWNvcmF0ZWREZXNjcmlwdG9yIiwicHJvdG90eXBlIiwiY29uZmlndXJhYmxlIiwiZW51bWVyYWJsZSIsIndyaXRhYmxlIiwiaW5pdGlhbGl6ZXIiXSwic291cmNlUm9vdCI6Ii4iLCJzb3VyY2VzIjpbIk92ZXJmbG93R3JvdXBzLnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGRlZmluZVVJNUNsYXNzLCBwcm9wZXJ0eSwgdHlwZSBQcm9wZXJ0aWVzT2YgfSBmcm9tIFwic2FwL2ZlL2Jhc2UvQ2xhc3NTdXBwb3J0XCI7XG5pbXBvcnQgQnVpbGRpbmdCbG9ja09iamVjdFByb3BlcnR5IGZyb20gXCJzYXAvZmUvbWFjcm9zL2NvbnRyb2xzL0J1aWxkaW5nQmxvY2tPYmplY3RQcm9wZXJ0eVwiO1xuXG4vKipcbiAqIENvbmZpZ3VyYXRpb24gb2YgdG9vbGJhciBzZXBhcmF0b3JzIHRvIGJlIHVzZWQgaW5zaWRlIHRoZSB0YWJsZSB0b29sYmFyXG4gKiBAcHVibGljXG4gKi9cbkBkZWZpbmVVSTVDbGFzcyhcInNhcC5mZS5tYWNyb3MudGFibGUuT3ZlcmZsb3dHcm91cFwiKVxuZXhwb3J0IGRlZmF1bHQgY2xhc3MgT3ZlcmZsb3dHcm91cCBleHRlbmRzIEJ1aWxkaW5nQmxvY2tPYmplY3RQcm9wZXJ0eSB7XG5cdC8qKlxuXHQgKiBEZWZpbmVzIHRoZSBncm91cCBvZiB0aGUgdG9vbGJhciBzZXBhcmF0b3IgaW4gdGhlIG92ZXJmbG93IHRvb2xiYXIuXG5cdCAqIEBwdWJsaWNcblx0ICovXG5cdEBwcm9wZXJ0eSh7IHR5cGU6IFwiaW50XCIsIHJlcXVpcmVkOiB0cnVlIH0pXG5cdG92ZXJmbG93R3JvdXAhOiBudW1iZXI7XG5cblx0LyoqXG5cdCAqIERlZmluZXMgaWYgYSB0b29sYmFyIHNlcGFyYXRvciBzaG91bGQgYmUgZGlzcGxheWVkLlxuXHQgKiBAcHVibGljXG5cdCAqL1xuXHRAcHJvcGVydHkoeyB0eXBlOiBcImJvb2xlYW5cIiB9KVxuXHRzaG93U2VwYXJhdG9yPzogYm9vbGVhbjtcblxuXHRjb25zdHJ1Y3RvcihzZXR0aW5nczogUHJvcGVydGllc09mPE92ZXJmbG93R3JvdXA+KSB7XG5cdFx0c3VwZXIoc2V0dGluZ3MpO1xuXHR9XG59XG4iXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7RUFHQTtBQUNBO0FBQ0E7QUFDQTtFQUhBLElBS3FCQSxhQUFhLElBQUFDLElBQUEsR0FEakNDLGNBQWMsQ0FBQyxtQ0FBbUMsQ0FBQyxFQUFBQyxLQUFBLEdBTWxEQyxRQUFRLENBQUM7SUFBRUMsSUFBSSxFQUFFLEtBQUs7SUFBRUMsUUFBUSxFQUFFO0VBQUssQ0FBQyxDQUFDLEVBQUFDLEtBQUEsR0FPekNILFFBQVEsQ0FBQztJQUFFQyxJQUFJLEVBQUU7RUFBVSxDQUFDLENBQUMsRUFBQUosSUFBQSxDQUFBTyxNQUFBLElBQUFDLE9BQUEsMEJBQUFDLHFCQUFBO0lBRzlCLFNBQUFWLGNBQVlXLFFBQXFDLEVBQUU7TUFBQSxJQUFBQyxLQUFBO01BQ2xEQSxLQUFBLEdBQUFGLHFCQUFBLENBQUFHLElBQUEsT0FBTUYsUUFBUSxDQUFDO01BZmhCO0FBQ0Q7QUFDQTtBQUNBO01BSENHLDBCQUFBLENBQUFGLEtBQUEsbUJBQUFHLFdBQUEsRUFBQUgsS0FBQTtNQU9BO0FBQ0Q7QUFDQTtBQUNBO01BSENFLDBCQUFBLENBQUFGLEtBQUEsbUJBQUFJLFlBQUEsRUFBQUosS0FBQTtNQUFBLE9BQUFBLEtBQUE7SUFTQTtJQUFDSyxRQUFBLEdBQUFqQixhQUFBO0lBQUFrQixjQUFBLENBQUFsQixhQUFBLEVBQUFVLHFCQUFBO0lBQUEsT0FBQVYsYUFBQTtFQUFBLEVBakJ5Q21CLDJCQUEyQixHQUFBSixXQUFBLEdBQUFLLHlCQUFBLENBQUFYLE9BQUEsQ0FBQVksU0FBQSxvQkFBQWxCLEtBQUE7SUFBQW1CLFlBQUE7SUFBQUMsVUFBQTtJQUFBQyxRQUFBO0lBQUFDLFdBQUE7RUFBQSxJQUFBVCxZQUFBLEdBQUFJLHlCQUFBLENBQUFYLE9BQUEsQ0FBQVksU0FBQSxvQkFBQWQsS0FBQTtJQUFBZSxZQUFBO0lBQUFDLFVBQUE7SUFBQUMsUUFBQTtJQUFBQyxXQUFBO0VBQUEsSUFBQWhCLE9BQUEsTUFBQUQsTUFBQTtFQUFBUyxRQUFBLEdBQUFqQixhQUFBO0VBQUEsT0FBQWlCLFFBQUE7QUFBQSIsImlnbm9yZUxpc3QiOltdfQ==

package/src/sap/fe/macros/table/OverflowGroups.ts

@@ -0,0 +1,27 @@
+import { defineUI5Class, property, type PropertiesOf } from "sap/fe/base/ClassSupport";
+import BuildingBlockObjectProperty from "sap/fe/macros/controls/BuildingBlockObjectProperty";
+
+/**
+ * Configuration of toolbar separators to be used inside the table toolbar
+ * @public
+ */
+@defineUI5Class("sap.fe.macros.table.OverflowGroup")
+export default class OverflowGroup extends BuildingBlockObjectProperty {
+	/**
+	 * Defines the group of the toolbar separator in the overflow toolbar.
+	 * @public
+	 */
+	@property({ type: "int", required: true })
+	overflowGroup!: number;
+
+	/**
+	 * Defines if a toolbar separator should be displayed.
+	 * @public
+	 */
+	@property({ type: "boolean" })
+	showSeparator?: boolean;
+
+	constructor(settings: PropertiesOf<OverflowGroup>) {
+		super(settings);
+	}
+}