@conduction/nextcloud-vue 2.83.0 → 2.84.0

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -1253,6 +1253,7 @@ import {
 	stageEntry,
 	stageOf,
 } from '../../utils/detailActionModel.js'
+import { detailWidgetVisible, fetchVisibilityRows, visibilityContextRefs, widgetConditionData } from '../../utils/detailWidgetVisibility.js'
 import { reportBindingProblems } from '../../utils/diagnostics.js'
 import { fetchListTotal } from '../../utils/fetchFilterCounts.js'
 import { cnGridCellStyle, hasGridRow } from '../../utils/grid.js'
@@ -1260,6 +1261,7 @@ import { isActivityWidget, resolveHeaderMeta } from '../../utils/headerMeta.js'
 import { patchStoredSelf } from '../../utils/patchStoredSelf.js'
 import { setReadState } from '../../utils/recordInteractions.js'
 import { slotRenders } from '../../utils/slotContent.js'
+import { evaluateVisibleWhen, isLocallyDecidableVisibleWhen } from '../../utils/visibleWhen.js'
 import {
 	isCardWidgetDef,
 	isContentOnlyWidgetDef,
@@ -1512,8 +1514,8 @@ export default {
 
 	/**
 	 * Offer the board look's tab list name to the tabs widget below this page
-	 * (`config.tabsLabel`, default "<type> parts"). A getter object, so the
-	 * widget reads it live.
+	 * (`config.tabsLabel`, default "<type> parts"), and the records
+	 * `visibilityContext` names. Getter objects, so the widget reads them live.
 	 *
 	 * @return {object} The provided values.
 	 * @spec openspec/changes/screens-detail-page-parity/specs/detail-page-board-look/spec.md#requirement-folder-tabs-take-the-board-strip
@@ -1521,6 +1523,7 @@ export default {
 	provide() {
 		const isBoard = computed(() => this.isBoard)
 		const tabsLabel = computed(() => this.resolvedTabsLabel)
+		const visibilityRows = computed(() => (this.visibilityRowsPending ? null : this.visibilityRows))
 		return {
 			// The page's own look reaches the tabs, the cards and the activity
 			// below it, also when it came from the `look` prop and not the app.
@@ -1530,6 +1533,15 @@ export default {
 					return tabsLabel.value
 				},
 			},
+
+			// The records `visibilityContext` names, keyed `@context.<name>`, so a tab's
+			// `visibleWhen` reads the case type as a grid widget's does. Null
+			// while they are on their way.
+			cnDetailVisibilityRows: {
+				get value() {
+					return visibilityRows.value
+				},
+			},
 		}
 	},
 
@@ -2572,6 +2584,25 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Records the page reads beside the loaded one, so a `visibleWhen`
+		 * can ask about them (manifest `config.visibilityContext`). Each entry
+		 * is `{ <name>: { field, register, schema } }`: `field` is the
+		 * property of the loaded record holding the other record's id, and a
+		 * condition reads that record as `@context.<name>.<path>`. A case page that
+		 * declares `{ caseType: { field: "caseType", register: "dossiq",
+		 * schema: "caseType" } }` can show a widget for some case types only
+		 * with `{ field: "@context.caseType.category", op: "in", value: [...] }`.
+		 * A record that cannot be read is absent, so its condition fails safe.
+		 * Empty (the default) reads nothing extra.
+		 *
+		 * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-page-can-load-records-a-condition-names
+		 */
+		visibilityContext: {
+			type: Object,
+			default: () => ({}),
+		},
+
 		/**
 		 * Whether the current user administers this instance. Shows the
 		 * `adminOnly` header actions. `null` (the default) reads it from
@@ -2799,6 +2830,19 @@ export default {
 
 	data() {
 		return {
+			/**
+			 * The records `visibilityContext` names, keyed `@context.<name>`: the row,
+			 * `null` when it could not be read, absent while it is on its way.
+			 */
+			visibilityRows: {},
+			/** The `visibilityRefsKey` the rows in `visibilityRows` were read for. */
+			visibilityRowsFor: '',
+			/** Sequence of the last `visibilityContext` read, so a late answer for another record is dropped. */
+			visibilityRowsSeq: 0,
+			/** The answers of endpoint and source `visibleWhen` conditions on grid widgets, by widget id. */
+			widgetConditionAnswers: {},
+			/** Sequence of the last remote condition round. */
+			widgetConditionSeq: 0,
 			/** The counts of the header's count pills (`countFrom`), by pill key (`type`, `status`). */
 			pillCounts: {},
 			/** Sequence of the last pill count round, so a late answer does not overwrite a newer one. */
@@ -3058,11 +3102,17 @@ export default {
 		 * because a keyboard user who cannot see the page needs to know what
 		 * they are being offered before they take it.
 		 *
+		 * One library string with a placeholder, not "Skip to" from the host's
+		 * catalogue glued to the label: no app carried that fragment, so every
+		 * Dutch reader got "Skip to In behandeling nemen" (Zuiddrecht live
+		 * round 3), and a fragment cannot be put in Dutch word order anyway.
+		 *
 		 * @return {string} The link text.
 		 * @spec openspec/changes/case-page-and-list-as-a-place/specs/index-page/spec.md
+		 * @spec openspec/changes/detail-page-strings-dutch/specs/detail-page-strings-dutch/spec.md#requirement-the-detail-page-speaks-the-readers-language
 		 */
 		skipLinkLabel() {
-			return `${this.effectiveTranslate('Skip to')} ${this.effectivePrimaryLabel}`
+			return t('nextcloud-vue', 'Skip to {action}', { action: this.effectivePrimaryLabel })
 		},
 
 		// ── The action model (detail-action-model-and-case-surfaces) ────
@@ -3904,6 +3954,68 @@ export default {
 			return store.objects?.[this.objectType]?.[this.objectId] ?? null
 		},
 
+		/**
+		 * The records `visibilityContext` names for the loaded record.
+		 *
+		 * @return {Array<{key: string, register: string, schema: string, id: string}>}
+		 * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-page-can-load-records-a-condition-names
+		 */
+		visibilityRefs() {
+			return visibilityContextRefs(this.visibilityContext, this.resolvedObject)
+		},
+
+		/**
+		 * Whether a record `visibilityContext` names is still on its way.
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-page-can-load-records-a-condition-names
+		 */
+		visibilityRowsPending() {
+			return this.visibilityRefs.length > 0 && this.visibilityRowsFor !== this.visibilityRefsKey
+		},
+
+		/**
+		 * The named references as one key, so another record (or another case
+		 * type on the same record) reads them again.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-page-can-load-records-a-condition-names
+		 */
+		visibilityRefsKey() {
+			return JSON.stringify(this.visibilityRefs)
+		},
+
+		/**
+		 * What a grid widget's `visibleWhen` reads: the record, with the
+		 * `visibilityContext` records under `@context.<name>`. Null until the record loads.
+		 *
+		 * @return {object|null}
+		 * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-grid-widget-shows-only-while-its-visiblewhen-holds-for-the-record
+		 */
+		widgetVisibilityData() {
+			return widgetConditionData(this.resolvedObject, this.visibilityRows)
+		},
+
+		/**
+		 * The grid widgets whose `visibleWhen` needs a request (endpoint or
+		 * source), with what they ask, as one key: a change re-asks them.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-grid-widget-shows-only-while-its-visiblewhen-holds-for-the-record
+		 */
+		remoteWidgetConditionsKey() {
+			if (!this.widgetVisibilityData || this.visibilityRowsPending) {
+				return ''
+			}
+			const defs = [...(this.bodyGridWidgets || []), ...((this.activeView && this.activeView.widgets) || [])]
+			const remote = defs.filter((def) => def && def.visibleWhen && typeof def.visibleWhen === 'object'
+				&& !isLocallyDecidableVisibleWhen(def.visibleWhen))
+			if (remote.length === 0) {
+				return ''
+			}
+			return JSON.stringify([String(this.objectId || ''), remote.map((def) => [def.id, def.visibleWhen])])
+		},
+
 		/**
 		 * The `@self` block of the resolved object (interaction markers live here).
 		 *
@@ -4436,6 +4548,22 @@ export default {
 	},
 
 	watch: {
+		// The records a condition names are read again for another record.
+		visibilityRefsKey: {
+			immediate: true,
+			handler() {
+				this.refreshVisibilityRows()
+			},
+		},
+
+		// Endpoint and source conditions on grid widgets are asked once per record.
+		remoteWidgetConditionsKey: {
+			immediate: true,
+			handler() {
+				this.refreshWidgetConditions()
+			},
+		},
+
 		// The header's count pills count again for another record or other lists.
 		pillCountKey: {
 			immediate: true,
@@ -5674,6 +5802,62 @@ export default {
 				|| undefined
 		},
 
+		/**
+		 * Read the records `visibilityContext` names for the loaded record. A
+		 * late answer for a record the page has left is dropped.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-page-can-load-records-a-condition-names
+		 */
+		async refreshVisibilityRows() {
+			const key = this.visibilityRefsKey
+			const refs = this.visibilityRefs
+			const seq = ++this.visibilityRowsSeq
+			if (refs.length === 0) {
+				// Write only on a change, so a page without `visibilityContext`
+				// never touches the state its layout could read.
+				if (Object.keys(this.visibilityRows).length > 0) {
+					this.visibilityRows = {}
+				}
+				if (this.visibilityRowsFor !== key) {
+					this.visibilityRowsFor = key
+				}
+				return
+			}
+			if (!this._visibilityRowCache) {
+				this._visibilityRowCache = new Map()
+			}
+			const rows = await fetchVisibilityRows(refs, this._visibilityRowCache)
+			if (seq !== this.visibilityRowsSeq) {
+				return
+			}
+			this.visibilityRows = rows
+			this.visibilityRowsFor = key
+		},
+
+		/**
+		 * Ask the endpoint and source `visibleWhen` conditions of the grid
+		 * widgets, once per record. Each is fail-safe: an error hides the widget.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-grid-widget-shows-only-while-its-visiblewhen-holds-for-the-record
+		 */
+		async refreshWidgetConditions() {
+			const seq = ++this.widgetConditionSeq
+			if (this.remoteWidgetConditionsKey === '') {
+				return
+			}
+			const [, entries] = JSON.parse(this.remoteWidgetConditionsKey)
+			const ctx = { objectId: this.objectId, object: this.widgetVisibilityData || undefined }
+			const answers = {}
+			await Promise.all(entries.map(async ([id, cond]) => {
+				answers[id] = await evaluateVisibleWhen(cond, ctx)
+			}))
+			if (seq === this.widgetConditionSeq) {
+				this.widgetConditionAnswers = answers
+			}
+		},
+
 		/**
 		 * Drop the items that draw nothing, then close the rows they freed —
 		 * `float: true` leaves the item below pinned under a gap nobody owns.
@@ -5696,7 +5880,10 @@ export default {
 		 * Whether a layout item has anything to draw, so a grid cell is worth
 		 * spending on it.
 		 *
-		 * TWO widget types are judged, and no others.
+		 * A widget whose definition carries `visibleWhen` draws only while the
+		 * condition holds for the record (see `detailWidgetVisible`).
+		 *
+		 * Beyond that, TWO widget types are judged, and no others.
 		 *
 		 * `integration`, in the case where nothing can ever appear: a leaf from
 		 * another app that is not registered, with no `requiredApp` to fall back
@@ -5743,6 +5930,18 @@ export default {
 			if (!widget) {
 				return true
 			}
+			// The widget's own `visibleWhen`, read against the record and the
+			// records `visibilityContext` names (a case's case type). Without
+			// one the widget shows, as it always did, and the layout takes no
+			// dependency on the record: a page without conditions re-lays out
+			// exactly as often as before.
+			if (widget.visibleWhen !== undefined && widget.visibleWhen !== null
+				&& !detailWidgetVisible(widget, this.widgetVisibilityData, {
+					pending: this.visibilityRowsPending,
+					answers: this.widgetConditionAnswers,
+				})) {
+				return false
+			}
 			// The board look shows the activity as the History tab. When a tabs
 			// widget already holds it, it is not also a body section.
 			if (this.isBoard && isActivityWidget(widget) && this.tabbedWidgetIds.has(widget.id)) {

package/src/components/CnFieldListWidget/CnFieldListWidget.vue

@@ -111,6 +111,14 @@
 				role="note"
 				:data-testid="`cn-field-list-band-${row.key}`">
 				<span class="cn-field-list-widget__band-text">{{ row.detail }}</span>
+				<NcButton
+					v-for="copy in row.copies"
+					:key="`copy-${copy.path}`"
+					variant="tertiary"
+					:data-testid="`cn-field-list-copy-${copy.path}-${row.key}`"
+					@click="copyValue(copy)">
+					{{ copy.label }}
+				</NcButton>
 				<NcButton
 					v-for="action in row.bandActions"
 					:key="action.id"
@@ -162,6 +170,16 @@
 				<p v-if="row.detail" class="cn-field-list-widget__detail">
 					{{ row.detail }}
 				</p>
+				<div v-if="row.detail && row.copies.length > 0" class="cn-field-list-widget__copies">
+					<NcButton
+						v-for="copy in row.copies"
+						:key="`copy-${copy.path}`"
+						variant="tertiary"
+						:data-testid="`cn-field-list-copy-${copy.path}-${row.key}`"
+						@click="copyValue(copy)">
+						{{ copy.label }}
+					</NcButton>
+				</div>
 			</li>
 		</ul>
 
@@ -211,6 +229,7 @@
 			</NcButton>
 		</form>
 
+		<span class="cn-field-list-widget__sr" aria-live="polite" data-testid="cn-field-list-copied">{{ copied }}</span>
 		<NcNoteCard v-if="notice" :type="noticeType" data-testid="cn-field-list-notice">
 			{{ notice }}
 		</NcNoteCard>
@@ -260,7 +279,7 @@ export default {
 		 *
 		 * - `field` (required) — the object field holding the array.
 		 * - `key` — the item field that identifies an entry (default: the item itself for strings).
-		 * - `row` — `{ title, titleFallback?, avatar?, meta?: [paths|{ path, map?, format? }], pill?: { path, map?, variantMap? }, aside?: { path, format?, prefix?, fallback? }, detail?: { template, when? } }`.
+		 * - `row` — `{ title, titleFallback?, avatar?, meta?: [paths|{ path, map?, format? }], pill?: { path, map?, variantMap? }, aside?: { path, format?, prefix?, fallback? }, detail?: { template, when?, copy?: [{ path, label }] } }`. `detail.copy` puts a copy button beside the detail line for each named value of the row (an empty value gets none), such as a DNS record's name and value.
 		 * - `add` — `{ label?, fields: [{ key, label, type?: 'text'|'select', options?, required?, pattern?, patternMessage? }], unique?, defaults? }`.
 		 * - `remove` — `{ label? }`; omitted = no remove.
 		 * - `rowActions` — `[{ id, label, when?, placement?: 'band', request: { method?, url, payload? } }]`; tokens `@object.<field>`, `@objectId`, `@row.<field>`.
@@ -316,6 +335,8 @@ export default {
 			busy: '',
 			notice: '',
 			noticeType: 'error',
+			// What the last copy button put on the clipboard, said to a screen reader.
+			copied: '',
 		}
 	},
 
@@ -358,6 +379,7 @@ export default {
 					pill: this.pillOf(entry, spec.pill),
 					aside: spec.aside ? this.asideOf(entry, spec.aside) : '',
 					detail: spec.detail && this.matches(entry, spec.detail.when) ? this.fill(spec.detail.template, entry) : '',
+					copies: spec.detail && this.matches(entry, spec.detail.when) ? this.copiesOf(entry, spec.detail.copy) : [],
 					actions: this.actionsFor(entry),
 					cells: this.isTable ? this.cellsOf(entry) : [],
 				}
@@ -818,6 +840,40 @@ export default {
 		 * @return {Promise<void>}
 		 * @spec openspec/changes/abstract-field-list/specs/field-list/spec.md#requirement-a-field-list-row-can-run-a-configured-request
 		 */
+		/**
+		 * The copy buttons of a row's detail line: one per named value that is not empty.
+		 *
+		 * @param {object} entry The entry.
+		 * @param {Array<{path: string, label?: string}>|undefined} declared The `detail.copy` list.
+		 * @return {Array<{path: string, label: string, value: string}>}
+		 */
+		copiesOf(entry, declared) {
+			return (Array.isArray(declared) ? declared : [])
+				.filter((copy) => copy && typeof copy.path === 'string' && copy.path !== '')
+				.map((copy) => ({
+					path: copy.path,
+					label: this.tr(copy.label || 'Copy'),
+					value: String(readPath(entry, copy.path) ?? ''),
+				}))
+				.filter((copy) => copy.value !== '')
+		},
+
+		/**
+		 * Put one value on the clipboard and say so; a browser that refuses says that instead.
+		 *
+		 * @param {{label: string, value: string}} copy The copy button.
+		 * @return {Promise<void>}
+		 */
+		async copyValue(copy) {
+			this.copied = ''
+			try {
+				await navigator.clipboard.writeText(copy.value)
+				this.copied = `${this.tr('Copied')}: ${copy.label}`
+			} catch {
+				this.notify(this.tr('Copying did not work. Select the text and copy it yourself.'))
+			}
+		},
+
 		async runAction(action, row) {
 			this.busy = row.key
 			this.notice = ''
@@ -912,6 +968,12 @@ export default {
 
 .cn-field-list-widget__meta,
 .cn-field-list-widget__aside,
+.cn-field-list-widget__copies {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px;
+}
+
 .cn-field-list-widget__detail {
 	font-size: 13px;
 }

package/src/components/CnGaugeWidget/CnGaugeWidget.vue

@@ -280,7 +280,7 @@ export default {
 		 * @return {string} The formatted string.
 		 */
 		formatNumber(value) {
-			return formatMetricValue(value, this.resolvedFormat, this.configCtx)
+			return formatMetricValue(value, this.resolvedFormat, this.configCtx, null, this.effectiveTranslate)
 		},
 
 		/**

package/src/components/CnInteractionFormWidget/CnInteractionFormWidget.vue

@@ -183,7 +183,7 @@ export default {
 		/** Channel options `{ value, label }`. */
 		channelOptions() {
 			return Array.isArray(this.content.channels) && this.content.channels.length > 0
-				? this.content.channels
+				? this.content.channels.map((channel) => ({ ...channel, label: this.copy(channel && channel.label) }))
 				: [
 						{ value: 'telefoon', label: t('nextcloud-vue', 'Phone') },
 						{ value: 'email', label: t('nextcloud-vue', 'Email') },
@@ -204,10 +204,11 @@ export default {
 			const prop = properties[this.content.outcomeField || 'outcome']
 			if (prop && Array.isArray(prop.enum) && prop.enum.length > 0) {
 				const labels = prop['x-enum-labels'] || prop.enumLabels || {}
-				const tr = typeof this.cnTranslate === 'function' ? this.cnTranslate : (k) => k
-				return prop.enum.map((value) => ({ value, label: tr(labels[value] || String(value)) }))
+				return prop.enum.map((value) => ({ value, label: this.copy(labels[value] || String(value)) }))
 			}
-			return Array.isArray(this.content.outcomes) ? this.content.outcomes : []
+			return Array.isArray(this.content.outcomes)
+				? this.content.outcomes.map((outcome) => ({ ...outcome, label: this.copy(outcome && outcome.label) }))
+				: []
 		},
 
 		/**
@@ -280,8 +281,7 @@ export default {
 		// `content.submitLabel` names what the form creates, e.g. "Save contact moment".
 		registerLabel() {
 			if (this.content.submitLabel) {
-				const tr = typeof this.cnTranslate === 'function' ? this.cnTranslate : (k) => k
-				return tr(this.content.submitLabel)
+				return this.copy(this.content.submitLabel)
 			}
 			return t('nextcloud-vue', 'Register')
 		},
@@ -359,6 +359,29 @@ export default {
 		},
 
 		/** The default channel value (first configured channel, else `telefoon`). */
+		/**
+		 * A label the manifest supplies (a channel, an outcome, the submit
+		 * label), translated: the app's own translation first, since the words
+		 * are the app's, then the library's catalogue, then the text as
+		 * written. Before, a channel label was shown as written and the submit
+		 * label only reached the app's translate, so pipelinq showed "Phone"
+		 * and "Save contact moment" in English to a Dutch reader.
+		 *
+		 * @spec openspec/changes/interaction-form-fits-and-reads-dutch/specs/interaction-form-widget/spec.md#requirement-the-interaction-form-fits-its-card-and-reads-in-the-readers-language
+		 * @param {string} key The label as the manifest writes it.
+		 * @return {string} The translated label.
+		 */
+		copy(key) {
+			if (typeof key !== 'string' || key === '') {
+				return key
+			}
+			const host = typeof this.cnTranslate === 'function' ? this.cnTranslate(key) : key
+			if (typeof host === 'string' && host !== '' && host !== key) {
+				return host
+			}
+			return t('nextcloud-vue', key)
+		},
+
 		firstChannel() {
 			const ch = (this.content && this.content.channels) || []
 			return (Array.isArray(ch) && ch.length > 0 && ch[0].value) || 'telefoon'

package/src/components/CnObjectDataWidget/CnObjectDataWidget.md

@@ -121,7 +121,7 @@ export default {
 | `icon` | Object\|Function | `null` | MDI icon component shown in the card header |
 | `objectType` | String | `''` | Registered object type slug used by `objectStore.saveObject()` |
 | `store` | Object | `null` | Explicit Pinia objectStore instance; auto-detected via Pinia when omitted |
-| `overrides` | Object | `{}` | Per-property config: `{ key: { order, gridColumn, gridRow, hidden, editable, label, widget } }` |
+| `overrides` | Object | `{}` | Per-property config: `{ key: { order, gridColumn, gridRow, hidden, editable, label, widget, visibleWhen } }`. `visibleWhen` shows the field only when the shared visibility predicate holds for this object, in its local mode: `{ field, op, value }` (ops `eq`, `neq`, `in`, `empty`, ...), or `all` / `any` of those. It reads unsaved changes too. A rule that needs a request (`endpoint`, `source`) is ignored. Read grid only: the Edit form still offers the field. |
 | `columns` | Number | `3` | Number of CSS grid columns in the widget |
 | `collapsedFields` (`collapsed-fields`) | Number | `null` | Number of fields shown while collapsed, with a "Show all N fields" button for the rest. `null` fits the cell: the whole rows that fit stay, and the button only appears when the cell overflows |
 | `hideEmpty` | Boolean | `false` | Hide fields with no value instead of rendering an em dash. For discriminated supertypes (one `ticket` schema holding request/complaint/contactmoment), so the grid is type-aware without the schema enumerating which fields belong to which variant. Read grid only — the field being edited, a field with unsaved changes, and the Edit form stay visible; `false`/`0` are values and are never hidden. |

package/src/components/CnObjectDataWidget/CnObjectDataWidget.vue

@@ -418,6 +418,7 @@ import { resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 import { fieldsFromSchema, formatValue } from '../../utils/schema.js'
 import { schemaRefSlug } from '../../utils/schemaRefSlug.js'
 import { resolveNextcloudUser, searchNextcloudUsers } from '../../utils/userAutocomplete.js'
+import { evaluateVisibleWhenLocal, isLocallyDecidableVisibleWhen } from '../../utils/visibleWhen.js'
 import { CnIcon } from '../CnIcon/index.js'
 import { CnObjectMetadataModal } from '../CnObjectMetadataModal/index.js'
 import { CnWidgetWrapper } from '../CnWidgetWrapper/index.js'
@@ -939,13 +940,18 @@ export default {
 				gridRow: (this.resolvedOverrides[field.key] && this.resolvedOverrides[field.key].gridRow) || 1,
 			}))
 
+			// Per-field condition: `overrides[key].visibleWhen` shows a field only
+			// for the objects it belongs to, such as a person's preferred name on
+			// a client that can also be an organisation.
+			const shown = withSpans.filter((field) => this.isVisibleByCondition(field))
+
 			if (!this.hideEmpty) {
-				return withSpans
+				return shown
 			}
 
 			// Keep a field the user is currently editing or has pending changes for,
 			// otherwise it would vanish mid-edit the moment its value is cleared.
-			return withSpans.filter((field) => field.key === this.editingField
+			return shown.filter((field) => field.key === this.editingField
 				|| field.key in this.dirtyFields
 				|| !this.isEmptyValue((this.objectData || {})[field.key]))
 		},
@@ -1709,6 +1715,29 @@ export default {
 			return !field.readOnly
 		},
 
+		/**
+		 * Evaluate a field's `visibleWhen` override against the object.
+		 *
+		 * The rule is the shared visibility predicate in its LOCAL mode
+		 * (`{ field, op, value }`, `all` / `any`, `appInstalled`), evaluated by
+		 * `evaluateVisibleWhenLocal` against the object with its unsaved
+		 * changes, so a field appears or goes the moment the field it depends
+		 * on changes. A rule that needs a request (`endpoint`, `source`) cannot
+		 * be decided here and is ignored: the field shows, as it did before
+		 * the rule existed.
+		 *
+		 * @param {object} field - Resolved field definition.
+		 * @return {boolean} True when the field is shown.
+		 */
+		isVisibleByCondition(field) {
+			const override = this.resolvedOverrides[field.key]
+			const rule = override ? override.visibleWhen : undefined
+			if (rule === undefined || rule === null || !isLocallyDecidableVisibleWhen(rule)) {
+				return true
+			}
+			return evaluateVisibleWhenLocal(rule, { ...(this.objectData || {}), ...this.dirtyFields })
+		},
+
 		/**
 		 * Evaluate a field's conditional read-only rule against the object data.
 		 *

package/src/components/CnRecordListWidget/CnRecordListWidget.vue

@@ -212,7 +212,9 @@ export default {
 		/**
 		 * The list config: `{ register, schema, filter?, sort?, limit?, extend?,
 		 * presentation?, title?, meta?, text?, label?, pill?, trailing?, icon?,
-		 * rowRoute?, rowIdField?, headerLink?, headerNote?, emptyText?, errorText? }`.
+		 * rowRoute?, rowIdField?, headerLink?, headerNote?, emptyText?, errorText?,
+		 * valueLabels? }`. `valueLabels` maps a field's stored values to the labels
+		 * the templates show.
 		 *
 		 * @type {object}
 		 */
@@ -441,7 +443,40 @@ export default {
 		 * @return {string} The text, '' when a token is empty.
 		 */
 		fill(template, row) {
-			return typeof template === 'string' && template !== '' ? fillTemplate(this.translate(template), row, new Date(), this.templateContext) : ''
+			return typeof template === 'string' && template !== '' ? fillTemplate(this.translate(template), this.labelledRow(row), new Date(), this.templateContext) : ''
+		},
+
+		/**
+		 * The row as the templates read it: a field named in `valueLabels`
+		 * (`{ channel: { phone: "Phone", telefoon: "Phone" } }`) shows the
+		 * translated label of its stored value, so "{channel}" reads "Telefoon"
+		 * for both spellings the data holds. A value without a label stays as
+		 * stored. The pill, the badges and the sort read the stored value.
+		 *
+		 * @param {object} row The row.
+		 * @return {object} The row, or a shallow copy with labelled fields.
+		 * @spec openspec/changes/screens-record-list-value-labels/specs/record-list-value-labels/spec.md#requirement-a-record-list-template-can-show-a-label-for-a-stored-value
+		 */
+		labelledRow(row) {
+			const map = this.content?.valueLabels
+			if (!row || typeof row !== 'object' || !map || typeof map !== 'object') {
+				return row
+			}
+			let out = row
+			for (const [field, labels] of Object.entries(map)) {
+				const raw = row[field]
+				if (!labels || typeof labels !== 'object' || (typeof raw !== 'string' && typeof raw !== 'number')) {
+					continue
+				}
+				const label = labels[String(raw)]
+				if (typeof label === 'string' && label !== '') {
+					if (out === row) {
+						out = { ...row }
+					}
+					out[field] = this.translate(label)
+				}
+			}
+			return out
 		},
 
 		/**