access other properties from custom property editor

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

npack 61 posts 349 karma points

3 days ago

0

Access Other Properties from Custom Property Editor

v15

I'm trying to build a display-only custom property editor that combines some information from other properties on the current document and displays some read-only instructional data to the user.

For example, if the document type has Text1 and Text2 properties, I want to display some read-only instructions in a third property, updated when those properties change, that says "Let your manager know if the {Text1} is already {Text2}".

I started going through the custom property editor tutorial at https://docs.umbraco.com/umbraco-cms/tutorials/creating-a-property-editor and I was able to create a new property editor that displays a read-only string.

Now I'm trying to get access, from that property editor, to other properties in the same document, and ideally observe them as they change but I'm not sure if that is possible or how to proceed. I can see how to watch my own UmbPropertyValueChangedEvent but not those of the other properties.

Anybody have some advice? Maybe a property editor is the wrong place for this. I guess I could build it out as a health check report or display this information in some other place if there is some mechanism more appropriate.

Copy Link

npack 61 posts 349 karma points

3 days ago

I kept playing with it and got it working. The key was a 'PropertyDatasetContext' which links a property to its owner https://docs.umbraco.com/umbraco-cms/customizing/foundation/contexts/property-dataset-context

import { LitElement, html, css, customElement, property } from "@umbraco-cms/backoffice/external/lit";
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/property-editor';
import { UMB_PROPERTY_DATASET_CONTEXT } from "@umbraco-cms/backoffice/property";
import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api";


@customElement('my-project-instruction-displayer')
export default class MyProjectInstructionDisplayerElement extends UmbElementMixin((LitElement)) implements UmbPropertyEditorUiElement {

    @property({ type: String })
    public value = "";

    text1?: any;
    text2?: any;

    constructor() {
        super();

        this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (datasetContext) => {
            this.observe(await datasetContext?.propertyValueByAlias('text1'), (value) => {
                this.text1 = value;
                this.requestUpdate();
            });

            this.observe(await datasetContext?.propertyValueByAlias('text2'), (value) => {
                this.text2 = value;
                this.requestUpdate();
            });
        });
    }


    render() {

        return html`I'm a property editor that shows other properties: ${this.text1}  ${this.text2}`;
    }



}

declare global {
    interface HTMLElementTagNameMap {
        'my-project-instruction-displayer': MyProjectInstructionDisplayerElement;
    }
}

Copy Link

is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?