1 of 3

Property Editors Composition

This section describes how to work with and create Property Editors.

This page is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.

A property editor is an editor used to insert content into Umbraco. A Property Editor is composed of two extensions. To form a full Property Editor you will need a:

Property Editor Schema
Property Editor UI

A Property Editor UI is utilizing a Property Editor Schema, and you can have multiple Property Editor UIs for one Schema. This means you can find a Schema that solves your needs. You only need to build a Property Editor UI.

Each Property Editor can have multiple Property Editor UIs.
Both a Property Editor Schema and Property Editor UI can define the Settings used for their configuration.

Configuration

Data Type Settings for a Property Editor or Property Editor UI is defined in the manifests.
They both use the same format for their settings.

Property Editor Schema

The Server side part of a Property Editor

This page is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.

The Property Editor Schema is server code, written in C#. This handles the storage of a Property Editor and defines Server Side Validation and Property Value Converters.

Property Editor Schema

The Property Editor Schema settings are used for configuration that the server needs to know about.

Manifest

{
	"type": "propertyEditorSchema",
	"name": "Text Box",
	"alias": "Umbraco.TextBox",
};

Property Editor UI

Presenting the Editing Experience of a Property Editor

This page is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.

The Property Editor UI is the UI that is used to edit the data in the backoffice.

The Property Editor UI is a pure front-end extension. This determines how the data of a Property Editor is presented and manipulated. The Extension points to a Web Component.

Property Editor UI

The Property Editor UI cannot be used for Content Types if no Property Editor Schema is specified in the manifest. However, it can still be utilized to manipulate JSON. A case of that could be a Settings property for another Property Editor UI or Schema.

Settings

The Property Editor UI settings are used for configuration related to rendering the UI in the backoffice. This is the same for Property Editor Schemas:

The Property Editor UI inherits the Settings of its Property Editor Schema.

Manifest

The Property Editor UI Element

Inherit the interface, to secure your Element live up to the requirements of this.

Example with LitElement

Property Editor Schema

The Server side part of a Property Editor

This page is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.

The Property Editor Schema is server code, written in C#. This handles the storage of a Property Editor and defines Server Side Validation and Property Value Converters.

Property Editor Schema

The Property Editor Schema settings are used for configuration that the server needs to know about.

Manifest

{
	"type": "propertyEditorSchema",
	"name": "Text Box",
	"alias": "Umbraco.TextBox",
};

Property Editors Composition

This section describes how to work with and create Property Editors.

This page is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.

A property editor is an editor used to insert content into Umbraco. A Property Editor is composed of two extensions. To form a full Property Editor you will need a:

Property Editor Schema
Property Editor UI

Each Property Editor can have multiple Property Editor UIs.
Both a Property Editor Schema and Property Editor UI can define the Settings used for their configuration.

Configuration

Data Type Settings for a Property Editor or Property Editor UI is defined in the manifests.
They both use the same format for their settings.

Property Editor UI

Presenting the Editing Experience of a Property Editor

This page is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.

The Property Editor UI is the UI that is used to edit the data in the backoffice.

The Property Editor UI is a pure front-end extension. This determines how the data of a Property Editor is presented and manipulated. The Extension points to a Web Component.

Property Editor UI

Settings

The Property Editor UI settings are used for configuration related to rendering the UI in the backoffice. This is the same for Property Editor Schemas:

The Property Editor UI inherits the Settings of its Property Editor Schema.

Manifest

{
 "type": "propertyEditorUi",
 "alias": "My.PropertyEditorUI.TextArea",
 //... more
 "meta": {
  //... more
  "settings": {
   "properties": [
    {
     "alias": "rows",
     "label": "Number of rows",
     "description": "If empty - 10 rows would be set as the default value",
     "propertyEditorUi": "Umb.PropertyEditorUi.Number",
    },
   ],
   "defaultData": [
    {
     "alias": "rows",
     "value": 10,
    },
   ],
  },
 },
};

The Property Editor UI Element

Inherit the interface, to secure your Element live up to the requirements of this.

// TODO: get interface
interface UmbPropertyEditorUIElement {}

Example with LitElement

import { LitElement, html, css, customElement, property } from '@umbraco-cms/backoffice/external/lit';
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';

@customElement('my-text-box')
export default class UmbPropertyEditorUITextBoxElement extends UmbElementMixin(LitElement) {
 
 @property()
 value: string | undefined;

 @property({ attribute: false })
 public config: UmbPropertyEditorConfigCollection | undefined;

 private onInput(e: InputEvent) {
  this.value = (e.target as HTMLInputElement).value;
  this.dispatchEvent(new UmbPropertyValueChangeEvent());
 }

 render() {
  return html`<uui-input .value=${this.value} type="text" @input=${this.onInput}></uui-input>`;
 }
 
 static styles = [
  css`
   uui-input {
    width: 100%;
   }
  `,
 ];
}

import { LitElement, html, css, customElement, property } from '@umbraco-cms/backoffice/external/lit';
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';

@customElement('my-text-box')
export default class UmbPropertyEditorUITextBoxElement extends UmbElementMixin(LitElement) {
 
 @property()
 value: string | undefined;

 @property({ attribute: false })
 public config: UmbPropertyEditorConfigCollection | undefined;

 private onInput(e: InputEvent) {
  this.value = (e.target as HTMLInputElement).value;
  this.dispatchEvent(new UmbPropertyValueChangeEvent());
 }

 render() {
  return html`<uui-input .value=${this.value} type="text" @input=${this.onInput}></uui-input>`;
 }
 
 static styles = [
  css`
   uui-input {
    width: 100%;
   }
  `,
 ];
}