@conduction/nextcloud-vue 2.56.0-beta.36 → 2.56.0-beta.37

package/src/components/CnBoardView/CnBoardView.vue

@@ -5,7 +5,7 @@
 <template>
 	<div
 		class="cn-board-view"
-		:class="{ 'cn-board-view--board': isBoardLook }"
+		:class="{ 'cn-board-view--board': isBoardLook, 'cn-board-view--wrap': wrapColumns, 'cn-board-view--selecting': selectedKeys.length > 0 }"
 		data-testid="cn-board-view">
 		<p v-if="!usable" class="cn-board-view__unusable" data-testid="cn-board-unusable">
 			{{ unusableText }}
@@ -36,9 +36,11 @@
 					v-for="column in lane.columns"
 					:key="`col-${lane.key}-${column.key}`"
 					class="cn-board-view__column"
+					:class="{ 'cn-board-view__column--unreachable': isUnreachable(column) }"
 					role="listitem"
 					data-testid="cn-board-column"
 					:data-column="column.key"
+					:data-unreachable="isUnreachable(column) ? 'true' : null"
 					@dragover.prevent
 					@drop="onDrop(column, $event)">
 					<!-- Board look: a dot, the label and a white count badge, with an
@@ -116,11 +118,21 @@
 							:data-card-id="cardKey(card)"
 							:draggable="canMove"
 							@dragstart="onDragStart(card, column, $event)"
+							@dragend="onDragEnd"
 							@keydown="onCardKeydown(card, column, lane, $event)">
 							<!-- Board look: title link, sub line, pill, footer, and a
 							     menu button instead of the Move to select. -->
 							<template v-if="isBoardLook">
 								<div class="cn-board-view__card-head">
+									<input
+										v-if="selectable"
+										type="checkbox"
+										class="cn-board-view__select"
+										data-testid="cn-board-card-select"
+										:data-card-id="cardKey(card)"
+										:checked="isSelected(card)"
+										:aria-label="selectLabel(card)"
+										@change="toggleSelected(card)">
 									<a
 										href="#"
 										class="cn-board-view__card-title"
@@ -164,8 +176,14 @@
 													class="cn-board-view__menu-item"
 													data-testid="cn-board-menu-move"
 													:data-target="target.key"
-													@click="onMenuMove(card, column, target)">
+													:aria-disabled="isMoveAllowed(card, target) ? null : 'true'"
+													:class="{ 'cn-board-view__menu-item--blocked': !isMoveAllowed(card, target) }"
+													@click="isMoveAllowed(card, target) && onMenuMove(card, column, target)">
 													{{ target.label }}
+													<span
+														v-if="!isMoveAllowed(card, target)"
+														class="cn-board-view__menu-note"
+														data-testid="cn-board-menu-blocked">{{ notAllowedLabel }}</span>
 												</button>
 											</div>
 											<button
@@ -216,6 +234,16 @@
 								</span>
 							</template>
 							<template v-else>
+								<label v-if="selectable" class="cn-board-view__select-label">
+									<input
+										type="checkbox"
+										class="cn-board-view__select"
+										data-testid="cn-board-card-select"
+										:data-card-id="cardKey(card)"
+										:checked="isSelected(card)"
+										:aria-label="selectLabel(card)"
+										@change="toggleSelected(card)">
+								</label>
 								<span
 									v-if="dueLabel(card)"
 									class="cn-board-view__due"
