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

[jesperordrup]

In good old angular we have an option to use build in content picker and media picker dialogs in our custom property editors.

Is it possible in umbraco 15?

[jesperordrup]

Im looking for something like:

Editor Service | Umbraco CMS

[LuukPeters (Luuk Peters (Proud Nerds))]

You need to open the appropriate modal, let me see if I can find an example.

I think this deals with the same thing:

Opening a Content Picker modal from a Custom Property Editor

Hello. I am building a Custom Property Editor where by the user can select items from the content tree. I’m struggling to understand and find what things I should even be looking for in the documentation. When the user clicks a button, I can get the Modal to open, but it doesn’t show me the content tree for the user to select from. This is what I have so far. const modal = this._modalContext?.open(this, UMB_TREE_PICKER_MODAL, { data: { hideTreeRoot: true, multiple: false …

Edit: if you want to use the content picker or media picker property editor in your custom property editor, I think @BishalTimalsina12 approach is the way to go. But if you want to do something custom for picking content or media, you can use the modals directly and handle the result yourself. It depends on what you want to do

[BishalTimalsina12 (Bishal Tim)]

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';

2. Use it inside your Lit template:

<umb-input-media 
  .selection=${this.media}
  .min=${1}
  .max=${1}
  @change=${this.#onMediaChange}>
</umb-input-media>

3. 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

[jesperordrup]

Thank you - this looks promising. And if its for Umbraco 15 then fantastic, I’ll try immed when I get back.

Where did you find the “clues” to how? I’ve just searched for “UmbInputMediaElement” on web, in the forum and on docs.umakers.com - and there is zero hits?

[jesperordrup]

Thank you Luuk!!

@LuukPeters

f you want to use the content picker or media picker property editor in your custom property editor, I think @BishalTimalsina12 approach is the way to go. But if you want to do something custom for picking content or media, you can use the modals directly and handle the result yourself. It depends on what you want to do

I do wanna use the picker to pick content (document or media) in the basic way. But good to know that the other way exists.

Future?

Im still searching for the official way. I cant really find any solid docs on any of the suggestions. And @nielslyngsoe even suggests there is a different method in v16 (Opening a Content Picker modal from a Custom Property Editor - #5 by sm-rob)

Update:

I found

UmbDocumentItemRepository | @umbraco-cms/backoffice

But .. this is the kind of docs that I cant read nor understand.