Listen for changes in a property editor

Questions
1

I am building a property editor, where the value can change as part of a document save.

When this happens, I want to run some code in the property editor.

Scenario is like this:

  • Editor edits a page, and saves it
  • A notificationhandler updates the value of the properties using my property editors.
  • The browser automatically updates the value
  • I then need to run some code, to change the view slightly.

How can this be done?

2

Hi Søren

Can’t wait to see what you are cooking up!

You can use the UMB_PROPERTY_CONTEXT like this in connectedCallback()

    this.consumeContext(UMB_PROPERTY_CONTEXT, async (context) => {
      this.observe(
        await context?.value,
        (value) => {
          console.log("the value ", value)
        }
      );
    });
1 Like
3

Wow, thats awesome - thanks!

2 Likes
4

Hi @skttl

Interesting, first, which version are you looking to resolve this in?

So let me rephrase to see if I got it right:

You have a Property whose Value gets altered as part of the Document Save action.
When that happens, you want to know if the Property Value changed(Document got saved?)? so you can react to it?

From v.14+ you cannot listen to an Event, like ‘Document Saved’, so your option is to react when you get a new value. But a value change could happen in other scenarios. So maybe that does not fit your case?

If I’m right so far, I guess I need some background story to understand why you want to do something at that point :slight_smile:

5

16.2-rc, found the UMB_PROPERTY_CONTEXT that does what I need :slight_smile:

1 Like
6

Oh, you are fast, replying to yourself…

In the case of you wanting to have this code on your Property Editor UI Element, then that is the long journey, you could turn your value-property into a getter/setter method and call something in the case of you getting a new value.

in this style (Taken from a Core Property Editor):

@property()
	public set value(newValue: string | undefined) {
		this._value = newValue || '';
		this.#updateSelectedState();
	}
	public get value(): string {
		return this._value;
	}

I hope that makes sense :slight_smile:

1 Like
7

Thanks, that works too!

Is that better than the context approach?

8

Im just curious what you are changing on save?

9

@skttl Yes, surely. But it does not really matter.

It comes down to complexity and a bit of performance.

Cause a getter/setter is just turning the property into a method, and it does not establish any extra computation to run.

Compared to consuming the context and then observing a state is more work on the computer, not something you should be worried about, cause the Backoffice does it a thousands times across various things. But its not needed in this case, so I would surely avoid it.

And then on the complexity scale, consuming and observing is way more complex code, which in theory make your code harder to maintain and more vulnerable. But for this case i’m generally begin theoretically.

:slight_smile:

10

I am working on a property editor for syncing videos to 3rd party hosts, and the property is updated with a reference to the 3rd party video :slight_smile:

1 Like
11

Can I know how to monitor the other property editor value change in same document?

12

Hi @LaputaX

Good question, that is covered in this article:

Notice the example assumes your Property Editor is built on top of a Umbraco Element.

Good luck

1 Like
13

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.