Umbraco 15 - Get property data from content nodes in a custom property editor

Hi all

Finally have a project where I take the plunge into making a custom property editor for Umbraco 15.

I need to read some values from a specific document types properties. I guess I should use the context API somehow but I’m not sure what to import and, what or which methods to use from the import :sweat_smile:

I have been looking briefly at the API documentation here @umbraco-cms/backoffice but it feels a bit confusing and overwhelming.

It might be that I should use the code sample from this piece of documentation Property Dataset | Umbraco CMS - However I lack the context around the snippet to fully figure out what needs to be imported etc. so still feeling a bit lost here.

Pre v14 I would usually inject the entityResource and then call its getById() method - Docs

So I’m trying to figure out what the equivalent is for v15 and how to implement it.

Cheers,
Jan

1 Like

Come to think of it - What I want is probably to query either the Delivery API or the Management API.

Hello Jan.

This might not be very helpful at all, but I’ve used both methods of getting data:

  1. Using the Content Delivery API
  2. Getting values via Context.

The reason method 2 was helpful for me was that I could update values in the same workspace and it’d change the data in my custom property editor. If that makes sense.

import { UMB_WORKSPACE_CONTEXT } from "@umbraco-cms/backoffice/workspace";

this.consumeContext(UMB_WORKSPACE_CONTEXT, (dataset) => {
        this.observe(dataset.content?.data?.source, (source) => {

            this._myValue = source.values?.find((x: any) => x.alias == myPropertyAlias).value
                
      });
});

This might not be helpful for your scenario, so please take with a pinch of salt as it also might not be best practice.

If you are getting data from the Delivery API, I am using this Context for that:

import { UMB_AUTH_CONTEXT } from "@umbraco-cms/backoffice/auth";

const AuthContext: any = await _this.getContext(UMB_AUTH_CONTEXT);
const TOKEN = await AuthContext.getLatestToken();

let response = await fetch("/umbraco/delivery/api/v2/content/item/xxxxxx",  {
	method: "GET",
	headers: { Authorization: `Bearer ${TOKEN}` },
});
let data = await response.json();

Again - might not be best practice, but it’s working well for me at the moment.

All the best.

1 Like

The content delivery API only works on published data, take that into consideration.

2 Likes

As always there is many ways to solve getting data.

In this case where you are looking to use a Content Node as the Config for your Property Editor, I would suggest using a Repository.

Repositories are the new Resources, a class you can spin up to make requests to the Management API.

In this case you need to use the UmbDocumentDetailRepository which comes with the method requestByUnique , so you need the unique(aka. ID) of the Document you like to retrieve.

So your code would look like this:

export default class MyPropertyEditor extends UmbElementMixin(LitElement) implements UmbPropertyEditorUiElement{
    
    @property({type: String})
    public value = "";

    #documentRepository = new UmbDocumentDetailRepository(this);

   connectedCallback() {
        super.connectedCallback();
        this.#fetchDocumentData();
    }

    async #fetchDocumentData() {
        const unique = "cec1f44e-30fd-4367-818c-03642e7d68db";
        const {data} = await this.#documentRepository.requestByUnique(unique);
  
          console.log("data: ", data);
    }
}

That was the simplest way, but I would recommend doing it this way, to support if the Document changes while the Property Editor is display on screen. Because above would only get the data when the Property Editors is appended to the DOM. The following example would also update if the document is edited while it is displayed.

export default class MyPropertyEditor extends UmbElementMixin(LitElement) implements UmbPropertyEditorUiElement{
    
    @property({type: String})
    public value = "";

    #documentRepository = new UmbDocumentDetailRepository(this);

   connectedCallback() {
        super.connectedCallback();
        this.#fetchDocumentData();
    }

    async #fetchDocumentData() {
        const unique = "cec1f44e-30fd-4367-818c-03642e7d68db";
       const { asObservable } = await this.#repository.requestByUnique(unique);
	this.observe(
		asObservable(),
		(data) => {
        		console.log("data: ", data);
		},
		'myUniqueControllerAliasForThisObservation',
	);
    }
}

Maybe not relevant in this case, but this is how entries in a Picker stays up to date, when a user corrects the data via infinite editors. And in the future, via Signal-R.

I hope that helps move forward, good luck :slight_smile:

2 Likes

Thank you for all the suggestions folks - And thank you for chiming in on this Niels. Really nice that we’re able to hook into the Document Repository. It was exactly what I was looking for :raising_hands:

/Jan

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