How to open Content Type in modal from custom dashboard?

[runegronkjaer]

I’m making a custom dashboard in Umbraco 16, listing some Content Types. Now I want to open the content type edit in a modal. Just like Umbraco does on the info workspace on regular content.

Something tells me that should be able to build the correct url, but I don’t know how. The Umbraco source code is super convoluted, so it’s not very helpful.

Any ideas?

/Rune

[Luuk (Luuk Peters (Proud Nerds))]

Did you see the documentation to start with?

Modals | Umbraco CMS

[nielslyngsoe (Niels Lyngsø)]

Hi Rune

It’s not that simple at the current moment, but surely possible.

You need to register a Routable Modal for Workspaces, and then append a bit to the Path for it to open the Workspace and the Content Type of choice.

First, declare this property:

	@state()
	private _editPath?: string;

And then add this in your constructor ( I hope you are cool with finding the imports yourself, if you use VS Code, it should be able to do it for you):

new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
			.onSetup(() => {
				return { data: { entityType: UMB_DOCUMENT_TYPE_ENTITY_TYPE, preset: {} } };
			})
			.observeRouteBuilder((routeBuilder) => {
				this._editPath = routeBuilder({});
			});

In your rendering, you can then make the path from this:

const href = this._editPath + UMB_EDIT_DOCUMENT_TYPE_WORKSPACE_PATH_PATTERN.generateLocal({ unique: 'the-content-type-id-to-edit'});

I hope that will work out for you

[jacob (Jacob Overgaard 🚀)]

Specifically, the modal token UMB_DOCUMENT_TYPE_WORKSPACE_MODAL should work:

import { UMB_DOCUMENT_TYPE_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/document-type';
import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';

// Then put this code in your dashboard:

const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
if (!modalManager) return;

try {
  modalManager.open(this, UMB_DOCUMENT_TYPE_WORKSPACE_MODAL, {
    value: { unique: 'some-guid-from-a-content-type' }
  }).catch(() => {});
} catch {
  // User cancelled
}

(The above is untested)

[runegronkjaer]

Cool. I did see something like that in input-document-type.element.ts. As you say, it’s not at simple, so I hope there would be a better/easier way
I will try that.

[runegronkjaer]

Thanks Jacob. I will try that solution as well. Looks simpler than Niels’.

[jacob (Jacob Overgaard 🚀)]

Niels’ solution uses the routing system to open the modal, which is also viable (you can get back to the modal you just opened with forward/back buttons in the browser).
It depends how much you want to do for the user experience.

[runegronkjaer]

Niels’ solutions works like an absolute charm. Thank you both of you!

[system]

Instead of “guys”, may we suggest, for example: “folks", “Umbracians”, “all”, or “everyone”? We use gender inclusive language in this forum (read more)

[runegronkjaer]

Thanks for Boomer shaming me Forumbot.