Hi everyone. Currently trying to make a custom dropdown, with some test data, however the defaultData does not come up in the property type. Has anyone tried doing this in v14/v15. And can point towards if im making a mistake or what it is 🙂 I'm new to typescript and extending backoffice, so its definitely plausible that im making errors 😄

import {ManifestPropertyEditorUi} from "@umbraco-cms/backoffice/extension-registry";
import {default as manifestModal} from "./Modal/manifest";

export const manifestPropertyEditorUi: ManifestPropertyEditorUi = {
    type: "propertyEditorUi",
    alias: "xxx.tag.propertyEditor",
    name: "Tag Property Editor",
    element: () => import("./tag-property-editor-element.ts"),
    meta: {
        label: "Tag Property Editor",
        icon: "icon-tag",
        group: "generic",
        propertyEditorSchemaAlias: "Umbraco.Plain.Json",
        settings: {
            properties: [
                {
                    alias: "group",
                    label: "Group",
                    description: "Pick the group",
                    propertyEditorUiAlias: "Umb.PropertyEditorUi.Dropdown",
                    weight: 200,
                },
                {
                    alias: "placeholder",
                    label: "Placeholder text",
                    description: "A nice placeholder description to help out our editor!",
                    propertyEditorUiAlias: "Umb.PropertyEditorUi.TextBox"
                },

            ],
            defaultData: [
                {
                    alias: "group",
                    value: ['First Option', 'Second Option', 'Third Option']
                },
                {
                    alias: "placeholder",
                    value: "Write a suggestion"
                }
            ]
        }
    }
}

export default [manifestPropertyEditorUi, ...manifestModal]

Hi @Dennis Pedersen, Are you meaning how to populate the "group" dropdown list items? The difference with the

defaultData

is that will set the default value of a property, not the configuration of the property-editor. In your example, the default value is being set with the 3 items in the array, but there are no items configured in the dropdown itself. To do this, you'll need to specify the dropdown items in the

config

of the property-editor part, e.g.

{
    alias: "group",
    label: "Group",
    description: "Pick the group",
    propertyEditorUiAlias: "Umb.PropertyEditorUi.Dropdown",
    weight: 200,
    config: [
        { alias: "items", value: ['First Option', 'Second Option', 'Third Option'] }
    ],
}

The configuration for the options is named

"items"

, for reference, this is how the dropdown list property-editor uses the value: https://github.com/umbraco/Umbraco-CMS/blob/release-15.1.1/src/Umbraco.Web.UI.Client/src/packages/property-editors/dropdown/property-editor-ui-dropdown.element.ts In terms of TypeScript, the target type of the dropdown list items is [

Option

(from the UUI library)](https://github.com/umbraco/Umbraco.UI/blob/v1.12.2/packages/uui-select/lib/uui-select.element.ts#L10-L16). It has properties such as:

{ name, value }

, so if you wanted to be more verbose (or have a different label and value in the dropdown list, you could do this:

{
    alias: "items",
    value: [
        { name: 'First Option', value: "1" },
        { name: 'Second Option', value: "2" },
        { name: 'Third Option', value: "3" },
    ]
}

Then back to the

defaultData

, you can specify the default value like so:

{
    alias: 'group',
    value: '1'
}

I hope this helps.

thank you @leekelleher . you're a champ!!