Early Adopter's guide to Umbraco v14 - Property Editors - UI

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.

Comments

[yusufaffandi]

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!