@conduction/nextcloud-vue 2.124.0 → 2.125.0

package/l10n/en.json

@@ -2220,6 +2220,13 @@
     "This could not be read: {reason}": "This could not be read: {reason}",
     "Still open": "Still open",
     "The checklist could not be read.": "The checklist could not be read.",
+    "Flag it with a reason, so it stands out to everyone who works on it.": "Flag it with a reason, so it stands out to everyone who works on it.",
+    "Clear the flag with a reason once it no longer needs attention.": "Clear the flag with a reason once it no longer needs attention.",
+    "Compose mail": "Compose mail",
+    "Link mail": "Link mail",
+    "Enter a quarter as YYYY-Qn, for example 2026-Q3.": "Enter a quarter as YYYY-Qn, for example 2026-Q3.",
+    "Enter a year as four digits, for example 2026.": "Enter a year as four digits, for example 2026.",
+    "This value has the wrong form.": "This value has the wrong form.",
     "The value for {key} must be above {min}.": "The value for {key} must be above {min}.",
     "Add a row": "Add a row",
     "Key": "Key",
@@ -2229,14 +2236,7 @@
     "How this app compares": "How this app compares",
     "This field is required": "This field is required",
     "Creating…": "Creating…",
-    "This could not be created. Try again.": "This could not be created. Try again.",
-    "Flag it with a reason, so it stands out to everyone who works on it.": "Flag it with a reason, so it stands out to everyone who works on it.",
-    "Clear the flag with a reason once it no longer needs attention.": "Clear the flag with a reason once it no longer needs attention.",
-    "Compose mail": "Compose mail",
-    "Link mail": "Link mail",
-    "Enter a quarter as YYYY-Qn, for example 2026-Q3.": "Enter a quarter as YYYY-Qn, for example 2026-Q3.",
-    "Enter a year as four digits, for example 2026.": "Enter a year as four digits, for example 2026.",
-    "This value has the wrong form.": "This value has the wrong form."
+    "This could not be created. Try again.": "This could not be created. Try again."
   },
   "plurals": {
     "{count} member": [

package/l10n/nl.json

@@ -2470,6 +2470,13 @@
     "This could not be read: {reason}": "Dit kon niet worden gelezen: {reason}",
     "Still open": "Nog open",
     "The checklist could not be read.": "De lijst kon niet worden gelezen.",
+    "Flag it with a reason, so it stands out to everyone who works on it.": "Markeer het met een reden, zodat het opvalt bij iedereen die eraan werkt.",
+    "Clear the flag with a reason once it no longer needs attention.": "Haal de markering weg met een reden zodra het geen aandacht meer nodig heeft.",
+    "Compose mail": "Mail opstellen",
+    "Link mail": "Mail koppelen",
+    "Enter a quarter as YYYY-Qn, for example 2026-Q3.": "Vul een kwartaal in als JJJJ-Qn, bijvoorbeeld 2026-Q3.",
+    "Enter a year as four digits, for example 2026.": "Vul een jaar in met vier cijfers, bijvoorbeeld 2026.",
+    "This value has the wrong form.": "Deze waarde heeft niet de goede vorm.",
     "The value for {key} must be above {min}.": "De waarde voor {key} moet hoger zijn dan {min}.",
     "Add a row": "Een rij toevoegen",
     "Key": "Sleutel",
@@ -2479,14 +2486,7 @@
     "How this app compares": "Hoe deze app zich verhoudt",
     "This field is required": "Dit veld is verplicht",
     "Creating…": "Aanmaken…",
-    "This could not be created. Try again.": "Dit kon niet worden aangemaakt. Probeer het opnieuw.",
-    "Flag it with a reason, so it stands out to everyone who works on it.": "Markeer het met een reden, zodat het opvalt bij iedereen die eraan werkt.",
-    "Clear the flag with a reason once it no longer needs attention.": "Haal de markering weg met een reden zodra het geen aandacht meer nodig heeft.",
-    "Compose mail": "Mail opstellen",
-    "Link mail": "Mail koppelen",
-    "Enter a quarter as YYYY-Qn, for example 2026-Q3.": "Vul een kwartaal in als JJJJ-Qn, bijvoorbeeld 2026-Q3.",
-    "Enter a year as four digits, for example 2026.": "Vul een jaar in met vier cijfers, bijvoorbeeld 2026.",
-    "This value has the wrong form.": "Deze waarde heeft niet de goede vorm."
+    "This could not be created. Try again.": "Dit kon niet worden aangemaakt. Probeer het opnieuw."
   },
   "plurals": {
     "{count} member": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.124.0",
+  "version": "2.125.0",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "homepage": "https://github.com/ConductionNL/nextcloud-vue#readme",
   "bugs": {

package/src/components/CnActionDialog/CnActionDialog.vue

@@ -68,10 +68,35 @@
 				:key="field.field"
 				class="cn-action-dialog__field"
 				:data-testid="`cn-action-dialog-field-${field.field}`">
-				<NcSelect v-if="field.type === 'select'"
+				<!-- A checkbox field: a tinted box, the label filled from the
+				     record, a hint under it (DqArchiveren "Sanne de Vries laten
+				     weten..."). -->
+				<NcCheckboxRadioSwitch v-if="field.type === 'checkbox'"
+					class="cn-action-dialog__checkbox"
+					:modelValue="checkboxValue(field)"
+					type="checkbox"
+					@update:modelValue="(on) => setChecked(field.field, on)">
+					<span class="cn-action-dialog__checkbox-text">
+						<strong class="cn-action-dialog__checkbox-label">{{ fill(field.label) || field.field }}</strong>
+						<span v-if="field.hint" class="cn-action-dialog__muted">{{ fill(field.hint) }}</span>
+					</span>
+				</NcCheckboxRadioSwitch>
+				<!-- A search field: records of `source` found as the reader
+				     types (DqZaakKoppelen "Zaak koppelen"). -->
+				<CnSearchSelect v-else-if="field.type === 'search'"
+					:modelValue="values[field.field] || null"
+					:options="searchOptions[field.field] || []"
+					:inputLabel="fill(field.label) || field.field"
+					:labelOutside="true"
+					:loading="searching === field.field"
+					:filterable="false"
+					:placeholder="fill(field.placeholder)"
+					@search="(typed) => onSearch(field, typed)"
+					@update:modelValue="(value) => setValue(field.field, value && typeof value === 'object' ? value.id : value)" />
+				<NcSelect v-else-if="field.type === 'select'"
 					:modelValue="selectedOption(field)"
 					:options="optionsOf(field)"
-					:inputLabel="text(field.label) || field.field"
+					:inputLabel="fill(field.label) || field.field"
 					:clearable="field.required === false"
 					@update:modelValue="(option) => pick(field, option)" />
 				<NcTextField v-else-if="field.type === 'secret'"
@@ -84,8 +109,9 @@
 				<NcTextField v-else
 					:modelValue="values[field.field] || ''"
 					:type="field.type === 'datetime' ? 'datetime-local' : (field.type === 'date' ? 'date' : 'text')"
-					:label="text(field.label) || field.field"
+					:label="fill(field.label) || field.field"
 					@update:modelValue="(value) => setValue(field.field, value)" />
+				<span v-if="field.hint && field.type !== 'checkbox'" class="cn-action-dialog__muted">{{ fill(field.hint) }}</span>
 			</div>
 
 			<div v-if="config.reason" class="cn-action-dialog__field">
@@ -142,7 +168,7 @@ import axios from '@nextcloud/axios'
 import { emit } from '@nextcloud/event-bus'
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
-import { NcButton, NcNoteCard, NcSelect, NcTextArea, NcTextField } from '@nextcloud/vue'
+import { NcButton, NcCheckboxRadioSwitch, NcNoteCard, NcSelect, NcTextArea, NcTextField } from '@nextcloud/vue'
 import CheckCircle from 'vue-material-design-icons/CheckCircle.vue'
 import CircleOutline from 'vue-material-design-icons/CircleOutline.vue'
 import HelpCircleOutline from 'vue-material-design-icons/HelpCircleOutline.vue'
@@ -151,6 +177,10 @@ import { fillTemplate } from '../../utils/fillTemplate.js'
 import { readPath } from '../../utils/readPath.js'
 import { CnDialog } from '../CnDialog/index.js'
 import { CnIcon } from '../CnIcon/index.js'
+import { CnSearchSelect } from '../CnSearchSelect/index.js'
+
+/** How long typing rests before a search field searches, in ms. */
+const SEARCH_DELAY = 250
 
 /** The page refresh channel the built-in widgets listen on. */
 const PAGE_REFRESH = 'cn:page:refresh'
@@ -180,10 +210,17 @@ let reasonSeq = 0
  *   the action runs only while `allowedPath` reads true; `reasonPath` says
  *   why not. With `listPath` the paths read the entry of that list whose
  *   fields equal `match` (`{ act: "archive" }`).
- * - `fields`: `[{ field, type?: "text"|"date"|"datetime"|"select", label?,
- *   required?, options?: [{ value, label, fills? }] }]`: inputs sent beside
- *   the reason, required by default; a select option's `fills` sets other
- *   fields that are still empty.
+ * - `fields`: `[{ field, type?: "text"|"date"|"datetime"|"select"|"checkbox", label?,
+ *   required?, options?: [{ value, label, fills? }], hint?, default? }]`: inputs
+ *   sent beside the reason, required by default; a select option's `fills`
+ *   sets other fields that are still empty. A `checkbox` is sent as a boolean,
+ *   starts at `default` (false), fills its `label` and `hint` from the record,
+ *   and is optional unless `required: true` (then it must be ticked). A
+ *   `search` field finds records of `source: { register, schema }` as the
+ *   reader types, shows each as `optionLabel` with `optionSecondary` under
+ *   it (templates on the found record), leaves the record in hand out with
+ *   `excludeSelf`, and sends the chosen record's id. Every field's `label`,
+ *   `hint` and `placeholder` are templates filled from the record.
  * - `reason`: `{ label?, hint?, required?, field?, rows? }`: a text area; required by
  *   default; sent as `field` (default `reason`). `rows` is its height in lines
  *   (default 2; board DqBesluit draws 4).
@@ -197,7 +234,7 @@ let reasonSeq = 0
 export default {
 	name: 'CnActionDialog',
 
-	components: { CheckCircle, CircleOutline, CnDialog, CnIcon, HelpCircleOutline, NcButton, NcNoteCard, NcSelect, NcTextArea, NcTextField },
+	components: { CheckCircle, CircleOutline, CnDialog, CnIcon, CnSearchSelect, HelpCircleOutline, NcButton, NcCheckboxRadioSwitch, NcNoteCard, NcSelect, NcTextArea, NcTextField },
 
 	inject: {
 		/** The host app's translate (CnAppRoot `cnTranslate`). */
@@ -244,6 +281,10 @@ export default {
 			allowed: true,
 			reason: '',
 			values: {},
+			/** A search field's found options, by field name. */
+			searchOptions: {},
+			/** The search field whose search runs, or ''. */
+			searching: '',
 			busy: false,
 			refusal: '',
 			done: false,
@@ -362,6 +403,20 @@ export default {
 			return this.record ? this.fill(this.config.eyebrow) || this.text(this.config.eyebrow) : this.text(this.config.eyebrow)
 		},
 
+		/**
+		 * The value of every field as sent: a checkbox as a boolean, the
+		 * others as entered ('' when empty).
+		 *
+		 * @return {object} Values by field name.
+		 */
+		fieldValues() {
+			const out = { ...this.values }
+			for (const field of this.fields) {
+				out[field.field] = field.type === 'checkbox' ? this.checkboxValue(field) : (this.values[field.field] ?? '')
+			}
+			return out
+		},
+
 		/** @return {Array<object>} The fields with a name. */
 		fields() {
 			return (Array.isArray(this.config.fields) ? this.config.fields : []).filter((f) => f && f.field)
@@ -374,7 +429,12 @@ export default {
 		 * @return {boolean}
 		 */
 		fieldsFilled() {
-			return this.fields.every((f) => f.required === false || this.secretStored(f) || String(this.values[f.field] ?? '').trim() !== '')
+			return this.fields.every((f) => {
+				if (f.type === 'checkbox') {
+					return f.required !== true || this.checkboxValue(f)
+				}
+				return f.required === false || this.secretStored(f) || String(this.values[f.field] ?? '').trim() !== ''
+			})
 		},
 	},
 
@@ -392,6 +452,10 @@ export default {
 		await Promise.all([this.loadRecord(), this.loadChecklist(), this.loadPermission()])
 	},
 
+	beforeUnmount() {
+		clearTimeout(this.searchTimer)
+	},
+
 	methods: {
 		t,
 
@@ -401,6 +465,76 @@ export default {
 		 * @param {unknown} value The text.
 		 * @return {string}
 		 */
+		/**
+		 * Search a search field's records once typing rests.
+		 *
+		 * @param {object} field The field.
+		 * @param {string} typed What the reader typed.
+		 * @return {void}
+		 * @spec openspec/changes/action-dialog-search-field/specs/action-dialog-search-field/spec.md#requirement-an-action-dialog-field-can-search-records
+		 */
+		onSearch(field, typed) {
+			clearTimeout(this.searchTimer)
+			this.searchTimer = setTimeout(() => this.searchRecords(field, String(typed || '').trim()), SEARCH_DELAY)
+		},
+
+		/**
+		 * Read the records of a search field's `source` that match the term.
+		 *
+		 * @param {object} field The field.
+		 * @param {string} term The term.
+		 * @return {Promise<void>}
+		 */
+		async searchRecords(field, term) {
+			const source = field.source || {}
+			if (!term || !source.register || !source.schema) {
+				this.searchOptions = { ...this.searchOptions, [field.field]: [] }
+				return
+			}
+			this.searching = field.field
+			try {
+				const url = generateUrl(`/apps/openregister/api/objects/${encodeURIComponent(source.register)}/${encodeURIComponent(source.schema)}`)
+				const { data } = await axios.get(url, { params: { _search: term, _limit: 10 } })
+				const rows = Array.isArray(data) ? data : (data && Array.isArray(data.results) ? data.results : [])
+				const self = String(this.recordId || '')
+				const options = rows
+					.map((row) => ({ row, id: String(row.id || (row['@self'] && row['@self'].id) || '') }))
+					.filter(({ id }) => id !== '' && !(field.excludeSelf && id === self))
+					.map(({ row, id }) => {
+						const option = { id, label: this.fill(field.optionLabel || '{title}', row) || id }
+						const secondary = this.fill(field.optionSecondary, row)
+						return secondary ? { ...option, secondary } : option
+					})
+				this.searchOptions = { ...this.searchOptions, [field.field]: options }
+			} catch {
+				this.searchOptions = { ...this.searchOptions, [field.field]: [] }
+			} finally {
+				this.searching = ''
+			}
+		},
+
+		/**
+		 * A checkbox field's state: what was ticked, else its `default`.
+		 *
+		 * @param {object} field The field.
+		 * @return {boolean}
+		 * @spec openspec/changes/action-dialog-checkbox-field/specs/action-dialog-checkbox-field/spec.md#requirement-an-action-dialog-field-can-be-a-checkbox
+		 */
+		checkboxValue(field) {
+			return field.field in this.values ? this.values[field.field] === true : field.default === true
+		},
+
+		/**
+		 * Tick or untick a checkbox field.
+		 *
+		 * @param {string} name The field.
+		 * @param {boolean} on Ticked.
+		 * @return {void}
+		 */
+		setChecked(name, on) {
+			this.values = { ...this.values, [name]: on === true }
+		},
+
 		text(value) {
 			return typeof value === 'string' && value !== '' ? this.cnTranslate(value) : ''
 		},
@@ -557,21 +691,22 @@ export default {
 					if (this.config.reason) {
 						body[this.config.reason.field || 'reason'] = reason
 					}
+					const values = { ...this.fieldValues }
 					for (const field of this.fields) {
 						if (field.type === 'secret' && String(this.values[field.field] ?? '') === '') {
-							continue
+							delete values[field.field]
 						}
-						body[field.field] = this.values[field.field] ?? ''
 					}
+					Object.assign(body, values)
 					const method = String(request.method || 'POST').toLowerCase()
 					await axios[['post', 'put', 'patch', 'delete'].includes(method) ? method : 'post'](/^https?:\/\//i.test(url) ? url : generateUrl(url), body)
 				} else if (this.confirmConfig.action && typeof this.cnDispatchAction === 'function') {
-					await this.cnDispatchAction({ ...this.confirmConfig.action, args: [...(this.confirmConfig.action.args || []), { ...this.values, reason }] })
+					await this.cnDispatchAction({ ...this.confirmConfig.action, args: [...(this.confirmConfig.action.args || []), { ...this.fieldValues, reason }] })
 				}
 				this.done = true
 				emit(PAGE_REFRESH, {})
 				/** @event done The action ran. Payload: the field values and `reason`. */
-				this.$emit('done', { ...this.values, reason })
+				this.$emit('done', { ...this.fieldValues, reason })
 			} catch (failure) {
 				const data = failure && failure.response && failure.response.data
 				this.refusal = String((data && (data.message || data.error)) || t('nextcloud-vue', 'The action could not be completed.'))
@@ -729,6 +864,30 @@ export default {
 	font-size: 14px;
 }
 
+/* A checkbox field is a tinted box with a 2px edge, its label bold and its
+   hint under it (DqArchiveren). */
+.cn-action-dialog__checkbox {
+	padding: 12px 14px;
+	border: 2px solid var(--color-primary-element);
+	border-radius: var(--border-radius-element, 8px);
+	background: var(--color-primary-element-light);
+}
+
+.cn-action-dialog__checkbox-text {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.cn-action-dialog__checkbox-label {
+	font-size: 15px;
+	font-weight: 600;
+}
+
+.cn-action-dialog__checkbox .cn-action-dialog__muted {
+	font-size: 13px;
+}
+
 .cn-action-dialog__field {
 	display: flex;
 	flex-direction: column;

package/src/components/CnAppRoot/CnAppRoot.vue

@@ -1690,9 +1690,10 @@ export default {
 		},
 
 		/**
-		 * Board look: the line above the user-settings title. Empty uses
-		 * the library's "Your account".
+		 * Deprecated and ignored: the board user-settings dialog draws no
+		 * line above its title (DqPersoonlijkeInstellingen).
 		 *
+		 * @deprecated
 		 * @type {string}
 		 */
 		userSettingsEyebrow: {
@@ -1701,10 +1702,10 @@ export default {
 		},
 
 		/**
-		 * Board look: the sentence under the user-settings title. Empty
-		 * uses the library's "Only for you. Colleagues keep their own
-		 * settings."
+		 * Deprecated and ignored: the board user-settings dialog draws no
+		 * sentence under its title (DqPersoonlijkeInstellingen).
 		 *
+		 * @deprecated
 		 * @type {string}
 		 */
 		userSettingsSubtitle: {
@@ -3205,8 +3206,8 @@ export default {
 
 		/**
 		 * The props of the user-settings dialog: `NcAppSettingsDialog`'s, or
-		 * under the board look CnUserSettingsDialog's (eyebrow, subtitle and
-		 * the app's name for the footer note).
+		 * under the board look CnUserSettingsDialog's (title, the app's name
+		 * for the note under the sections, and the Nextcloud links).
 		 *
 		 * @spec openspec/changes/user-settings-board-dialog/specs/user-settings-board-dialog/spec.md#requirement-the-user-settings-dialog-takes-the-board-look
 		 * @return {object}

package/src/components/CnAssignDialog/CnAssignDialog.vue

@@ -46,9 +46,9 @@
 				:class="{ 'cn-assign-dialog__toggle--on': flags[toggle.field] }"
 				:data-testid="`cn-assign-dialog-toggle-${toggle.field}`">
 				<NcCheckboxRadioSwitch :modelValue="flags[toggle.field] === true" @update:modelValue="flags[toggle.field] = $event">
-					<span class="cn-assign-dialog__toggle-title">{{ text(toggle.label) }}</span>
+					<span class="cn-assign-dialog__toggle-title">{{ fill(toggle.label) }}</span>
 				</NcCheckboxRadioSwitch>
-				<span v-if="toggle.note" class="cn-assign-dialog__hint cn-assign-dialog__toggle-note">{{ text(toggle.note) }}</span>
+				<span v-if="toggle.note" class="cn-assign-dialog__hint cn-assign-dialog__toggle-note">{{ fill(toggle.note) }}</span>
 			</div>
 
 			<p v-if="refusal"
@@ -144,7 +144,8 @@ export function withTypedAssignee(found, typed, label) {
  *   sent as `field` (default `note`); `false` drops it. `rows` is the text
  *   area's height in lines (default 3, as board DqOverdragen draws it).
  * - `toggles`: `[{ field, label, note? }]`: switches that start off and are
- *   sent as booleans.
+ *   sent as booleans; `label` and `note` are templates filled from the record
+ *   ("{initiatorDisplayName} then gets a message").
  * - `confirm`: `{ label?, icon?, request?: { method?, url, body? }, action? }`.
  *   `request` sends the choice itself (`body` templates filled from the
  *   record); `action` dispatches a manifest action with the choice as its

package/src/components/CnDialog/CnDialog.vue

@@ -10,7 +10,7 @@
 		:class="frameClass"
 		:style="frameStyle"
 		@closing="onClosing">
-		<CnDialogHeader v-if="isBoard"
+		<CnDialogHeader v-if="isBoard && !headless"
 			:title="name"
 			:eyebrow="eyebrow"
 			:subtitle="subtitle"
@@ -74,6 +74,11 @@ export default {
 		eyebrow: { type: String, default: '' },
 		/** Sentence under the title (board look). */
 		subtitle: { type: String, default: '' },
+		/**
+		 * Leave out the board header: the body draws its own title and close
+		 * button (CnUserSettingsDialog). `name` stays the accessible name.
+		 */
+		headless: { type: Boolean, default: false },
 	},
 
 	emits: ['closing'],

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -340,6 +340,7 @@
 					:currentUserId="currentSavedViewsUserId"
 					:counts="savedViewCounts"
 					:selectedViewId="appliedSavedViewId"
+					:chips="savedViewChips"
 					@apply="onApplySavedView"
 					@saveRequest="showSaveViewDialog = true" />
 				<!-- Native Export menu (opt-in via `allowExport` + schema.exportable):
@@ -2316,6 +2317,19 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * Whether the board look draws the saved views as chips in the toolbar
+		 * (manifest `config.savedViewChips`). `false` keeps only Save view,
+		 * for a page whose views live in the side panel's Weergaven tab
+		 * (DqZaken, DqZakenSorteren, DqZakenKaart, DqWerkbord, DqFilterBeheren).
+		 *
+		 * @spec openspec/changes/saved-view-chips-switch/specs/saved-views/spec.md#requirement-an-index-page-can-leave-the-saved-view-chips-out-of-the-toolbar
+		 */
+		savedViewChips: {
+			type: Boolean,
+			default: true,
+		},
+
 		/**
 		 * Where the quick-filter chips sit (manifest `config.quickFilterPlacement`).
 		 * `''` (the default) as before. `'toolbar'` keeps them on one row with

package/src/components/CnObjectListWidget/CnObjectListWidget.vue

@@ -353,6 +353,7 @@ import { buildExportUrl } from '../../utils/indexExportHelpers.js'
 import { followLinkClick, openRowTarget, resolveHref } from '../../utils/linkNavigation.js'
 import { createActionState } from '../../utils/listCreateAction.js'
 import { objectDisplayName, objectFieldValue } from '../../utils/objectName.js'
+import { readPath } from '../../utils/readPath.js'
 import { moveIndex, renumberRows, rowIdOf } from '../../utils/reorderRows.js'
 import { dropOptionalUnresolved, hasUnresolvedTokens, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 import { markNewTabHandled } from '../../utils/rowAuxClick.js'
@@ -497,13 +498,15 @@ export default {
 		 * `hideHeader: true` drops the table's column header row (CnDataTable's
 		 * `hideHeader`), for a short list that reads as rows, not as a table.
 		 *
+		 * `rowIdField` (a dot-path) names the row field holding the id
+		 * `rowRoute` opens, for a row that links to another record.
 		 * `footnote` is a line under the table, through the host translate.
 		 *
 		 * `export` (`{ label?, format?, group? }`) offers the filtered list as a
 		 * download in the card's header; `group` shows it to one group only.
 		 *
 		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-small-opt-ins-from-the-decidiq-and-learniq-lanes
-		 * @type {{register?: string, schema?: string, filter?: object, sort?: {field?: string, dir?: string}, limit?: number, extend?: Array<string>, columns?: Array, rowActions?: Array<object>, dropZone?: object, upload?: boolean, groupBy?: string, groupLabel?: string, groupLabelResolve?: {register: string, schema: string, labelField?: string}, selectable?: boolean, bulkActions?: Array<object>, sortable?: boolean, facet?: {field: string, label?: string}, rowRoute?: string, prompt?: string, emptyText?: string, footnote?: string, viewAllRoute?: string, viewAllQuery?: object, hideHeader?: boolean, export?: {label?: string, format?: ('csv'|'excel'), group?: string}}}
+		 * @type {{register?: string, schema?: string, filter?: object, sort?: {field?: string, dir?: string}, limit?: number, extend?: Array<string>, columns?: Array, rowActions?: Array<object>, dropZone?: object, upload?: boolean, groupBy?: string, groupLabel?: string, groupLabelResolve?: {register: string, schema: string, labelField?: string}, selectable?: boolean, bulkActions?: Array<object>, sortable?: boolean, facet?: {field: string, label?: string}, rowRoute?: string, rowIdField?: string, prompt?: string, emptyText?: string, footnote?: string, viewAllRoute?: string, viewAllQuery?: object, hideHeader?: boolean, export?: {label?: string, format?: ('csv'|'excel'), group?: string}}}
 		 */
 		content: {
 			type: Object,
@@ -2145,7 +2148,9 @@ export default {
 		 */
 		openRowRoute(row, event) {
 			const route = this.content.rowRoute
-			const id = row && (row.id || (row['@self'] && row['@self'].id))
+			const field = this.content.rowIdField
+			const raw = field ? readPath(row, field) : row && (row.id || (row['@self'] && row['@self'].id))
+			const id = typeof raw === 'string' || typeof raw === 'number' ? String(raw) : ''
 			if (route && id && this.$router) {
 				markNewTabHandled(event, openRowTarget(event, { name: route, params: { id } }, this.$router))
 			}