propertyValuePresentation extension type for displaying complex property values (fixes #20736)

src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/index.ts

@@ -0,0 +1,3 @@
+export { UmbPropertyValuePresentationBaseElement } from './property-value-presentation-base.js';
+export { UmbPropertyValuePresentationDisplayOption } from './property-value-presentation.extension.js';
+export type { ManifestPropertyValuePresentation } from './property-value-presentation.extension.js';

src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts

@@ -0,0 +1,14 @@
+import type { UmbPropertyValuePresentationDisplayOption } from '../../core/property-value-presentation/property-value-presentation.extension.js';
+import { property } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+
+export abstract class UmbPropertyValuePresentationBaseElement<TValue = string> extends UmbLitElement {
+	@property()
+	alias: string = '';
+
+	@property()
+	display?: UmbPropertyValuePresentationDisplayOption;
+
+	@property({ type: Object })
+	value?: TValue;
+}

src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation.extension.ts

@@ -0,0 +1,17 @@
+import type { ManifestElement } from '@umbraco-cms/backoffice/extension-api';
+
+export enum UmbPropertyValuePresentationDisplayOption {
+	COLLECTION_COLUMN = 'collection-column',
+	COLLECTION_CARD = 'collection-card',
+}
+
+export interface ManifestPropertyValuePresentation extends ManifestElement {
+	type: 'propertyValuePresentation';
+	propertyEditorAlias: string;
+}
+
+declare global {
+	interface UmbExtensionManifestMap {
+		umbPropertyValuePresentation: ManifestPropertyValuePresentation;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts

@@ -1,10 +1,28 @@
+import { UmbPropertyValuePresentationDisplayOption } from '../../../core/property-value-presentation/index.js';
+import type { ManifestPropertyValuePresentation } from '../../../core/property-value-presentation/index.js';
 import type { UmbDocumentCollectionFilterModel, UmbDocumentCollectionItemModel } from './types.js';
 import { UMB_DOCUMENT_TABLE_COLLECTION_VIEW_ALIAS } from './constants.js';
+import { html } from '@umbraco-cms/backoffice/external/lit';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api';
 import { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection';
-import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
-import { UMB_VARIANT_CONTEXT } from '@umbraco-cms/backoffice/variant';
-import { UmbStringState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbDeprecation } from '@umbraco-cms/backoffice/utils';
+import { UmbStringState } from '@umbraco-cms/backoffice/observable-api';
+import { UMB_VARIANT_CONTEXT } from '@umbraco-cms/backoffice/variant';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+
+export type UmbGetPropertyValueByAliasArgs = {
+	alias: string;
+	documentTypeAlias: string;
+	createDate?: Date;
+	updateDate?: Date;
+	state?: string;
+	culture?: string | null | undefined;
+	creator?: string | null | undefined;
+	updater?: string | null | undefined;
+	sortOrder: number;
+	values: Array<{ alias: string; editorAlias: string; culture?: string; segment?: string; value: string }>;
+};
 
 export class UmbDocumentCollectionContext extends UmbDefaultCollectionContext<
 	UmbDocumentCollectionItemModel,
@@ -14,13 +32,17 @@
 	#displayCulture = new UmbStringState(undefined);
 	#displayCultureObservable = this.#displayCulture.asObservable();
 
+	#propertyValuePresentationManifests: ManifestPropertyValuePresentation[] = [];
+
 	constructor(host: UmbControllerHost) {
 		super(host, UMB_DOCUMENT_TABLE_COLLECTION_VIEW_ALIAS);
 
 		this.consumeContext(UMB_VARIANT_CONTEXT, async (variantContext) => {
 			this.#variantContext = variantContext;
 			this.#observeDisplayCulture();
 		});
+
+		this.#propertyValuePresentationManifests = umbExtensionsRegistry.getByType('propertyValuePresentation');
 	}
 
 	#observeDisplayCulture() {
@@ -56,6 +78,56 @@
 		await this.observe(this.#displayCultureObservable)?.asPromise();
 		await super._requestCollection();
 	}
+
+	getPropertyValueByAlias(args: UmbGetPropertyValueByAliasArgs) {
+		const alias = args.alias;
+		switch (alias) {
+			case 'contentTypeAlias':
+				return args.documentTypeAlias;
+			case 'createDate':
+				return args.createDate?.toLocaleString();
+			case 'creator':
+			case 'owner':
+				return args.creator;
+			case 'published':
+				return args.state !== DocumentVariantStateModel.DRAFT ? 'True' : 'False';
+			case 'sortOrder':
+				return args.sortOrder;
+			case 'updateDate':
+				return args.updateDate?.toLocaleString();
+			case 'updater':
+				return args.updater;
+			default: {
+				const prop = args.values.find((x) => x.alias === alias && (!x.culture || x.culture === args.culture));
+
+				if (prop) {
+					const value = prop.value ?? '';
+					const propertyValuePresentationManifest = this.#getPropertyValuePresentationManifest(prop.editorAlias);
+					if (propertyValuePresentationManifest.length > 0) {
+						return html`<umb-extension-slot
+							type="propertyValuePresentation"
+							.filter=${(x: ManifestPropertyValuePresentation) => x.propertyEditorAlias === prop.editorAlias}
+							.props=${{
+								alias: alias,
+								value: value,
+								display: UmbPropertyValuePresentationDisplayOption.COLLECTION_COLUMN,
+							}}>
+						</umb-extension-slot>`;
+					}
+
+					return value;
+				}
+
+				return '';
+			}
+		}
+	}
+
+	#getPropertyValuePresentationManifest(propertyEditorAlias: string) {
+		return this.#propertyValuePresentationManifests.filter(
+			(manifest) => manifest.propertyEditorAlias === propertyEditorAlias,
+		);
+	}
 }
 
 export { UmbDocumentCollectionContext as api };

src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/repository/document-collection.server.data-source.ts

@@ -52,6 +52,7 @@ export class UmbDocumentCollectionServerDataSource implements UmbCollectionDataS
 					flags: item.flags,
 					values: item.values.map((item) => {
 						return {
+							editorAlias: item.editorAlias,
 							alias: item.alias,
 							culture: item.culture ?? undefined,
 							segment: item.segment ?? undefined,

src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/types.ts

@@ -27,7 +27,7 @@ export interface UmbDocumentCollectionItemModel extends UmbEntityWithFlags {
 	sortOrder: number;
 	unique: string;
 	updater?: string | null;
-	values: Array<{ alias: string; culture?: string; segment?: string; value: string }>;
+	values: Array<{ alias: string; editorAlias: string; culture?: string; segment?: string; value: string }>;
 	variants: Array<UmbDocumentItemVariantModel>;
 }
 

src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.ts

@@ -1,4 +1,6 @@
 import { UmbDocumentItemDataResolver } from '../../../item/document-item-data-resolver.js';
+import { UMB_DOCUMENT_COLLECTION_CONTEXT } from '../../document-collection.context-token.js';
+import type { UmbDocumentCollectionContext } from '../../document-collection.context.js';
 import type { UmbDocumentCollectionItemModel } from '../../types.js';
 import { css, customElement, html, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { fromCamelCase } from '@umbraco-cms/backoffice/utils';
@@ -10,6 +12,8 @@
 
 @customElement('umb-document-grid-collection-card')
 export class UmbDocumentGridCollectionCardElement extends UmbElementMixin(UUICardContentNodeElement) {
+	#collectionContext?: UmbDocumentCollectionContext;
+
 	#resolver = new UmbDocumentItemDataResolver(this);
 
 	@state()
@@ -39,39 +43,30 @@
 	constructor() {
 		super();
 
+		this.consumeContext(UMB_DOCUMENT_COLLECTION_CONTEXT, (instance) => {
+			this.#collectionContext = instance;
+		});
+
 		this.#resolver.observe(this.#resolver.name, (name) => (this.name = name || ''));
 		this.#resolver.observe(this.#resolver.state, (state) => (this._state = state || ''));
 		this.#resolver.observe(this.#resolver.createDate, (createDate) => (this._createDate = createDate));
 		this.#resolver.observe(this.#resolver.updateDate, (updateDate) => (this._updateDate = updateDate));
 	}
 
 	#getPropertyValueByAlias(alias: string) {
-		switch (alias) {
-			case 'contentTypeAlias':
-				return this.item.documentType.alias;
-			case 'createDate':
-				return this._createDate?.toLocaleString();
-			case 'creator':
-			case 'owner':
-				return this.item.creator;
-			case 'name':
-				return this.name;
-			case 'state':
-				return this._state ? fromCamelCase(this._state) : '';
-			case 'published':
-				return this._state !== DocumentVariantStateModel.DRAFT ? 'True' : 'False';
-			case 'sortOrder':
-				return this.item.sortOrder;
-			case 'updateDate':
-				return this._updateDate?.toLocaleString();
-			case 'updater':
-				return this.item.updater;
-			default: {
-				const culture = this.#resolver.getCulture();
-				const prop = this.item.values.find((x) => x.alias === alias && (!x.culture || x.culture === culture));
-				return prop?.value ?? '';
-			}
-		}
+		const args = {
+			alias: alias,
+			documentTypeAlias: this.item.documentType.alias,
+			createDate: this._createDate,
+			updateDate: this._updateDate,
+			state: this._state,
+			culture: this.#resolver.getCulture(),
+			creator: this.item.creator,
+			updater: this.item.updater,
+			sortOrder: this.item.sortOrder,
+			values: this.item.values,
+		};
+		return this.#collectionContext?.getPropertyValueByAlias(args);
 	}
 
 	#getStateTagConfig(): { color: UUIInterfaceColor; label: string } | undefined {

src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts

@@ -1,12 +1,15 @@
-import type { UmbEditableDocumentCollectionItemModel } from '../../../types.js';
 import { UmbDocumentItemDataResolver } from '../../../../item/index.js';
+import { UMB_DOCUMENT_COLLECTION_CONTEXT } from '../../../document-collection.context-token.js';
+import type { UmbDocumentCollectionContext } from '../../../document-collection.context.js';
+import type { UmbEditableDocumentCollectionItemModel } from '../../../types.js';
 import { customElement, html, nothing, property, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UmbTableColumn, UmbTableColumnLayoutElement, UmbTableItem } from '@umbraco-cms/backoffice/components';
-import { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api';
 
 @customElement('umb-document-table-column-property-value')
 export class UmbDocumentTableColumnPropertyValueElement extends UmbLitElement implements UmbTableColumnLayoutElement {
+	#collectionContext?: UmbDocumentCollectionContext;
+
 	#resolver = new UmbDocumentItemDataResolver(this);
 
 	@state()
@@ -37,36 +40,29 @@
 	constructor() {
 		super();
 
+		this.consumeContext(UMB_DOCUMENT_COLLECTION_CONTEXT, (instance) => {
+			this.#collectionContext = instance;
+		});
+
 		this.#resolver.observe(this.#resolver.state, (state) => (this._state = state || ''));
 		this.#resolver.observe(this.#resolver.createDate, (createDate) => (this._createDate = createDate));
 		this.#resolver.observe(this.#resolver.updateDate, (updateDate) => (this._updateDate = updateDate));
 	}
 
 	#getPropertyValueByAlias() {
-		const alias = this.column.alias;
-		const item = this.value.item;
-		switch (alias) {
-			case 'contentTypeAlias':
-				return item.documentType.alias;
-			case 'createDate':
-				return this._createDate?.toLocaleString();
-			case 'creator':
-			case 'owner':
-				return item.creator;
-			case 'published':
-				return this._state !== DocumentVariantStateModel.DRAFT ? 'True' : 'False';
-			case 'sortOrder':
-				return item.sortOrder;
-			case 'updateDate':
-				return this._updateDate?.toLocaleString();
-			case 'updater':
-				return item.updater;
-			default: {
-				const culture = this.#resolver.getCulture();
-				const prop = item.values.find((x) => x.alias === alias && (!x.culture || x.culture === culture));
-				return prop?.value ?? '';
-			}
-		}
+		const args = {
+			alias: this.column.alias,
+			documentTypeAlias: this.value.item.documentType.alias,
+			createDate: this._createDate,
+			updateDate: this._updateDate,
+			state: this._state,
+			culture: this.#resolver.getCulture(),
+			creator: this.value.item.creator,
+			updater: this.value.item.updater,
+			sortOrder: this.value.item.sortOrder,
+			values: this.value.item.values,
+		};
+		return this.#collectionContext?.getPropertyValueByAlias(args);
 	}
 
 	override render() {

src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/manifests.ts

@@ -15,5 +15,12 @@ export const manifests: Array<UmbExtensionManifest> = [
 			supportsReadOnly: true,
 		},
 	},
+	{
+		type: 'propertyValuePresentation',
+		alias: 'Umb.PropertyValuePresentation.ColorPicker',
+		name: 'Color Picker Property Value Presentation',
+		element: () => import('./property-value-presentation-color-picker.js'),
+		propertyEditorAlias: 'Umbraco.ColorPicker',
+	},
 	schemaManifest,
 ];

src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.ts

@@ -0,0 +1,51 @@
+import {
+	UmbPropertyValuePresentationBaseElement,
+	UmbPropertyValuePresentationDisplayOption,
+} from '../../core/property-value-presentation/index.js';
+import { customElement, html, nothing } from '@umbraco-cms/backoffice/external/lit';
+
+@customElement('umb-color-picker-property-value-presentation')
+export class UmbColorPickerPropertyValuePresentation extends UmbPropertyValuePresentationBaseElement<
+	{ value: string; label: string } | string
+> {
+	override render() {
+		const color = this.#getColor();
+		const label = this.#getLabel();
+		const size = this.display == UmbPropertyValuePresentationDisplayOption.COLLECTION_CARD ? 10 : 12;
+		return color
+			? html`<uui-color-swatch label=${label} value=${color} style="--uui-swatch-size: ${size}px"></uui-color-swatch>`
+			: nothing;
+	}
+
+	#getColor() {
+		if (!this.value) {
+			return null;
+		}
+
+		if (typeof this.value === 'string') {
+			return this.value;
+		}
+
+		return this.value.value;
+	}
+
+	#getLabel() {
+		if (!this.value) {
+			return '';
+		}
+
+		if (typeof this.value === 'string') {
+			return '';
+		}
+
+		return this.value.label;
+	}
+}
+
+export default UmbColorPickerPropertyValuePresentation;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-color-picker-property-value-presentation': UmbColorPickerPropertyValuePresentation;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/manifests.ts

@@ -14,5 +14,12 @@ export const manifests: Array<UmbExtensionManifest> = [
 			supportsReadOnly: true,
 		},
 	},
+	{
+		type: 'propertyValuePresentation',
+		alias: 'Umb.PropertyValuePresentation.DateOnlyPicker',
+		name: 'Date Only Picker Property Value Presentation',
+		element: () => import('./property-value-presentation-date-only-picker.js'),
+		propertyEditorAlias: 'Umbraco.DateOnly',
+	},
 	schemaManifest,
 ];