example setup

src/Umbraco.Web.UI.Client/examples/dashboard-with-property-dataset/index.ts

@@ -3,7 +3,7 @@ import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
 export const manifests: Array<ManifestTypes> = [
 	{
 		type: 'dashboard',
-		name: 'Example Dataset Workspace View',
+		name: 'Example Dataset Dashboard',
 		alias: 'example.dashboard.dataset',
 		element: () => import('./dataset-dashboard.js'),
 		weight: 900,

src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/README.md

@@ -0,0 +1,5 @@
+# Property Dataset Dashboard Example
+
+This example demonstrates the essence of the Property Dataset.
+
+This dashboard implements such, to display a few selected Property Editors and bind the data back to the Dashboard.

src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/index.ts

@@ -0,0 +1,15 @@
+import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array<ManifestTypes> = [
+	{
+		type: 'dashboard',
+		name: 'Example Sorter Dashboard',
+		alias: 'example.dashboard.dataset',
+		element: () => import('./sorter-dashboard.js'),
+		weight: 900,
+		meta: {
+			label: 'Sorter example',
+			pathname: 'sorter-example',
+		},
+	},
+];

src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-dashboard.ts

@@ -0,0 +1,112 @@
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { css, html, customElement, LitElement, state, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
+import { UmbSorterConfig, UmbSorterController } from '@umbraco-cms/backoffice/sorter';
+
+type ModelEntryType = {
+	name: string;
+};
+
+const SORTER_CONFIG: UmbSorterConfig<ModelEntryType> = {
+	compareElementToModel: (element: HTMLElement, model: ModelEntryType) => {
+		return element.getAttribute('data-name') === model.name;
+	},
+	querySelectModelToElement: (container: HTMLElement, modelEntry: ModelEntryType) => {
+		return container.querySelector('data-name[' + modelEntry.name + ']');
+	},
+	identifier: 'string-that-identifies-all-example-sorters',
+	itemSelector: '.sorter-item',
+	containerSelector: '.sorter-container',
+};
+
+@customElement('example-sorter-dashboard')
+export class ExampleSorterDashboard extends UmbElementMixin(LitElement) {
+	@state()
+	_items: ModelEntryType[] = [
+		{
+			name: 'Apple',
+		},
+		{
+			name: 'Banana',
+		},
+		{
+			name: 'Pear',
+		},
+		{
+			name: 'Pineapple',
+		},
+		{
+			name: 'Lemon',
+		},
+	];
+
+	#sorter = new UmbSorterController(this, {
+		...SORTER_CONFIG,
+		performItemInsert: ({ item, newIndex }) => {
+			this._items.splice(newIndex, 0, item);
+			this.requestUpdate('_items');
+			return true;
+		},
+		performItemRemove: ({ item }) => {
+			const indexToMove = this._items.findIndex((x) => x.name === item.name);
+			this._items.splice(indexToMove, 1);
+			this.requestUpdate('_items');
+			return true;
+		},
+	});
+
+	constructor() {
+		super();
+		this.#sorter.setModel(this._items);
+	}
+
+	removeItem = (item: ModelEntryType) => {
+		this._items = this._items.filter((r) => r.name !== item.name);
+		this.#sorter.setModel(this._items);
+	};
+
+	render() {
+		return html`
+			<uui-box class="uui-text">
+				<div class="sorter-container">
+					${repeat(
+						this._items,
+						(item) => item.name,
+						(item) =>
+							html`<div class="sorter-item" data-name=${item.name}>
+								${item.name} <button @click=${() => this.removeItem(item)}>Delete</button>
+							</div>`,
+					)}
+				</div>
+			</uui-box>
+		`;
+	}
+
+	static styles = [
+		UmbTextStyles,
+		css`
+			:host {
+				display: block;
+				padding: var(--uui-size-layout-1);
+			}
+
+			.sorter-item {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				padding: var(--uui-size-layout-0);
+				border: 1px solid var(--uui-color-border);
+				border-radius: var(--uui-border-radius);
+				margin-bottom: 3px;
+			}
+		`,
+	];
+}
+
+export default ExampleSorterDashboard;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'example-sorter-dashboard': ExampleSorterDashboard;
+	}
+}