Once we have defined the schema and UI manifests for our property editor we can create an element for the user.
UI Element
The UI element is what the editor sees when they are using your property editor.
@customElement('styled-textbox')
export class StyledTextboxUiElement extends LitElement
implements UmbPropertyEditorUiElement {
@property()
value: undefined | String = '' ;
@state()
_styleValue? : string;
@property({ attribute: false })
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
this._styleValue = config?.getValueByAlias('styleValue') ?? '';
}
onChange(e: Event) {
const newValue = (e.target as HTMLInputElement).value;
if (newValue === this.value) return;
this.value = newValue;
console.log(this.value);
this.dispatchEvent(new CustomEvent('property-value-change'));
}
render() {
return html`
<uui-input
.value=${this.value ?? ''}
.style=${this._styleValue}
type="text"
@input=${this.onChange}></uui-input>
`;
}
static styles = css`
uui-input {
width: 100%;
}`;
}
The editor has a couple of 'special' behaviors, that make it work as a propertyEditor ui.
The value.
All property editors have a value property - this is the property that Umbraco will fill with the data from the item (content, media etc).
@property()
value: undefined | String = '' ;
The value is also what you set when the editor changes the value.
Config
The config property is called to load up your settings from the propertyEditor's configuration (things that are set in the settings section).
here you load the values by their alias, and can set local values so you can access them in your code.
@property({ attribute: false })
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
this._styleValue = config?.getValueByAlias('styleValue') ?? '';
}
dispatching the "'property-value-change" event.
Finally you're editor should dispatch the 'property-value-change event
when ever you change your value property.
this tells the parent elements in Umbraco that you have change the value, and it updates the model for the item. So when the user clicks save (or publish) the model contains your changes and is saved back into umbraco.
Top comments (0)