From ac7b3d3c9315e5d11dd0621caaeb6bd9f1ab94a0 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Mon, 12 Oct 2026 10:28:47 +0200
Subject: [PATCH 1/4] feat(grid): add schema-driven widget forms and the table
 or view widget

The form to add or configure a widget is rendered from the schema the
server defines for its type, so a new widget type needs a schema and a
renderer rather than its own dialog. The data widget shows the rows of
a table or view inside a grid.

Co-authored-by: Ruben van der Linde <ruben@conduction.nl>
Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: Remko <remko@conduction.nl>
---
 src/modules/grid/SchemaForm.vue         | 176 ++++++++++++++++++++++++
 src/modules/grid/widgetRegistry.js      |   2 +
 src/modules/grid/widgets/DataWidget.vue | 170 +++++++++++++++++++++++
 src/modules/modals/AddWidget.vue        | 155 +++++++++++++++++++++
 4 files changed, 503 insertions(+)
 create mode 100644 src/modules/grid/SchemaForm.vue
 create mode 100644 src/modules/grid/widgets/DataWidget.vue
 create mode 100644 src/modules/modals/AddWidget.vue

diff --git a/src/modules/grid/SchemaForm.vue b/src/modules/grid/SchemaForm.vue
new file mode 100644
index 0000000000..e9fdb6f5fb
--- /dev/null
+++ b/src/modules/grid/SchemaForm.vue
@@ -0,0 +1,176 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<div class="schema-form">
+		<div v-for="(property, name) in properties" :key="name" class="schema-form__field" :data-cy="'widgetField-' + name">
+			<NcTextField v-if="property.type === 'string'"
+				class="schema-form__input"
+				:model-value="value(name)"
+				:label="label(property)"
+				@update:model-value="text => set(name, text)" />
+			<NcTextArea v-else-if="property.type === 'text'"
+				class="schema-form__input"
+				:model-value="value(name)"
+				:label="label(property)"
+				:placeholder="t('tables', 'Leave an empty line between paragraphs')"
+				resize="vertical"
+				rows="6"
+				@update:model-value="text => set(name, text)" />
+			<NcTextField v-else-if="property.type === 'integer'"
+				class="schema-form__input"
+				:model-value="String(value(name) ?? '')"
+				:label="label(property)"
+				type="number"
+				@update:model-value="text => set(name, text === '' ? null : parseInt(text))" />
+			<NcCheckboxRadioSwitch v-else-if="property.type === 'boolean'"
+				:model-value="!!value(name)"
+				@update:model-value="checked => set(name, checked)">
+				{{ label(property) }}
+			</NcCheckboxRadioSwitch>
+			<NcSelect v-else-if="property.type === 'enum'"
+				class="schema-form__input"
+				:model-value="enumOption(property, value(name))"
+				:input-label="label(property)"
+				:options="property.options"
+				:clearable="false"
+				label="label"
+				@update:model-value="option => set(name, option?.value ?? property.default)" />
+			<NcSelect v-else-if="property.type === 'target'"
+				class="schema-form__input"
+				:model-value="targetOption(value(name))"
+				:input-label="label(property)"
+				:options="targetOptions"
+				:clearable="false"
+				:searchable="true"
+				label="label"
+				@update:model-value="option => set(name, option ? { type: option.targetType, id: option.targetId } : null)" />
+			<div v-else-if="property.type === 'color'" class="schema-form__color">
+				<NcColorPicker :model-value="colorValue(name)"
+					advanced-fields
+					clearable
+					@update:model-value="color => set(name, color ?? '')">
+					<NcButton variant="secondary">
+						<template #icon>
+							<span class="schema-form__swatch" :style="{ backgroundColor: colorValue(name) ?? 'var(--color-primary-element-light)' }" />
+						</template>
+						{{ label(property) }}
+					</NcButton>
+				</NcColorPicker>
+				<span class="schema-form__hint">{{ colorValue(name) ?? t('tables', 'Theme color') }}</span>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { NcButton, NcCheckboxRadioSwitch, NcColorPicker, NcSelect, NcTextArea, NcTextField } from '@nextcloud/vue'
+import { mapState } from 'pinia'
+import { useTablesStore } from '../../store/store.js'
+import { isHexColor } from '../../shared/utils/gridColors.js'
+
+/**
+ * Renders the configuration form of a widget from the schema of its type, so a
+ * new widget type needs a schema on the server and a renderer, not a dialog.
+ */
+export default {
+	name: 'SchemaForm',
+	components: {
+		NcButton,
+		NcCheckboxRadioSwitch,
+		NcColorPicker,
+		NcSelect,
+		NcTextArea,
+		NcTextField,
+	},
+	props: {
+		properties: {
+			type: Object,
+			required: true,
+		},
+		modelValue: {
+			type: Object,
+			required: true,
+		},
+	},
+	emits: ['update:modelValue'],
+	computed: {
+		...mapState(useTablesStore, ['tables', 'views']),
+		targetOptions() {
+			const tables = this.tables.map(table => ({
+				id: 'table-' + table.id,
+				targetType: 'table',
+				targetId: table.id,
+				label: (table.emoji ? table.emoji + ' ' : '') + table.title,
+			}))
+			const views = this.views
+				.filter(view => view.type !== 'grid')
+				.map(view => ({
+					id: 'view-' + view.id,
+					targetType: 'view',
+					targetId: view.id,
+					label: (view.emoji ? view.emoji + ' ' : '') + view.title + ' (' + t('tables', 'view') + ')',
+				}))
+			return [...tables, ...views]
+		},
+	},
+	methods: {
+		value(name) {
+			return this.modelValue[name]
+		},
+		set(name, value) {
+			this.$emit('update:modelValue', { ...this.modelValue, [name]: value })
+		},
+		label(property) {
+			return property.title
+		},
+		/**
+		 * @param {string} name property name
+		 * @return {string|undefined} the stored color, or undefined for the theme color
+		 */
+		colorValue(name) {
+			return isHexColor(this.value(name)) ? this.value(name) : undefined
+		},
+		enumOption(property, value) {
+			return property.options.find(option => option.value === value) ?? property.options.find(option => option.value === property.default) ?? null
+		},
+		targetOption(target) {
+			if (!target) {
+				return null
+			}
+			return this.targetOptions.find(option => option.targetType === target.type && option.targetId === target.id) ?? null
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.schema-form {
+	&__field {
+		margin-top: calc(2 * var(--default-grid-baseline, 4px));
+	}
+
+	&__input {
+		width: 100%;
+	}
+
+	&__color {
+		display: flex;
+		align-items: center;
+		gap: calc(3 * var(--default-grid-baseline, 4px));
+	}
+
+	&__swatch {
+		display: inline-block;
+		width: calc(5 * var(--default-grid-baseline, 4px));
+		height: calc(5 * var(--default-grid-baseline, 4px));
+		border: 1px solid var(--color-border-dark);
+		border-radius: var(--border-radius);
+	}
+
+	&__hint {
+		color: var(--color-text-maxcontrast);
+	}
+}
+</style>
diff --git a/src/modules/grid/widgetRegistry.js b/src/modules/grid/widgetRegistry.js
index 49bf755b94..bd958d46d1 100644
--- a/src/modules/grid/widgetRegistry.js
+++ b/src/modules/grid/widgetRegistry.js
@@ -4,6 +4,7 @@
  */
 import HeaderWidget from './widgets/HeaderWidget.vue'
 import TextWidget from './widgets/TextWidget.vue'
+import DataWidget from './widgets/DataWidget.vue'
 
 export const WIDGET_TYPE_HEADER = 'header'
 export const WIDGET_TYPE_TEXT = 'text'
@@ -17,6 +18,7 @@ export const WIDGET_TYPE_DATA = 'data'
 const widgetComponents = {
 	[WIDGET_TYPE_HEADER]: HeaderWidget,
 	[WIDGET_TYPE_TEXT]: TextWidget,
+	[WIDGET_TYPE_DATA]: DataWidget,
 }
 
 /**
diff --git a/src/modules/grid/widgets/DataWidget.vue b/src/modules/grid/widgets/DataWidget.vue
new file mode 100644
index 0000000000..6ae13d5195
--- /dev/null
+++ b/src/modules/grid/widgets/DataWidget.vue
@@ -0,0 +1,170 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<div class="data-widget">
+		<NcLoadingIcon v-if="loading" :size="32" class="data-widget__loading" />
+		<p v-else-if="!element" class="data-widget__empty">
+			{{ t('tables', 'Pick a table or view in the widget settings') }}
+		</p>
+		<template v-else>
+			<CustomView v-if="isView"
+				:view="element"
+				:columns="columns"
+				:rows="rows"
+				:view-setting="viewSetting"
+				@create-column="createColumn"
+				@import="openImportModal"
+				@update:view-setting="setting => viewSetting = setting" />
+			<TableWrapper v-else
+				:table="element"
+				:columns="columns"
+				:rows="rows"
+				:view-setting="viewSetting"
+				@create-column="createColumn"
+				@import="openImportModal"
+				@update:view-setting="setting => viewSetting = setting" />
+		</template>
+	</div>
+</template>
+
+<script>
+import { NcLoadingIcon } from '@nextcloud/vue'
+import { mapActions, mapState, storeToRefs } from 'pinia'
+import { emit } from '@nextcloud/event-bus'
+import TableWrapper from '../../main/sections/TableWrapper.vue'
+import CustomView from '../../main/sections/View.vue'
+import { useTablesStore } from '../../../store/store.js'
+import { useDataStore } from '../../../store/data.js'
+
+/**
+ * Shows the rows of one table or view inside a grid view.
+ */
+export default {
+	name: 'DataWidget',
+	components: {
+		NcLoadingIcon,
+		TableWrapper,
+		CustomView,
+	},
+	props: {
+		content: {
+			type: Object,
+			required: true,
+		},
+	},
+	setup() {
+		const store = useDataStore()
+		const { getColumns, getRows } = storeToRefs(store)
+		return { getColumns, getRows }
+	},
+	data() {
+		return {
+			loading: false,
+			loadFailed: false,
+			viewSetting: {},
+		}
+	},
+	computed: {
+		...mapState(useTablesStore, ['tables', 'views']),
+		target() {
+			if (this.content.target) {
+				return this.content.target
+			}
+			// grids saved before the target became one property
+			return this.content.targetType ? { type: this.content.targetType, id: this.content.targetId } : null
+		},
+		isView() {
+			return this.target?.type === 'view'
+		},
+		targetId() {
+			return parseInt(this.target?.id)
+		},
+		element() {
+			if (!this.targetId || this.loadFailed) {
+				return null
+			}
+			return this.isView
+				? this.views.find(view => view.id === this.targetId) ?? null
+				: this.tables.find(table => table.id === this.targetId) ?? null
+		},
+		columns() {
+			return this.getColumns(this.isView, this.targetId) ?? []
+		},
+		rows() {
+			return this.getRows(this.isView, this.targetId) ?? []
+		},
+	},
+	watch: {
+		target: {
+			deep: true,
+			handler() {
+				this.load()
+			},
+		},
+	},
+	mounted() {
+		this.load()
+	},
+	methods: {
+		...mapActions(useTablesStore, ['loadContextTable', 'loadContextView']),
+		...mapActions(useDataStore, ['loadColumnsFromBE', 'loadRowsFromBE', 'loadRelationsFromBE']),
+		async load() {
+			this.loadFailed = false
+			if (!this.targetId) {
+				return
+			}
+			this.loading = true
+			try {
+				if (this.isView) {
+					await this.loadContextView({ id: this.targetId })
+					const view = this.views.find(view => view.id === this.targetId)
+					if (view) {
+						await this.loadColumnsFromBE({ view })
+						await this.loadRowsFromBE({ viewId: view.id, tableId: view.tableId })
+						await this.loadRelationsFromBE({ viewId: view.id })
+					}
+				} else {
+					await this.loadContextTable({ id: this.targetId })
+					await this.loadColumnsFromBE({ view: null, tableId: this.targetId })
+					await this.loadRowsFromBE({ viewId: null, tableId: this.targetId })
+					await this.loadRelationsFromBE({ tableId: this.targetId })
+				}
+			} catch (error) {
+				console.error('The widget could not load its data', error)
+				this.loadFailed = true
+			} finally {
+				this.loading = false
+			}
+		},
+		createColumn() {
+			emit('tables:column:create', { isView: this.isView, element: this.element })
+		},
+		openImportModal() {
+			emit('tables:modal:import', { element: this.element, isView: this.isView })
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.data-widget {
+	height: 100%;
+	overflow: auto;
+
+	&__loading {
+		margin: calc(4 * var(--default-grid-baseline, 4px)) auto;
+	}
+
+	&__empty {
+		padding: calc(3 * var(--default-grid-baseline, 4px));
+		color: var(--color-text-maxcontrast);
+	}
+
+	:deep(h1) {
+		font-size: unset;
+		font-size: revert;
+	}
+}
+</style>
diff --git a/src/modules/modals/AddWidget.vue b/src/modules/modals/AddWidget.vue
new file mode 100644
index 0000000000..2beb2669ad
--- /dev/null
+++ b/src/modules/modals/AddWidget.vue
@@ -0,0 +1,155 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<NcDialog v-if="showModal"
+		:name="editingWidget ? t('tables', 'Configure widget') : t('tables', 'Add widget')"
+		size="normal"
+		data-cy="addWidgetModal"
+		@closing="$emit('close')">
+		<div class="modal__content">
+			<div class="row space-T">
+				<NcSelect v-model="selectedType"
+					class="add-widget__input"
+					:input-label="t('tables', 'Widget type')"
+					:options="typeOptions"
+					:clearable="false"
+					:disabled="editingWidget !== null"
+					label="label"
+					data-cy="addWidgetType" />
+			</div>
+
+			<div class="row space-T">
+				<NcTextField v-model="title" class="add-widget__input" :label="t('tables', 'Widget title')" data-cy="addWidgetTitle" />
+			</div>
+			<div class="row">
+				<NcCheckboxRadioSwitch v-model="showTitle" data-cy="addWidgetShowTitle">
+					{{ t('tables', 'Show the title above the widget') }}
+				</NcCheckboxRadioSwitch>
+			</div>
+
+			<SchemaForm v-if="widgetType" v-model="content" :properties="widgetType.properties" />
+
+			<div class="row space-T">
+				<div class="fix-col-4 end">
+					<NcButton variant="primary" :disabled="!canSubmit" data-cy="addWidgetSubmit" @click="submit">
+						{{ editingWidget ? t('tables', 'Save widget') : t('tables', 'Add widget') }}
+					</NcButton>
+				</div>
+			</div>
+		</div>
+	</NcDialog>
+</template>
+
+<script>
+import { NcButton, NcCheckboxRadioSwitch, NcDialog, NcSelect, NcTextField } from '@nextcloud/vue'
+import { mapState } from 'pinia'
+import SchemaForm from '../grid/SchemaForm.vue'
+import { useTablesStore } from '../../store/store.js'
+import { defaultConfiguration, defaultContent, findWidgetType } from '../grid/widgetRegistry.js'
+
+/**
+ * Collects the type, configuration and content of a widget; the content form comes
+ * from the schema of the type. The parent places the widget on the grid.
+ */
+export default {
+	name: 'AddWidget',
+	components: {
+		NcButton,
+		NcCheckboxRadioSwitch,
+		NcDialog,
+		NcSelect,
+		NcTextField,
+		SchemaForm,
+	},
+	props: {
+		showModal: {
+			type: Boolean,
+			default: false,
+		},
+		editingWidget: {
+			type: Object,
+			default: null,
+		},
+	},
+	emits: ['close', 'submit'],
+	data() {
+		return {
+			selectedType: null,
+			title: '',
+			showTitle: false,
+			content: {},
+		}
+	},
+	computed: {
+		...mapState(useTablesStore, ['widgetTypes']),
+		typeOptions() {
+			return this.widgetTypes.map(widgetType => ({ id: widgetType.type, label: widgetType.title }))
+		},
+		widgetType() {
+			return findWidgetType(this.widgetTypes, this.selectedType?.id)
+		},
+		canSubmit() {
+			if (!this.widgetType) {
+				return false
+			}
+			return Object.entries(this.widgetType.properties).every(([name, property]) => {
+				if (!property.required) {
+					return true
+				}
+				const value = this.content[name]
+				return property.type === 'target' ? !!value?.id : String(value ?? '').trim() !== ''
+			})
+		},
+	},
+	watch: {
+		showModal(open) {
+			if (open) {
+				this.reset()
+			}
+		},
+		selectedType(option, previous) {
+			if (option && previous && option.id !== previous.id && this.widgetType) {
+				this.content = defaultContent(this.widgetType)
+				this.showTitle = defaultConfiguration(this.widgetType).showTitle ?? false
+			}
+		},
+	},
+	methods: {
+		reset() {
+			if (this.editingWidget) {
+				this.selectedType = this.typeOptions.find(option => option.id === this.editingWidget.type) ?? this.typeOptions[0]
+				this.title = this.editingWidget.configuration?.title ?? ''
+				this.showTitle = !!this.editingWidget.configuration?.showTitle
+				this.content = { ...defaultContent(this.widgetType), ...JSON.parse(JSON.stringify(this.editingWidget.content ?? {})) }
+				return
+			}
+			this.selectedType = this.typeOptions[0] ?? null
+			this.title = ''
+			this.showTitle = defaultConfiguration(this.widgetType).showTitle ?? false
+			this.content = defaultContent(this.widgetType)
+		},
+		submit() {
+			if (!this.canSubmit) {
+				return
+			}
+			this.$emit('submit', {
+				type: this.widgetType.type,
+				configuration: { title: this.title.trim() || this.widgetType.title, showTitle: this.showTitle },
+				content: JSON.parse(JSON.stringify(this.content)),
+			})
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.modal__content {
+	padding-inline-end: 0 !important;
+
+	.add-widget__input {
+		width: 100%;
+	}
+}
+</style>

From bdf947d36ae8d6ef1b250b9b86194bc8277c687e Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Mon, 12 Oct 2026 15:30:51 +0200
Subject: [PATCH 2/4] fix(grid): keep a configured widget's content and show
 why a data widget is empty

- configuring a widget no longer resets its content to the defaults of the
  type picked before; only a type the user picks starts from defaults, and
  a widget of an unknown type is neither configured nor converted
- a data widget whose target the server marked broken says it no longer
  exists instead of loading it, a failed load has its own message, and the
  prompt to pick a target only shows while editing
- an empty widget title stays empty, the card shows the type name in the
  viewer's language
- the dialog loads the widget types itself and imports the helpers from
  gridLayout.js
- integer fields refuse fractions, booleans render as a switch, the colour
  swatch is empty for the theme colour and the view label is translatable

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: Remko <remko@conduction.nl>
---
 src/modules/grid/GridWidget.vue         | 16 +++++--
 src/modules/grid/SchemaForm.vue         | 37 +++++++++++++---
 src/modules/grid/widgets/DataWidget.vue | 59 ++++++++++++++++++-------
 src/modules/modals/AddWidget.vue        | 52 +++++++++++++---------
 4 files changed, 115 insertions(+), 49 deletions(-)

diff --git a/src/modules/grid/GridWidget.vue b/src/modules/grid/GridWidget.vue
index 8c26456949..1fb297e980 100644
--- a/src/modules/grid/GridWidget.vue
+++ b/src/modules/grid/GridWidget.vue
@@ -9,10 +9,10 @@
 		data-cy="gridWidget">
 		<header v-if="hasHeading" class="grid-widget__header">
 			<h2 :id="headingId" class="grid-widget__title">
-				{{ widget.configuration.showTitle ? widget.configuration.title : typeLabel }}
+				{{ widget.configuration.showTitle ? label : typeLabel }}
 			</h2>
 			<NcActions v-if="editable" :aria-label="t('tables', 'Widget actions')" :force-menu="true">
-				<NcActionButton :close-after-click="true" @click="$emit('configure', widget)">
+				<NcActionButton v-if="isKnownType" :close-after-click="true" @click="$emit('configure', widget)">
 					<template #icon>
 						<CogOutline :size="20" />
 					</template>
@@ -86,8 +86,12 @@ export default {
 		TrashCanOutline,
 	},
 	provide() {
-		// A widget that renders its own heading sits one level below the card's heading
-		return { widgetHeadingLevel: computed(() => this.hasHeading ? 3 : 2) }
+		return {
+			// A widget that renders its own heading sits one level below the card's heading
+			widgetHeadingLevel: computed(() => this.hasHeading ? 3 : 2),
+			// Set when the server marked the widget's stored target as gone
+			widgetBroken: computed(() => this.widget.broken === true),
+		}
 	},
 	props: {
 		widget: {
@@ -124,6 +128,10 @@ export default {
 		widgetComponent() {
 			return getWidgetComponent(this.widget.type)
 		},
+		// A widget of a type the server does not know is shown, not configured: its schema is unknown
+		isKnownType() {
+			return findWidgetType(this.widgetTypes, this.widget.type) !== null
+		},
 		typeLabel() {
 			return findWidgetType(this.widgetTypes, this.widget.type)?.title ?? this.widget.type
 		},
diff --git a/src/modules/grid/SchemaForm.vue b/src/modules/grid/SchemaForm.vue
index e9fdb6f5fb..3d99c91212 100644
--- a/src/modules/grid/SchemaForm.vue
+++ b/src/modules/grid/SchemaForm.vue
@@ -22,9 +22,12 @@
 				class="schema-form__input"
 				:model-value="String(value(name) ?? '')"
 				:label="label(property)"
+				:error="invalidIntegers.includes(name)"
+				:helper-text="invalidIntegers.includes(name) ? t('tables', 'Enter a whole number') : ''"
 				type="number"
-				@update:model-value="text => set(name, text === '' ? null : parseInt(text))" />
+				@update:model-value="text => setInteger(name, text)" />
 			<NcCheckboxRadioSwitch v-else-if="property.type === 'boolean'"
+				type="switch"
 				:model-value="!!value(name)"
 				@update:model-value="checked => set(name, checked)">
 				{{ label(property) }}
@@ -53,7 +56,7 @@
 					@update:model-value="color => set(name, color ?? '')">
 					<NcButton variant="secondary">
 						<template #icon>
-							<span class="schema-form__swatch" :style="{ backgroundColor: colorValue(name) ?? 'var(--color-primary-element-light)' }" />
+							<span class="schema-form__swatch" :style="{ backgroundColor: colorValue(name) ?? 'transparent' }" />
 						</template>
 						{{ label(property) }}
 					</NcButton>
@@ -95,6 +98,11 @@ export default {
 		},
 	},
 	emits: ['update:modelValue'],
+	data() {
+		return {
+			invalidIntegers: [],
+		}
+	},
 	computed: {
 		...mapState(useTablesStore, ['tables', 'views']),
 		targetOptions() {
@@ -110,7 +118,7 @@ export default {
 					id: 'view-' + view.id,
 					targetType: 'view',
 					targetId: view.id,
-					label: (view.emoji ? view.emoji + ' ' : '') + view.title + ' (' + t('tables', 'view') + ')',
+					label: t('tables', '{title} (view)', { title: (view.emoji ? view.emoji + ' ' : '') + view.title }),
 				}))
 			return [...tables, ...views]
 		},
@@ -122,6 +130,21 @@ export default {
 		set(name, value) {
 			this.$emit('update:modelValue', { ...this.modelValue, [name]: value })
 		},
+		/**
+		 * Stores a whole number, or nothing for an empty field. Anything else is marked
+		 * invalid instead of being rounded.
+		 *
+		 * @param {string} name property name
+		 * @param {string} text what was typed
+		 */
+		setInteger(name, text) {
+			const number = Number(text)
+			const isValid = text === '' || Number.isInteger(number)
+			this.invalidIntegers = isValid ? this.invalidIntegers.filter(invalid => invalid !== name) : [...new Set([...this.invalidIntegers, name])]
+			if (isValid) {
+				this.set(name, text === '' ? null : number)
+			}
+		},
 		label(property) {
 			return property.title
 		},
@@ -148,7 +171,7 @@ export default {
 <style lang="scss" scoped>
 .schema-form {
 	&__field {
-		margin-top: calc(2 * var(--default-grid-baseline, 4px));
+		margin-top: calc(2 * var(--default-grid-baseline));
 	}
 
 	&__input {
@@ -158,13 +181,13 @@ export default {
 	&__color {
 		display: flex;
 		align-items: center;
-		gap: calc(3 * var(--default-grid-baseline, 4px));
+		gap: calc(3 * var(--default-grid-baseline));
 	}
 
 	&__swatch {
 		display: inline-block;
-		width: calc(5 * var(--default-grid-baseline, 4px));
-		height: calc(5 * var(--default-grid-baseline, 4px));
+		width: calc(5 * var(--default-grid-baseline));
+		height: calc(5 * var(--default-grid-baseline));
 		border: 1px solid var(--color-border-dark);
 		border-radius: var(--border-radius);
 	}
diff --git a/src/modules/grid/widgets/DataWidget.vue b/src/modules/grid/widgets/DataWidget.vue
index 6ae13d5195..215b57583e 100644
--- a/src/modules/grid/widgets/DataWidget.vue
+++ b/src/modules/grid/widgets/DataWidget.vue
@@ -4,9 +4,17 @@
 -->
 <template>
 	<div class="data-widget">
-		<NcLoadingIcon v-if="loading" :size="32" class="data-widget__loading" />
-		<p v-else-if="!element" class="data-widget__empty">
-			{{ t('tables', 'Pick a table or view in the widget settings') }}
+		<p v-if="widgetBroken" class="data-widget__empty" data-cy="dataWidgetBroken">
+			{{ t('tables', 'This table or view no longer exists') }}
+		</p>
+		<template v-else-if="!target">
+			<p v-if="editable" class="data-widget__empty">
+				{{ t('tables', 'Pick a table or view in the widget settings') }}
+			</p>
+		</template>
+		<NcLoadingIcon v-else-if="loading" :size="32" class="data-widget__loading" />
+		<p v-else-if="!element" class="data-widget__empty" data-cy="dataWidgetLoadFailed">
+			{{ t('tables', 'This table or view could not be loaded') }}
 		</p>
 		<template v-else>
 			<CustomView v-if="isView"
@@ -48,11 +56,20 @@ export default {
 		TableWrapper,
 		CustomView,
 	},
+	inject: {
+		// Set when the server marked the stored target as gone
+		widgetBroken: { default: false },
+	},
 	props: {
 		content: {
 			type: Object,
 			required: true,
 		},
+		// The prompt to pick a target only shows while the page is edited
+		editable: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup() {
 		const store = useDataStore()
@@ -69,17 +86,13 @@ export default {
 	computed: {
 		...mapState(useTablesStore, ['tables', 'views']),
 		target() {
-			if (this.content.target) {
-				return this.content.target
-			}
-			// grids saved before the target became one property
-			return this.content.targetType ? { type: this.content.targetType, id: this.content.targetId } : null
+			return this.content.target ?? null
 		},
 		isView() {
 			return this.target?.type === 'view'
 		},
 		targetId() {
-			return parseInt(this.target?.id)
+			return this.target?.id ?? null
 		},
 		element() {
 			if (!this.targetId || this.loadFailed) {
@@ -104,15 +117,25 @@ export default {
 			},
 		},
 	},
+	created() {
+		// Counts the loads, so a load that a newer one overtook leaves the state alone
+		this.loadRequest = 0
+	},
 	mounted() {
 		this.load()
 	},
 	methods: {
 		...mapActions(useTablesStore, ['loadContextTable', 'loadContextView']),
 		...mapActions(useDataStore, ['loadColumnsFromBE', 'loadRowsFromBE', 'loadRelationsFromBE']),
+		/**
+		 * Loads the table or view with its columns, rows and relations. A target the server
+		 * marked as gone is not requested.
+		 */
 		async load() {
+			const request = ++this.loadRequest
 			this.loadFailed = false
-			if (!this.targetId) {
+			if (!this.targetId || this.widgetBroken) {
+				this.loading = false
 				return
 			}
 			this.loading = true
@@ -131,11 +154,15 @@ export default {
 					await this.loadRowsFromBE({ viewId: null, tableId: this.targetId })
 					await this.loadRelationsFromBE({ tableId: this.targetId })
 				}
-			} catch (error) {
-				console.error('The widget could not load its data', error)
-				this.loadFailed = true
+			} catch {
+				// The store already reported the error
+				if (request === this.loadRequest) {
+					this.loadFailed = true
+				}
 			} finally {
-				this.loading = false
+				if (request === this.loadRequest) {
+					this.loading = false
+				}
 			}
 		},
 		createColumn() {
@@ -154,11 +181,11 @@ export default {
 	overflow: auto;
 
 	&__loading {
-		margin: calc(4 * var(--default-grid-baseline, 4px)) auto;
+		margin: calc(4 * var(--default-grid-baseline)) auto;
 	}
 
 	&__empty {
-		padding: calc(3 * var(--default-grid-baseline, 4px));
+		padding: calc(3 * var(--default-grid-baseline));
 		color: var(--color-text-maxcontrast);
 	}
 
diff --git a/src/modules/modals/AddWidget.vue b/src/modules/modals/AddWidget.vue
index 2beb2669ad..f9393fd926 100644
--- a/src/modules/modals/AddWidget.vue
+++ b/src/modules/modals/AddWidget.vue
@@ -10,14 +10,15 @@
 		@closing="$emit('close')">
 		<div class="modal__content">
 			<div class="row space-T">
-				<NcSelect v-model="selectedType"
+				<NcSelect :model-value="selectedType"
 					class="add-widget__input"
 					:input-label="t('tables', 'Widget type')"
 					:options="typeOptions"
 					:clearable="false"
 					:disabled="editingWidget !== null"
 					label="label"
-					data-cy="addWidgetType" />
+					data-cy="addWidgetType"
+					@update:model-value="selectType" />
 			</div>
 
 			<div class="row space-T">
@@ -30,24 +31,21 @@
 			</div>
 
 			<SchemaForm v-if="widgetType" v-model="content" :properties="widgetType.properties" />
-
-			<div class="row space-T">
-				<div class="fix-col-4 end">
-					<NcButton variant="primary" :disabled="!canSubmit" data-cy="addWidgetSubmit" @click="submit">
-						{{ editingWidget ? t('tables', 'Save widget') : t('tables', 'Add widget') }}
-					</NcButton>
-				</div>
-			</div>
 		</div>
+		<template #actions>
+			<NcButton variant="primary" :disabled="!canSubmit" data-cy="addWidgetSubmit" @click="submit">
+				{{ editingWidget ? t('tables', 'Save widget') : t('tables', 'Add widget') }}
+			</NcButton>
+		</template>
 	</NcDialog>
 </template>
 
 <script>
 import { NcButton, NcCheckboxRadioSwitch, NcDialog, NcSelect, NcTextField } from '@nextcloud/vue'
-import { mapState } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 import SchemaForm from '../grid/SchemaForm.vue'
 import { useTablesStore } from '../../store/store.js'
-import { defaultConfiguration, defaultContent, findWidgetType } from '../grid/widgetRegistry.js'
+import { defaultConfiguration, defaultContent, findWidgetType } from '../grid/gridLayout.js'
 
 /**
  * Collects the type, configuration and content of a widget; the content form comes
@@ -109,24 +107,33 @@ export default {
 				this.reset()
 			}
 		},
-		selectedType(option, previous) {
-			if (option && previous && option.id !== previous.id && this.widgetType) {
-				this.content = defaultContent(this.widgetType)
-				this.showTitle = defaultConfiguration(this.widgetType).showTitle ?? false
-			}
-		},
 	},
 	methods: {
-		reset() {
+		...mapActions(useTablesStore, ['loadWidgetTypes']),
+		/**
+		 * Fills the form for a new widget, or with the widget being configured. A widget of a type
+		 * the server does not know keeps no type here, so it can never be saved as another one.
+		 */
+		async reset() {
+			await this.loadWidgetTypes()
 			if (this.editingWidget) {
-				this.selectedType = this.typeOptions.find(option => option.id === this.editingWidget.type) ?? this.typeOptions[0]
+				this.selectedType = this.typeOptions.find(option => option.id === this.editingWidget.type) ?? null
 				this.title = this.editingWidget.configuration?.title ?? ''
 				this.showTitle = !!this.editingWidget.configuration?.showTitle
 				this.content = { ...defaultContent(this.widgetType), ...JSON.parse(JSON.stringify(this.editingWidget.content ?? {})) }
 				return
 			}
-			this.selectedType = this.typeOptions[0] ?? null
 			this.title = ''
+			this.selectType(this.typeOptions[0] ?? null)
+		},
+		/**
+		 * A type the user picks starts from the defaults of that type. Only this resets the form,
+		 * so loading a widget to configure keeps its content.
+		 *
+		 * @param {object|null} option the picked type
+		 */
+		selectType(option) {
+			this.selectedType = option
 			this.showTitle = defaultConfiguration(this.widgetType).showTitle ?? false
 			this.content = defaultContent(this.widgetType)
 		},
@@ -136,7 +143,8 @@ export default {
 			}
 			this.$emit('submit', {
 				type: this.widgetType.type,
-				configuration: { title: this.title.trim() || this.widgetType.title, showTitle: this.showTitle },
+				// An empty title stays empty; the card shows the type name in the viewer's language instead
+				configuration: { title: this.title.trim(), showTitle: this.showTitle },
 				content: JSON.parse(JSON.stringify(this.content)),
 			})
 		},

From 852e483175b4c06629a75104c8dc86555344b6a5 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Mon, 12 Oct 2026 15:42:33 +0200
Subject: [PATCH 3/4] fix(grid): block saving an invalid widget form and tidy
 the schema form

- an invalid number in the widget form now blocks saving instead of keeping
  the last valid value
- the dialog fills the form before it renders when the widget types are
  already loaded
- the view label in the target picker is no longer HTML-escaped
- the theme colour swatch has a max-contrast border, field data-cy names are
  camelCase, and every method has JSDoc

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: Remko <remko@conduction.nl>
---
 src/modules/grid/SchemaForm.vue  | 64 +++++++++++++++++++++++++-------
 src/modules/modals/AddWidget.vue | 16 ++++++--
 2 files changed, 63 insertions(+), 17 deletions(-)

diff --git a/src/modules/grid/SchemaForm.vue b/src/modules/grid/SchemaForm.vue
index 3d99c91212..f141d71954 100644
--- a/src/modules/grid/SchemaForm.vue
+++ b/src/modules/grid/SchemaForm.vue
@@ -4,16 +4,16 @@
 -->
 <template>
 	<div class="schema-form">
-		<div v-for="(property, name) in properties" :key="name" class="schema-form__field" :data-cy="'widgetField-' + name">
+		<div v-for="(property, name) in properties" :key="name" class="schema-form__field" :data-cy="fieldDataCy(name)">
 			<NcTextField v-if="property.type === 'string'"
 				class="schema-form__input"
 				:model-value="value(name)"
-				:label="label(property)"
+				:label="property.title"
 				@update:model-value="text => set(name, text)" />
 			<NcTextArea v-else-if="property.type === 'text'"
 				class="schema-form__input"
 				:model-value="value(name)"
-				:label="label(property)"
+				:label="property.title"
 				:placeholder="t('tables', 'Leave an empty line between paragraphs')"
 				resize="vertical"
 				rows="6"
@@ -21,7 +21,7 @@
 			<NcTextField v-else-if="property.type === 'integer'"
 				class="schema-form__input"
 				:model-value="String(value(name) ?? '')"
-				:label="label(property)"
+				:label="property.title"
 				:error="invalidIntegers.includes(name)"
 				:helper-text="invalidIntegers.includes(name) ? t('tables', 'Enter a whole number') : ''"
 				type="number"
@@ -30,12 +30,12 @@
 				type="switch"
 				:model-value="!!value(name)"
 				@update:model-value="checked => set(name, checked)">
-				{{ label(property) }}
+				{{ property.title }}
 			</NcCheckboxRadioSwitch>
 			<NcSelect v-else-if="property.type === 'enum'"
 				class="schema-form__input"
 				:model-value="enumOption(property, value(name))"
-				:input-label="label(property)"
+				:input-label="property.title"
 				:options="property.options"
 				:clearable="false"
 				label="label"
@@ -43,7 +43,7 @@
 			<NcSelect v-else-if="property.type === 'target'"
 				class="schema-form__input"
 				:model-value="targetOption(value(name))"
-				:input-label="label(property)"
+				:input-label="property.title"
 				:options="targetOptions"
 				:clearable="false"
 				:searchable="true"
@@ -58,7 +58,7 @@
 						<template #icon>
 							<span class="schema-form__swatch" :style="{ backgroundColor: colorValue(name) ?? 'transparent' }" />
 						</template>
-						{{ label(property) }}
+						{{ property.title }}
 					</NcButton>
 				</NcColorPicker>
 				<span class="schema-form__hint">{{ colorValue(name) ?? t('tables', 'Theme color') }}</span>
@@ -97,7 +97,7 @@ export default {
 			required: true,
 		},
 	},
-	emits: ['update:modelValue'],
+	emits: ['update:modelValue', 'validity'],
 	data() {
 		return {
 			invalidIntegers: [],
@@ -105,6 +105,9 @@ export default {
 	},
 	computed: {
 		...mapState(useTablesStore, ['tables', 'views']),
+		isValid() {
+			return this.invalidIntegers.length === 0
+		},
 		targetOptions() {
 			const tables = this.tables.map(table => ({
 				id: 'table-' + table.id,
@@ -118,15 +121,42 @@ export default {
 					id: 'view-' + view.id,
 					targetType: 'view',
 					targetId: view.id,
-					label: t('tables', '{title} (view)', { title: (view.emoji ? view.emoji + ' ' : '') + view.title }),
+					label: t('tables', '{title} (view)', { title: (view.emoji ? view.emoji + ' ' : '') + view.title }, undefined, { escape: false }),
 				}))
 			return [...tables, ...views]
 		},
 	},
+	watch: {
+		properties() {
+			// Another widget type has other fields, so earlier invalid input no longer applies
+			this.invalidIntegers = []
+		},
+		isValid: {
+			immediate: true,
+			handler(isValid) {
+				this.$emit('validity', isValid)
+			},
+		},
+	},
 	methods: {
+		/**
+		 * @param {string} name property name
+		 * @return {string} the data-cy of the field, in camelCase
+		 */
+		fieldDataCy(name) {
+			return 'widgetField' + name.charAt(0).toUpperCase() + name.slice(1)
+		},
+		/**
+		 * @param {string} name property name
+		 * @return {string|number|boolean|object|null} the current value of the property
+		 */
 		value(name) {
 			return this.modelValue[name]
 		},
+		/**
+		 * @param {string} name property name
+		 * @param {string|number|boolean|object|null} value the new value of the property
+		 */
 		set(name, value) {
 			this.$emit('update:modelValue', { ...this.modelValue, [name]: value })
 		},
@@ -145,9 +175,6 @@ export default {
 				this.set(name, text === '' ? null : number)
 			}
 		},
-		label(property) {
-			return property.title
-		},
 		/**
 		 * @param {string} name property name
 		 * @return {string|undefined} the stored color, or undefined for the theme color
@@ -155,9 +182,18 @@ export default {
 		colorValue(name) {
 			return isHexColor(this.value(name)) ? this.value(name) : undefined
 		},
+		/**
+		 * @param {object} property the enum property
+		 * @param {string} value the stored value
+		 * @return {object|null} the option of the value, else the option of the default
+		 */
 		enumOption(property, value) {
 			return property.options.find(option => option.value === value) ?? property.options.find(option => option.value === property.default) ?? null
 		},
+		/**
+		 * @param {{type: string, id: number}|null} target the stored target
+		 * @return {object|null} the option of the target, or null when it is not in the lists
+		 */
 		targetOption(target) {
 			if (!target) {
 				return null
@@ -188,7 +224,7 @@ export default {
 		display: inline-block;
 		width: calc(5 * var(--default-grid-baseline));
 		height: calc(5 * var(--default-grid-baseline));
-		border: 1px solid var(--color-border-dark);
+		border: 1px solid var(--color-border-maxcontrast);
 		border-radius: var(--border-radius);
 	}
 
diff --git a/src/modules/modals/AddWidget.vue b/src/modules/modals/AddWidget.vue
index f9393fd926..5d97360def 100644
--- a/src/modules/modals/AddWidget.vue
+++ b/src/modules/modals/AddWidget.vue
@@ -30,7 +30,10 @@
 				</NcCheckboxRadioSwitch>
 			</div>
 
-			<SchemaForm v-if="widgetType" v-model="content" :properties="widgetType.properties" />
+			<SchemaForm v-if="widgetType"
+				v-model="content"
+				:properties="widgetType.properties"
+				@validity="isValid => formIsValid = isValid" />
 		</div>
 		<template #actions>
 			<NcButton variant="primary" :disabled="!canSubmit" data-cy="addWidgetSubmit" @click="submit">
@@ -78,6 +81,7 @@ export default {
 			title: '',
 			showTitle: false,
 			content: {},
+			formIsValid: true,
 		}
 	},
 	computed: {
@@ -89,7 +93,7 @@ export default {
 			return findWidgetType(this.widgetTypes, this.selectedType?.id)
 		},
 		canSubmit() {
-			if (!this.widgetType) {
+			if (!this.widgetType || !this.formIsValid) {
 				return false
 			}
 			return Object.entries(this.widgetType.properties).every(([name, property]) => {
@@ -115,7 +119,10 @@ export default {
 		 * the server does not know keeps no type here, so it can never be saved as another one.
 		 */
 		async reset() {
-			await this.loadWidgetTypes()
+			// Awaited only when the types are missing, so the common case fills the form before it renders
+			if (this.widgetTypes.length === 0) {
+				await this.loadWidgetTypes()
+			}
 			if (this.editingWidget) {
 				this.selectedType = this.typeOptions.find(option => option.id === this.editingWidget.type) ?? null
 				this.title = this.editingWidget.configuration?.title ?? ''
@@ -137,6 +144,9 @@ export default {
 			this.showTitle = defaultConfiguration(this.widgetType).showTitle ?? false
 			this.content = defaultContent(this.widgetType)
 		},
+		/**
+		 * Hands the widget to the parent, which places it on the grid.
+		 */
 		submit() {
 			if (!this.canSubmit) {
 				return

From a7b54a41314fe395f1ab03921724abaee526048a Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Mon, 12 Oct 2026 15:59:34 +0200
Subject: [PATCH 4/4] docs(grid): add JSDoc to the last data widget methods

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: Remko <remko@conduction.nl>
---
 src/modules/grid/widgets/DataWidget.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/modules/grid/widgets/DataWidget.vue b/src/modules/grid/widgets/DataWidget.vue
index 215b57583e..228d6b6526 100644
--- a/src/modules/grid/widgets/DataWidget.vue
+++ b/src/modules/grid/widgets/DataWidget.vue
@@ -165,9 +165,15 @@ export default {
 				}
 			}
 		},
+		/**
+		 * Asks the app to open the create column dialog for the shown table or view.
+		 */
 		createColumn() {
 			emit('tables:column:create', { isView: this.isView, element: this.element })
 		},
+		/**
+		 * Asks the app to open the import dialog for the shown table or view.
+		 */
 		openImportModal() {
 			emit('tables:modal:import', { element: this.element, isView: this.isView })
 		},