Opening a Content Picker modal from a Custom Property Editor

Hello @bobbybobbybobbobbob .

Sure. I’ve removed loads of my stuff to simplify it, but this is the basics:

import { LitElement, html, customElement, state, property } from "@umbraco-cms/backoffice/external/lit";
import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api";
import { UmbPropertyValueChangeEvent } from "@umbraco-cms/backoffice/property-editor";
import { UMB_MODAL_MANAGER_CONTEXT, UmbModalManagerContext } from "@umbraco-cms/backoffice/modal";
import { UMB_DOCUMENT_PICKER_MODAL, UmbDocumentItemRepository } from '@umbraco-cms/backoffice/document';

@customElement("item-picker")
export class ItemPicker extends UmbElementMixin(LitElement)
{   
    
    #modalContext?: UmbModalManagerContext;
    #itemRepository = new UmbDocumentItemRepository(this);
    
    _defaults = []

    @state() _value: {};


    // Getters and Setters for the value property.
    @property({ attribute: false })
    get value() {
        return this._value;
    }
    set value(newValue) {
        if (!newValue) {
            
            this._value = this._defaults;

        } else {
            this._value = newValue;

            // Notify Umbraco about the change to value, so it alerts
            // the user if they navigate away from page.
            this.dispatchEvent(new UmbPropertyValueChangeEvent());
        }
    }


    // Constructor
    constructor() {
        super();
        
        this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (_instance) => {
			this.#modalContext = _instance;
		});
    }


    render() {
        return html`
            <button @click=${this._openModal}>Open Modal</button>
        `
    }
    

    /**
     * Open Modal (Document Picker)
     * @param id
     */
    async _openModal() {
        
        const modal = this.#modalContext?.open(
            this,
            UMB_DOCUMENT_PICKER_MODAL,
            {
                data: {
                    hideTreeRoot: true,
                    multiple: true
                },
                value: {
                    selection: []
                }
            }    
        );

        // On modal submit, update the value with the data passed back.
        modal.onSubmit().then(async (response) => {
            if (!response) return;

            let { data } = await this.#itemRepository.requestItems(
                response.selection
            );
            
            console.log(data);
            
        });
    }
}

export {
    ItemPicker as default
};

I hope that helps you with whatever is it you’re doing.