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 (1)
Hi Kevin, great articles.
I'm very new to .NET and Umbraco and want to ask about how to save array of object value to database in custom property editor? I'm tried using UmbPropertyValueChangeEvent but it's not worked. It's been a week to find examples or solution about this.
I appreciate your help. Thanks!