@@ -354,6 +382,12 @@ export default {
 		 * draws the screens' board anatomy (screens-kanban-parity).
 		 */
 		cnLook: { default: 'nextcloud' },
+		/**
+		 * The app's cell-formatter registry, provided by CnAppRoot. A card
+		 * role named in `cardRoles.formatters` shows its value through it, as
+		 * the table's cells do (screens-board-reference-columns).
+		 */
+		cnFormatters: { default: () => ({}) },
 	},
 
 	props: {
@@ -494,9 +528,72 @@ export default {
 			type: Number,
 			default: 0,
 		},
+
+		/**
+		 * The column a row belongs in, for a status whose raw value is not
+		 * the column key: a reference whose rows are merged by name
+		 * (screens-board-reference-columns). Absent, the row's `statusField`
+		 * value is the key.
+		 *
+		 * @type {((row: object) => string)|null}
+		 * @spec openspec/changes/screens-board-reference-columns/specs/board-view/spec.md#requirement-columns-can-be-the-rows-a-field-references
+		 */
+		columnKeyOf: {
+			type: Function,
+			default: null,
+		},
+
+		/**
+		 * Wrap the columns onto more rows, as many to a row as fit at 240px,
+		 * instead of one row that scrolls sideways (manifest
+		 * `config.board.wrap`). For a board with more stages than fit.
+		 *
+		 * @spec openspec/changes/screens-board-reference-columns/specs/board-view/spec.md#requirement-a-wide-board-can-wrap-its-columns
+		 */
+		wrapColumns: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * Offer a checkbox on every card, so cards can be selected for the
+		 * list's bulk actions (the same selection the table holds).
+		 *
+		 * @spec openspec/changes/screens-board-reference-columns/specs/board-view/spec.md#requirement-cards-can-be-selected-for-bulk-actions
+		 */
+		selectable: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * The selected cards, by row key.
+		 *
+		 * @type {Array<string|number>}
+		 */
+		selectedIds: {
+			type: Array,
+			default: () => [],
+		},
+
+		/**
+		 * The columns one card may move to, asked when its menu opens or its
+		 * drag starts: `(card) => Promise<Array<string>|null>`, column keys,
+		 * `null` for every column. A column the card cannot reach is greyed
+		 * during the drag and marked "not allowed" in the menu, and a drop on
+		 * it is refused without asking the host. Absent, every column is
+		 * offered and the host's move decides.
+		 *
+		 * @type {((card: object) => Promise<Array<string>|null>)|null}
+		 * @spec openspec/changes/screens-board-reference-columns/specs/board-view/spec.md#requirement-the-board-shows-where-a-card-can-go
+		 */
+		allowedMoves: {
+			type: Function,
+			default: null,
+		},
 	},
 
-	emits: ['card-click', 'card-aux-click', 'moved', 'refused', 'stale', 'load-more'],
+	emits: ['card-click', 'card-aux-click', 'moved', 'refused', 'stale', 'load-more', 'select'],
 
 	data() {
 		return {
@@ -512,6 +609,10 @@ export default {
 			expanded: [],
 			/** The card whose menu is open (board look), by card key. */
 			openMenuKey: null,
+			/** Column keys each card may move to (`allowedMoves`), by card key; absent = not asked yet. */
+			allowedByCard: {},
+			/** The column keys the dragged card may reach, or null for all. */
+			dragAllowed: null,
 		}
 	},
 
@@ -529,6 +630,7 @@ export default {
 				statusField: this.statusField,
 				offBoardLabel: t('nextcloud-vue', 'Elsewhere'),
 				colorField: this.colorField,
+				keyOf: this.columnKeyOf,
 			})
 		},
 
@@ -556,9 +658,20 @@ export default {
 				due: (given && given.due) || '',
 				owner: (given && given.owner) || '',
 				pillColors: (given && given.pillColors) || {},
+				formatters: (given && given.formatters && typeof given.formatters === 'object') ? given.formatters : {},
 			}
 		},
 
