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.