Sign in Register
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Sean Håkansson 67 posts 193 karma points
    Aug 16, 2024 @ 14:54
    Sean Håkansson
    0

    Umbraco 14 - Umbraco UI: How to build a custom property extension with pickers?

    Hi, have anyone tried building extensions with the new Umbraco UI?

    I'm trying out the new UI lib, lit etc and playing around with a demo, and I would like to try to add some pickers for media and multi-node content picking.

    Does anyone have any examples, or maybe some hints on what I should look into? I'm guessing I have to dispatch some sort of event, and listen to the returned values.

    Thanks!

    Copy Link
  • Bishal Tim 24 posts 113 karma points c-trib
    1 week ago
    Bishal Tim
    0

    Hey sean,

    for media:

    import type { UmbInputMediaElement } from '@umbraco-cms/backoffice/media';

    property as: media: string = "";

    event handler:

    #onChange(event: CustomEvent & { target: UmbInputMediaElement }) { this.media = event.target.selection?.join(',') ?? null; this.dispatchEvent(new UmbPropertyValueChangeEvent()); }

    <div class="flex-container">
                            <label class="description">Image for the page</label>
                            <umb-input-media
                                .min=${this.#min}
            .max=${this.#max}
                                @change=${this.#onChange}>
                            </umb-input-media>
                        </div>

    i would look at this setup from core as well property-editor-ui-media-entity-picker.element.ts Latest

    , i use it like this to send the data to server from which i save it to my db

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft