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.
{
"type": "propertyEditorUi",
"alias": "Umb.PropertyEditorUi.TextBox",
"name": "Text Box Property Editor UI",
"element": "/App_Plugins/my-text-box/dist/my-text-box.js",
"elementName": "my-text-box",
"meta": {
"label": "My Text Box",
"propertyEditorSchemaAlias": "Umbraco.TextBox",
"icon": "icon-autofill",
"group": "common"
}
}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.
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",
"propertyEditorUiAlias": "Umb.PropertyEditorUi.Integer",
},
],
"defaultData": [
{
"alias": "rows",
"value": 10,
},
],
},
},
};Implement the UmbPropertyEditorUiElement interface, to secure your Element live up to the requirements of this.
interface UmbPropertyEditorUiElement extends HTMLElement {
name?: string;
value?: unknown;
config?: UmbPropertyEditorConfigCollection;
mandatory?: boolean;
mandatoryMessage?: string;
destroy?: () => void;
}The UmbPropertyEditorUiElement interface ensures that your Element has the necessary properties and methods to be used as a Property Editor UI Element.
See the UI API documentation for more information.
Example with LitElement
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
import { css, customElement, html, property } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type {
UmbPropertyEditorConfigCollection,
UmbPropertyEditorUiElement,
} from '@umbraco-cms/backoffice/property-editor';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
@customElement('umb-property-editor-ui-text-box')
export default class UmbPropertyEditorUITextBoxElement extends UmbLitElement implements UmbPropertyEditorUiElement {
@property()
value?: string;
@property({ attribute: false })
config?: UmbPropertyEditorConfigCollection;
#onInput(e: InputEvent) {
this.value = (e.target as HTMLInputElement).value;
this.dispatchEvent(new UmbChangeEvent());
}
override render() {
return html`<uui-input .value=${this.value ?? ''} type="text" @input=${this.#onInput}></uui-input>`;
}
static override readonly styles = [
UmbTextStyles,
css`
uui-input {
width: 100%;
}
`,
];
}
declare global {
interface HTMLElementTagNameMap {
'umb-property-editor-ui-text-box': UmbPropertyEditorUITextBoxElement;
}
}Last updated 4 months ago
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4