Property Editor Value Summary

A guide to adding a Value Summary to a custom Property Editor in Umbraco.

When Documents are displayed in a collection, the backoffice shows each property's value in a compact table column. By default, raw values appear as plain text. Register a Value Summary for your Property Editor to control how that value is presented. You can show a formatted date, a color swatch, or a tag — without any configuration in the collection itself.

The Document Collection receives the Editor Alias from the server for each property and uses it to look up the correct summary. This means the Value Type key for a Property Editor must match the schema alias exactly.

Defining the Value Type

Define the Value Type constant alongside your Property Editor. Use the Schema Alias as the key:

my-property-editor/value-type/constants.ts

export interface MyPropertyEditorValue {
  value: string;
  label: string;
}

export const MY_PROPERTY_EDITOR_VALUE_TYPE = 'My.PropertyEditor.Alias' as const;

declare global {
  interface UmbValueTypeMap {
    [MY_PROPERTY_EDITOR_VALUE_TYPE]: MyPropertyEditorValue;
  }
}

Registering the Value Summary

Register a valueSummary manifest using the Value Type constant as forValueType:

my-property-editor/value-summary/manifests.ts

{
  type: 'valueSummary',
  kind: 'default',
  alias: 'My.ValueSummary.PropertyEditor.Alias',
  name: 'My Property Editor Value Summary',
  forValueType: MY_PROPERTY_EDITOR_VALUE_TYPE,
  element: () => import('./my-property-editor-value-summary.element.js'),
}

Implementing the Element

The element receives the property value and renders a compact representation of it. Extend UmbValueSummaryElementBase and override render():

my-property-editor/value-summary/my-property-editor-value-summary.element.ts

@customElement('my-property-editor-value-summary')
export class MyPropertyEditorValueSummaryElement extends UmbValueSummaryElementBase<MyPropertyEditorValue> {
  override render() {
    if (!this._value) return nothing;
    return html`<uui-tag look="secondary">${this._value.label}</uui-tag>`;
  }
}

See Value Summary for the full range of options, including resolving server-side values.