umbraco 14 override media tree ui and datasource

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

ivan valadares 9 posts 129 karma points

Nov 23, 2024 @ 00:38
0

Umbraco 14 Override Media Tree UI and Datasource
I want to customize the Media Tree (modify its UI) and add additional properties to the data source. I have achieved this in the following way:
```
export const manifests: Array<any> = [
    {
        type: 'repository',
        alias: 'Umb.Repository.Media.Tree',
        name: 'Media Tree Repository',
        api: () => import('./media-tree.repository.js'),
    },
    {
        type: 'treeItem',
        kind: 'default',
        alias: 'Umb.TreeItem.Media',
        name: 'Media Tree Item',
        element: () => import('./tree-item/media-tree-item.element.js'),
        api: () => import('./tree-item/media-tree-item.context.js'),
        forEntityTypes: 'media',
    }
];
```
And in the media-tree-item.element.js I changed the elementName to avoid this error : "NotSupportedError: Failed to execute 'define' on 'CustomElementRegistry': the name "umb-media-tree-item" has already been used with this registry"
```
const elementName = 'umb-media-tree-item-v2';
@customElement(elementName)
```
This works, i'm getting my new ui elements that I define in media-tree-item.element.ts and getting my new properties that i fill in the media-tree.server.data-source.ts

Problem: Sometimes it works, and sometimes it doesn't. If I refresh the page, my code occasionally appears, but other times the default Umbraco behavior is displayed.

I always have this error in the console : "Umb.Repository.Media.Tree is already registered" that i can fix changing alias: 'Umb.Repository.Media.Tree', to alias: 'Umb.Repository.Media.Tree-V2' but in that case my code stops works.

Thanks in advance.
Copy Link

ivan valadares 9 posts 129 karma points

1 week ago

Solution Found. The problem was that sometime my class register first, and in this case there wasn't any problem. (Just the error in the console). The problem was when the umbraco original class register first, than my class would not be register, and would not work.

The solution is to unregister first:

import { manifests as manifestmediatree } from "./media/tree/manifests.ts";
    export const onInit: UmbEntryPointOnInit = (_host, extensionRegistry) => {

        extensionRegistry.unregister('Umb.Repository.Media.Tree');
        extensionRegistry.unregister('Umb.TreeItem.Media');
        extensionRegistry.unregister('Umb.TreeItem.Media.Root');
        extensionRegistry.registerMany([
            ...manifestmediatree
        ]);

    };

Copy Link

is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?