Can I include a built in property for my custom property group?

Questions
,
4

@Eaglef90

this should be possible in v17, it’s actually the intended approach using umb-property-dataset and umb-property. These two components let you compose multiple property editors (including built-in ones) inside your own custom editor.

The Tags property editor UI alias in v14+ is Umb.PropertyEditorUi.Tags, and you can pass its config (groupName, storageType) directly via the .config binding.

Here’s a minimal example of how your custom property editor’s render() would look:

render() {
  return html`
    <umb-property-dataset .value=${this._data} @change=${this.#onDataChange}>

      <!-- Your custom text boxes and toggles -->
      <umb-property
        label="My Custom Field"
        alias="myCustomField"
        property-editor-ui-alias="Umb.PropertyEditorUi.TextBox">
      </umb-property>

      <umb-property
        label="My Toggle"
        alias="myToggle"
        property-editor-ui-alias="Umb.PropertyEditorUi.Toggle">
      </umb-property>

      <!-- Pre-configured Tags property -->
      <umb-property
        label="Tags"
        alias="myTags"
        property-editor-ui-alias="Umb.PropertyEditorUi.Tags"
        .config=${[
          { alias: 'group', value: 'myPackageTagGroup' },
          { alias: 'storageType', value: 'Json' }
        ]}>
      </umb-property>

    </umb-property-dataset>
  `;
}

The umb-property-dataset handles all the values as a single object, so you just manage one this._data object and it keeps all sub-properties in sync. The Tags editor, group name, and storage type are all pre-configured — the content editor never has to touch those settings.

For handling the data changes:

#onDataChange(e) {
  this._data = e.target.value;
  this.value = this._data;
  this.dispatchEvent(new UmbChangeEvent());
}

maybe similar reference or smth : Umbraco 15: custom property editors - how to content picker dialog / media picker dialog - #6 by jesperordrup

hope it works out for u

2 Likes