Custom property editor with custom modal

Questions
1

Hey there,

I was following the tutorial for creating a custom property editor.

The property editor I want to build will open a custom modal, so I also followed this tutorial.

Since it referenced that the prefered way to register the modal was using Route Registration, I was trying to follow this tutorial.

I ended up with a folder /CustomPropertyEditors in my solution and a folder /my-prop-editor where I have the following struct:

my-prop-editor
   |- package.json
   |- tsconfig.json
   |- vite.config.ts
   |- src
       |- my-prop-editor-ui.element.ts
       |- my-proper-editor.modal.element.ts
       |- my-proper-editor.modal.token.ts
       |- manifest.ts

this is what I have inside vite.config.ts

import { defineConfig } from "vite";

export default defineConfig({
    build: {
        lib: {
            entry: "src/my-prop-editor.element.ts", // your web component source file
            formats: ["es"],
        },
        outDir: "../../App_Plugins/my-prop-editor/dist", // all compiled files will be placed here
        emptyOutDir: true,
        sourcemap: true,
        rollupOptions: {
            external: [/^@umbraco/], // ignore the Umbraco Backoffice package in the build
        },
    }
});

this is my manifest.ts content

export const manifests: Array<UmbExtensionManifest> = [
    {
        type: 'modal',
        alias: 'My.EditorModalAlias',
        name: 'My Editor Modal Alias,
        element: 'my-prop-editor.modal.element.ts',
    }
];

my-prop-editor.modal.ts ist exactly the same as the tutorial.
my-prop-editor-ui.element.ts has some changes to open the modal as per modal tutorial.

If I build this I end up with a package /my-prop-editor/dist/my-prop-editor.js inside my App_Plugins folder (the umbraco-package.json is already there in the my-prop-editor folder). This package appears in umbraco and it has a button that opens the modal. However, it will always come blank.

I believe the code from the route registration tutorial is the thing missing from this custom property setup.

So here comes the questions:

  1. Is my base “configuration” (vite files, manifest.ts, etc) correct?
  2. Where should the code from the route registration go? Inside my-prop-editor-ui.element.ts? Inside my-prop-editor.modal.element.ts? In a separate file (if so, where and how to reference it)?

Thank you for your time.

2

Hmm your manifest and vite.config look correct for me.
Do you get any console.log errors? To further help you i need to have some insight on your my-prop-editor.modal.element.ts file.

The route registration goes normal inside the my-prop-editor.modal.element.ts file in the constructor wher you will consume the UMB_MODAL_CONTEXT and inside there adds the UmbModalRouteRegistrationController.

3

Thank you @rammi987 and I’m sorry to only be replying now - busy, busy, busy weeks…

My solution was to list my-prop-editor-ui.element.ts, my-proper-editor.modal.element.ts and my-proper-editor.modal.token.ts in vite.config.ts’s build.lib.entry and implicity import './my-proper-editor.modal.element.ts' in my my-prop-editor-ui.element.ts

This ended up being my solution, not quite sure if it is the right way to do it :slight_smile: