Open a Content Editor modal from a property editor (editorService.open alternative)

Questions
1

Hi there,

I’m migrating a custom property editor, from Umbraco 12 (AngularJS) to Umbraco 15+.

Background info: wrapping AngularJS (please, don’t shoot me)
I’ve created a wrapper, which loads AngularJS inside of the web component. That actually works pretty well. Saved me a lot of time, too.

To access Umbraco functions, I bubble events back to the WebComponent, which calls imported Umbraco components (see an example below).

Legacy solution
In AngularJS (U12), the editorService can be used to open a sidebar / modal to edit a particular node. I’m looking for an alternative for Umbraco 15+.

Content picker (but not editor!)
In my property editor script file, I can open a Content Picker with this function:

import { UMB_MODAL_MANAGER_CONTEXT as mm } from '@umbraco-cms/backoffice/modal';
import { UMB_DOCUMENT_PICKER_MODAL } from '@umbraco-cms/backoffice/document';

async openContentPicker(options) {
    // get context and open modal
    const modalContext = await this.getContext(mm);
    const modalHandler = modalContext?.open(this, UMB_DOCUMENT_PICKER_MODAL, {
        data: {
            modal: {
                type: "sidebar",
                size: "small"
            },
            hideTreeRoot: true,
            multiple: options.multiPicker,
            filter: options.filter,
            filterExclude: false,
            startNodeId: options.startNodeId
        }
    });

    // modal event handlers (submit / cancel)
    modalHandler.onSubmit().then((selection) => {
        if (options.submitCallback) {
            options.submitCallback?.(selection);
        }
    }).catch(() => {
        if (options.closeCallback) {
            options.closeCallback?.();
        }
    });
}

Is there a way to open a ‘content editor’ in a similar way? Or do I have to navigate to a particular route by using UMB_ROUTE_CONTEXT?

Example
An example of what I’m trying to accomplish, can be found in the Media-section:

  • Open a media item
  • Click the ‘Info’ tab
  • Find the ’ Referenced by the following items’ panel
  • Click one of the references, so a sidebar / modal opens where you can edit the node

It’s a built in function of Umbraco, so I assume it’s possible…

Please help!
I’ve spent quite some time sniffing the network tab in Chrome and scrolling through the documentation and source code, but can’t find a solution so far.

Would be nice if somebody could help!

Best wishes,
Koopa

2

Hey @itsmekoopa, without seeing the rest of the code, I’m not 100% sure, but have you have you had a look at the consumeContext functionality? Consume a Context | Umbraco CMS

This might be what you’re looking for in terms of navigate the context to get what you need.

3

Hi Mike, thank you. Yes, I hope there’s a context, similar to UMB_DOCUMENT_PICKER_MODAL, which lets me open a ‘edit document’ modal.

I couldn’t find one so far, unfortunately…

4

Could it be a workspace context that you’re looking for? Workspace Context | Umbraco CMS

Apologies if this isn’t much help by the way, it’s still a little tricky finding the right info isn’t it!

5

When you click a “referenced content item” link on a media item, it appears to open a workspace (it’s displayed in the url bar). However, I couldn’t find the right files to reference, so I can establish such a link myself.

Yes, pretty tough making progress this way.

It’s all trial & error, although the question is pretty straightforward: how can I open a content editor (and pass a NodeId to it) and edit a node, from a property editor.

6

Best guess so far is that I have to open a (routed) modal, which contains a workspace for the entity type ‘document’.

My product (and thus my property editor) is relying heavily on editing nodes in a modal / infinite editor, so it’s a “must fix” before I can upgrade to U15/16!

Any MVP or expert willing to help me out? :folded_hands:

(on the bright side… figuring out how to refresh the content tree was done in 10 mins) :slight_smile: