Creating a Workspace View and getting access to the current node

Questions
,
1

Hi All,

I’m hoping this is a quick question and I’m just being a little bit blind… but I’m trying to create a Workspace View (Formally a content app?) - I’ve found some examples in the docs on how to go about this which has started me off, but what I can’t seem to find is how do I get a reference/context for the current node that is being edited?

Basically, in my view I want to potentially read the current children of a node and display some information based off them, but without getting the current node I can’t make the appropriate requests to get the data.

I’m sure there is a context that I need to import into my view but I’m not sure which one it is - would be great if there was a more detailed practical example in the docs :slight_smile:

Thanks

Nik

2 
import { UMB_DOCUMENT_WORKSPACE_CONTEXT, UmbDocumentWorkspaceContext } from '@umbraco-cms/backoffice/document';

...

#workspaceContext?: UmbDocumentWorkspaceContext;
...
constructor() {
        this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (instance) => {
            if (!instance)
                return;
            this.#workspaceContext = instance;

            //Get current node
            instance.getUnique()

            //Get parent of current node
            instance.getParent()
        });
}

This might get you started! Beware that getUnique and getParent give a single time value, it’s much better to use the observables so you can react to changes.

1 Like
3

Thanks Luuk, that looks really helpful.
Can I ask, what’s an observable? or more accurately how do I get one to use? I’m trying to get my head around best practice for this stuff so am really appreciating the insights :slight_smile:

4

An observable means that you can ‘observe’ it. Every time it’s value changes you get a notification that it’s value changed, so you can act upon it. Why is this important in your component? Lets take an example:

import { UMB_APP_LANGUAGE_CONTEXT, UmbAppLanguageContext } from '@umbraco-cms/backoffice/language';
...
#appLanguageContext?: UmbAppLanguageContext;
_appCulture?: string;
...
constructor() {
    super();
    this.consumeContext(UMB_APP_LANGUAGE_CONTEXT, (instance) => {
        if (!instance)
            return;

        this.#appLanguageContext = instance;
        this._appCulture = instance.getAppCulture();
    });
}

In this case, we get the current language of the ‘app’, which is the currently selected content language and set it when the app language context is loaded into the _appCulture variable. Nice!

However, now there is an issue. If the user decides to change the content language, we’re stuck with the language we had when the component was created. And that’s where observables come in. On most services, the ‘getXXX()’ function returns a snapshot of the current value, like getAppCulture() in this example. However, most properties are observables, that can be observed.

So for instance:

// If we apply state() to our variable, our lit rendering can react to changes in the culture
@state()
_appCulture?: string;

constructor() {
    super();
    this.consumeContext(UMB_APP_LANGUAGE_CONTEXT, (instance) => {
        if (!instance)
            return;

        this.#appLanguageContext = instance;
        
        // Now we observe an observable and our variable will update every time the languages changes
        this.observe(this.#appLanguageContext!.appDefaultLanguage, (value) => {
                this._appCulture= value?.unique;
        });
    });
}

This is just a simple example, but I use observables for instance to check if a page is published or not and that can change when the user clicks the publish button. Hope this helps!

1 Like