+		/** @return {string} The note on a menu target the card cannot reach. */
+		notAllowedLabel() {
+			return t('nextcloud-vue', 'not allowed')
+		},
+
+		/** @return {Array<string>} The selected row keys as strings. */
+		selectedKeys() {
+			return (Array.isArray(this.selectedIds) ? this.selectedIds : []).map(String)
+		},
+
 		/** @return {string} The Open in new tab menu item. */
 		openInNewTabLabel() {
 			return t('nextcloud-vue', 'Open in new tab')
@@ -617,6 +730,97 @@ export default {
 
 		preventMiddleClickAutoscroll,
 
+		/**
+		 * Whether a card is selected.
+		 *
+		 * @param {object} card The card.
+		 * @return {boolean} True when selected.
+		 */
+		isSelected(card) {
+			return this.selectedKeys.includes(this.cardKey(card))
+		},
+
+		/**
+		 * The checkbox's accessible name.
+		 *
+		 * @param {object} card The card.
+		 * @return {string} "Select <name>".
+		 */
+		selectLabel(card) {
+			const name = this.roleText(card, this.roles.title) || this.cardKey(card)
+			return t('nextcloud-vue', 'Select {name}', { name })
+		},
+
+		/**
+		 * Select a card, or unselect it.
+		 *
+		 * @param {object} card The card.
+		 * @return {void}
+		 * @spec openspec/changes/screens-board-reference-columns/specs/board-view/spec.md#requirement-cards-can-be-selected-for-bulk-actions
+		 */
+		toggleSelected(card) {
+			const key = this.cardKey(card)
+			const next = this.isSelected(card)
+				? this.selectedIds.filter((id) => String(id) !== key)
+				: [...this.selectedIds, card?.[this.rowKey]]
+			/**
+			 * @event select Emitted when a card's checkbox changes. Payload: the selected row keys.
+			 */
+			this.$emit('select', next)
+		},
+
+		/**
+		 * Ask the host where one card may go (`allowedMoves`), once per card.
+		 *
+		 * @param {object} card The card.
+		 * @return {Promise<Array<string>|null>} The column keys, or null for all.
+		 * @spec openspec/changes/screens-board-reference-columns/specs/board-view/spec.md#requirement-the-board-shows-where-a-card-can-go
+		 */
+		async loadAllowed(card) {
+			if (typeof this.allowedMoves !== 'function') {
+				return null
+			}
+			const key = this.cardKey(card)
+			if (Object.hasOwn(this.allowedByCard, key)) {
+				return this.allowedByCard[key]
+			}
+			let allowed
+			try {
+				const answer = await this.allowedMoves(card)
+				allowed = Array.isArray(answer) ? answer.map(String) : null
+			} catch {
+				// Unknown is not "nowhere": the host's move stays the authority.
+				allowed = null
+			}
+			this.allowedByCard = { ...this.allowedByCard, [key]: allowed }
+			return allowed
+		},
+
+		/**
+		 * Whether a card may move to a column, as far as the board knows.
+		 *
+		 * @param {object} card The card.
+		 * @param {object} target The column.
+		 * @return {boolean} False only when the host said it cannot.
+		 */
+		isMoveAllowed(card, target) {
+			const allowed = this.allowedByCard[this.cardKey(card)]
+			return !Array.isArray(allowed) || allowed.includes(String(target.key))
+		},
+
+		/**
+		 * Whether a column is out of reach for the card being dragged.
+		 *
+		 * @param {object} column The column.
+		 * @return {boolean} True while a drag is on and the card cannot go there.
+		 */
+		isUnreachable(column) {
+			return this.dragging !== null
+				&& Array.isArray(this.dragAllowed)
+				&& column.key !== this.dragging.fromKey
+				&& !this.dragAllowed.includes(String(column.key))
+		},
+
 		/**
 		 * A card's due state under `dueRule`.
 		 *
@@ -658,11 +862,35 @@ export default {
 			const fields = Array.isArray(role) ? role : [role]
 			return fields
 				.filter((field) => typeof field === 'string' && field !== '')
-				.map((field) => this.textOf(readPath(card, field)))
+				.map((field) => this.fieldText(card, field))
 				.filter((value) => value !== '')
 				.join(' \u00b7 ')
 		},
 
+		/**
+		 * One card field as text: through the formatter `cardRoles.formatters`
+		 * names for it, else the value itself.
+		 *
+		 * @param {object} card The card's row.
+		 * @param {string} field The dot-path.
+		 * @return {string} The text.
+		 * @spec openspec/changes/screens-board-reference-columns/specs/board-view/spec.md#requirement-a-card-field-can-show-through-a-formatter
+		 */
+		fieldText(card, field) {
+			const raw = readPath(card, field)
+			const id = this.roles.formatters[field]
+			const fn = id && this.cnFormatters ? this.cnFormatters[id] : null
+			if (typeof fn === 'function') {
+				try {
+					const out = fn(raw, card, null)
+					return out === null || out === undefined ? '' : String(out).trim()
+				} catch {
+					return this.textOf(raw)
+				}
+			}
+			return this.textOf(raw)
+		},
+
 		/**
 		 * A value as text: a string or number as is, an object by its label.
 		 *
@@ -687,7 +915,7 @@ export default {
 		 * @return {string} A CnStatusBadge variant.
 		 */
 		pillVariant(card) {
-			const raw = this.textOf(readPath(card, this.roles.pill))
+			const raw = this.fieldText(card, this.roles.pill)
 			const variant = this.roles.pillColors[raw] ?? this.roles.pillColors[raw.toLowerCase()]
 			return isBadgeVariant(variant) ? variant : 'default'
 		},
@@ -727,7 +955,7 @@ export default {
 		 * @return {string} The name, '' when there is none.
 		 */
 		ownerName(card) {
-			return this.roles.owner === '' ? '' : this.textOf(readPath(card, this.roles.owner))
+			return this.roles.owner === '' ? '' : this.fieldText(card, this.roles.owner)
 		},
 
 		/**
@@ -879,6 +1107,7 @@ export default {
 			const key = this.cardKey(card)
 			this.openMenuKey = this.openMenuKey === key ? null : key
 			if (this.openMenuKey !== null) {
+				this.loadAllowed(card)
 				this.focusMenuItem(card, 0)
 			}
 		},
@@ -967,6 +1196,7 @@ export default {
 				event.preventDefault()
 				if (!this.isMenuOpen(card)) {
 					this.openMenuKey = this.cardKey(card)
+					this.loadAllowed(card)
 					this.focusMenuItem(card, 0)
 				}
 			}
@@ -1113,8 +1343,27 @@ export default {
 		 */
 		onDragStart(card, column, event) {
 			this.dragging = { card, fromKey: column.key }
+			this.dragAllowed = null
 			// Firefox drops a drag that carries no data.
 			event?.dataTransfer?.setData?.('text/plain', this.cardKey(card))
+			if (typeof this.allowedMoves === 'function') {
+				this.loadAllowed(card).then((allowed) => {
+					if (this.dragging && this.dragging.card === card) {
+						this.dragAllowed = allowed
+					}
+				})
+			}
+		},
+
+		/**
+		 * The drag ended (dropped anywhere, or cancelled): no column stays
+		 * greyed. A drop on a column has already run by now.
+		 *
+		 * @return {void}
+		 */
+		onDragEnd() {
+			this.dragging = null
+			this.dragAllowed = null
 		},
 
 		/**
@@ -1129,6 +1378,13 @@ export default {
 			}
 			const { card, fromKey } = this.dragging
 			this.dragging = null
+			this.dragAllowed = null
+			if (column.key !== fromKey && !this.isMoveAllowed(card, column)) {
+				const name = this.roleText(card, this.roles.title) || this.cardKey(card)
+				this.refusal = t('nextcloud-vue', '{name} cannot move to {column}.', { name, column: column.label })
+				this.$emit('refused', { card, message: this.refusal })
+				return
+			}
 			await this.move(card, fromKey, column.key)
 		},
 

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -395,6 +395,7 @@
 					<CnStatsBlockWidget
 						v-bind="getStatsBlockProps(item)"
 						:title="getWidgetTitle(item)"
+						:eyebrow="getWidgetEyebrow(item)"
 						:data-source="getWidgetDataSource(item)" />
 				</CnWidgetWrapper>
 				<CnWidgetWrapper
@@ -420,7 +421,7 @@
 						:is="registryRenderer(item)"
 						:widgetId="item.widgetId"
 						:content="registryWidgetBindings(item)"
-						v-bind="registryWidgetBindings(item)"
+						v-bind="{ ...registryWidgetBindings(item), ...containerBindings(item) }"
 						@header="onWidgetHeader(item, $event)" />
 				</CnWidgetWrapper>
 				<CnWidgetWrapper
@@ -433,6 +434,7 @@
 				<CnWidgetWrapper
 					v-else
 					:title="getWidgetTitle(item)"
+					:eyebrow="getWidgetEyebrow(item)"
 					:showTitle="false"
 					:showRefresh="false">
 					<div class="cn-dashboard-page__unknown">
@@ -494,6 +496,7 @@
 				<CnWidgetWrapper
 					v-if="missingRequiredApp(item)"
 					:title="getWidgetTitle(item)"
+					:eyebrow="getWidgetEyebrow(item)"
 					:showTitle="widgetShowTitle(item)">
 					<!-- Compact on purpose: a two-row tile is about 150px, less
 					     a title row. NcEmptyContent's 64px icon, 20px name,
@@ -532,6 +535,7 @@
 					<CnWidgetWrapper
 						:widgetId="item.widgetId"
 						:title="getWidgetTitle(item)"
+						:eyebrow="getWidgetEyebrow(item)"
 						:iconUrl="getWidgetIconUrl(item)"
 						:iconClass="getWidgetIconClass(item)"
 						:showTitle="widgetShowTitle(item)"
@@ -613,6 +617,7 @@
 						:widgetId="item.widgetId"
 						:class="{ 'cn-dashboard-page__chart-fit': isChartFitted(item) }"
 						:title="getWidgetTitle(item)"
+						:eyebrow="getWidgetEyebrow(item)"
 						:iconUrl="getWidgetIconUrl(item)"
 						:iconClass="getWidgetIconClass(item)"
 						:showTitle="widgetShowTitle(item)"
@@ -691,6 +696,7 @@
 					<CnWidgetWrapper
 						:widgetId="item.widgetId"
 						:title="getWidgetTitle(item)"
+						:eyebrow="getWidgetEyebrow(item)"
 						:iconUrl="getWidgetIconUrl(item)"
 						:iconClass="getWidgetIconClass(item)"
 						:showTitle="widgetShowTitle(item)"
@@ -718,6 +724,7 @@
 					<CnWidgetWrapper
 						:widgetId="item.widgetId"
 						:title="getWidgetTitle(item)"
+						:eyebrow="getWidgetEyebrow(item)"
 						:iconUrl="getWidgetIconUrl(item)"
 						:iconClass="getWidgetIconClass(item)"
 						:showTitle="widgetShowTitle(item)"
@@ -757,6 +764,7 @@
 					<CnWidgetWrapper
 						:widgetId="item.widgetId"
 						:title="getWidgetTitle(item)"
+						:eyebrow="getWidgetEyebrow(item)"
 						:iconUrl="getWidgetIconUrl(item)"
 						:iconClass="getWidgetIconClass(item)"
 						:showTitle="widgetShowTitle(item)"
@@ -782,6 +790,7 @@
 					<CnWidgetWrapper
 						:widgetId="item.widgetId"
 						:title="getWidgetTitle(item)"
+						:eyebrow="getWidgetEyebrow(item)"
 						:showTitle="widgetShowTitle(item)"
 						:showActions="widgetShowActions(item)"
 						:showRefresh="getWidgetShowRefresh(item)"
@@ -873,7 +882,7 @@
 							:is="registryRenderer(item)"
 							:widgetId="item.widgetId"
 							:content="registryWidgetBindings(item)"
-							v-bind="registryWidgetBindings(item)"
+							v-bind="{ ...registryWidgetBindings(item), ...containerBindings(item) }"
 							@header="onWidgetHeader(item, $event)" />
 					</CnWidgetWrapper>
 				</template>
@@ -882,6 +891,7 @@
 				<CnWidgetWrapper
 					v-else
 					:title="getWidgetTitle(item)"
+					:eyebrow="getWidgetEyebrow(item)"
 					:showTitle="widgetShowTitle(item)"
 					:showRefresh="false">
 					<div class="cn-dashboard-page__unknown">
@@ -2944,6 +2954,7 @@ export default {
 			return {
 				widgetId: item.widgetId,
 				title: this.getWidgetTitle(item),
+				eyebrow: this.getWidgetEyebrow(item),
 				showTitle: this.widgetShowTitle(item),
 				showActions: this.widgetShowActions(item),
 				showRefresh: this.getWidgetShowRefresh(item),
@@ -3630,6 +3641,35 @@ export default {
 			return outcome ? { ...content, conditionOutcome: outcome } : content
 		},
 
+		/**
+		 * What a container widget (registry `container`, such as `tabs`) needs
+		 * beside its content: the page's widget definitions, so its tabs find
+		 * the widgets they name, and the consumer registry for custom child
+		 * types. Empty for every other widget, so a leaf gets no extra
+		 * attributes on its root.
+		 *
+		 * @param {object} item Layout item.
+		 * @return {object} The extra bindings.
+		 * @spec openspec/changes/dashboard-tabs-children/specs/dashboard-page/spec.md#requirement-a-tabs-widget-on-a-dashboard-renders-the-widgets-its-tabs-name
+		 */
+		containerBindings(item) {
+			const def = this.getWidgetDef(item.widgetId)
+			if (!def || !def.type) {
+				return {}
+			}
+			const entry = getWidgetTypeEntry(def.type) || getWidgetTypeEntry(canonicalWidgetType(def.type))
+			if (!entry || entry.container !== true) {
+				return {}
+			}
+			const own = Array.isArray(this.widgets) ? this.widgets.filter(Boolean) : []
+			const fromView = this.activeView && Array.isArray(this.activeView.widgets) ? this.activeView.widgets.filter(Boolean) : []
+			return {
+				availableWidgets: [...own, ...fromView],
+				cnRegistry: this.cnRegistry || {},
+				surface: this.surface,
+			}
+		},
+
 		/**
 		 * A widget's content with the board's quiet collection footer: in the
 		 * board look a dashboard that drops the widget Actions menu
@@ -4002,6 +4042,21 @@ export default {
 			this.showWidgetConfig = false
 		},
 
+		/**
+		 * The line above a widget's title (`eyebrow` on the widget
+		 * definition: "Saldo per week" above "Prognose 13 weken"), through the
+		 * host translate, or '' for none.
+		 *
+		 * @param {object} item Layout item.
+		 * @return {string}
+		 * @spec openspec/changes/widget-title-eyebrow/specs/dashboard-page/spec.md#requirement-a-widget-card-can-carry-a-line-above-its-title
+		 */
+		getWidgetEyebrow(item) {
+			const def = this.getWidgetDef(item.widgetId)
+			const eyebrow = def && typeof def.eyebrow === 'string' ? def.eyebrow : ''
+			return eyebrow ? this.effectiveTranslate(eyebrow) : ''
+		},
+
 		/**
 		 * The widget's title as AUTHORED — the untranslated manifest source
 		 * string — resolved by widget id rather than by item, so a descendant

package/src/components/CnDetailPage/CnDetailPage.md

@@ -460,4 +460,4 @@ When the schema-driven fetch answers 404 the page shows a not-found state whose
 
 ### The board look
 
-`look` (String, default `''`): `nextcloud` or `board`; empty takes the app's look. `headerMeta` (String): the meta line on row 2 of the board header, a field template such as `via {channel}` (manifest `config.headerMeta`). `tabsLabel` (String): the accessible name of the tab list (manifest `config.tabsLabel`). `identifierField` (String): the field named in the last line of the History side card (manifest `config.identifierField`). See `docs/components/cn-detail-page.md`.
+`look` (String, default `''`): `nextcloud` or `board`; empty takes the app's look. `headerMeta` (String): the meta line on row 2 of the board header, a field template such as `via {channel}` (manifest `config.headerMeta`). `tabsLabel` (String): the accessible name of the tab list (manifest `config.tabsLabel`). `identifierField` (String): the field named in the last line of the History side card (manifest `config.identifierField`). `titleField` (String): the record field the header names the record by, such as an invoice number (manifest `config.titleField`); an empty value falls back to the display name. See `docs/components/cn-detail-page.md`.

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -2664,6 +2664,19 @@ export default {
 			type: String,
 			default: '',
 		},
+
+		/**
+		 * The record field the header names the record by (manifest
+		 * `config.titleField`, a dotted path such as `number`), as an invoice
+		 * page names the invoice number. An empty value falls back to the
+		 * display name. Empty (the default) changes nothing.
+		 *
+		 * @spec openspec/changes/detail-title-field/specs/detail-page/spec.md#requirement-a-detail-page-can-name-the-record-by-a-field
+		 */
+		titleField: {
+			type: String,
+			default: '',
+		},
 	},
 
 	emits: [
@@ -4102,10 +4115,10 @@ export default {
 		},
 
 		/**
-		 * The resolved record's human display name, drawn from the loaded
-		 * object via the same fallback chain the relation resolver uses:
-		 * `@self.name` → `name` / `title` / `displayName` → `firstName
-		 * lastName`. Empty string while the object is still loading or when no
+		 * The resolved record's human display name: the `titleField` value
+		 * when the page names one and it is filled, else the same fallback
+		 * chain the relation resolver uses: `@self.name` → `name` / `title` /
+		 * `displayName` → `firstName lastName`. Empty string while the object is still loading or when no
 		 * name-like field exists (a raw id is never used as a name — ADR-062).
 		 *
 		 * @return {string}
@@ -4115,6 +4128,12 @@ export default {
 			if (!obj || typeof obj !== 'object') {
 				return ''
 			}
+			if (this.titleField) {
+				const named = stageOf(obj, this.titleField)
+				if (named !== '') {
+					return named
+				}
+			}
 			const self = obj['@self'] || {}
 			const id = this.objectId !== null && this.objectId !== undefined ? String(this.objectId) : ''
 			const candidates = [self.name, self.title, obj.name, obj.title, obj.displayName]

package/src/components/CnDetailWidgetHost/CnDetailWidgetHost.vue

@@ -725,7 +725,9 @@ export default {
 			if (this.widget && this.widget.type === 'files' && !(this.cnRegistry && this.cnRegistry.files) && this.register && this.schema) {
 				return CnObjectFilesWidget
 			}
-			return resolveRegistryRenderer(this.widget, this.cnRegistry)
+			// Inside a dashboard's tabs the dashboard's resolution holds.
+			const onDashboard = this.surface === 'app-dashboard' || this.surface === 'user-dashboard'
+			return resolveRegistryRenderer(this.widget, this.cnRegistry, { typeAsWritten: onDashboard })
 		},
 
 		/**