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

Questions
,
1

I am building my first package with a custom property, which I have successfully built. But I would also like to include a pre-configured built-in tags property along with it. The goal is to create a single data type that pushes both my custom property and the pre-configured tags property at the same time. Can this be done, and if so, can anyone point me to any documentation on how to include the tags property?

2

I’m not sure if this is the best approach, but maybe this could be helpful:

3

From looking at that document it seems to explain how to wire up mutiple properites into a master one (which does help a bit) but it does not tell me how I can create my own instance of the tags property for use in my page.

My package currently has a set of text boxes and two toggles, which where easy to setup. With the tag property though I want to tap into the umbraco version of it so I don’t have to custom write out the type-ahead system, memorty of all the tags, and other such built in features. What I would like to do is when someone create a new data type based off my package’s master property it give them the custom text boxes and toggles I hand coded then gives them an pre-configured, uniquie instance of the tag property (i.e. it is alsready confugered with my set groupname and storage type).

This is my first package so maybe I over loocked something simple or maybe this is not possible to re-use an existing data-type and pre-configure it.

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
5

Thank you for this. It does confirm I was overlooking how the data-set property works. And thank you for the code example that will be very helpful going forward.