Umbraco 15: custom property editors - how to content picker dialog / media picker dialog

Questions
4

Hi Jesper,

Maybe I understand your question correctly . I’ve implemented this in a custom package where I used the media picker).

  1. Import the component:
import type { UmbInputMediaElement } from '@umbraco-cms/backoffice/media';
  1. Use it inside your Lit template:
<umb-input-media 
  .selection=${this.media}
  .min=${1}
  .max=${1}
  @change=${this.#onMediaChange}>
</umb-input-media>
  1. Handle the change event like :
#onMediaChange(event: CustomEvent & { target: UmbInputMediaElement }) {
  this.media = event.target.selection?.join(',') ?? null;
  this.dispatchEvent(new UmbPropertyValueChangeEvent(this.media));
}

It works well with the Umbraco backoffice experience. Also:

  • You can use a similar approach with umb-input-document for content pickers.
  • Use .min and .max to control selection limits.

Let me know if you’d like me to share a working snippet or more code from my package

2 Likes