Extending existing Umbraco backoffice components

Questions
,
1

Hello, I’m looking to replace a modal that’s part of the Umbraco component library (umb-rollback-modal to be precise).

The idea is to create a new element that extends from the core one and then overwrite methods like render so I don’t need to worry about maintaining some functionality. The new modal will share some functionality but will a custom UI and some custom functionality.

So far I just have something like this, along with a manifest with type of modal to register it. I’ve been through the documentation and package json exports in the node modules to try and find the file, but coming up with no luck!

I guess what I’d like to know is; is this the right approach to take? and if so, how do I search the exports of the Umbraco to find the namespace of what I want?

import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit';
import { UmbRollbackModalElement } from 'I can't find the right namespace!';


@customElement('rbp-rollback-modal')
export class RbpRollbackModalElement extends UmbRollbackModalElement {
  constructor() {
    super();
  }
  override render() {
    return html` HELLO FROM MY MODAL!`;
  }
}

export default RbpRollbackModalElement;

declare global {
  interface HTMLElementTagNameMap {
    'rbp-rollback-modal': RbpRollbackModalElement;
  }
}
1 Like
2

Still haven’t got this working, so here’s an update. Been trying a few more things and found the functionality to replace an extension. My manifest now looks like this (I changed it to any – as Array<UmbExtensionManifest> didn’t have a definition for overwrites). This didn’t have any bearing but the file is definitely being read because if I switch the alias to Umb.Modal.Rollback I get an already defined error (as expected).

export const manifests: any = [
  {
    name: "Rollbacker",
    alias: "PR.Modal.Rollback",
    type: 'modal',
    overwrites: 'Umb.Modal.Rollback',
    element: () => import("./rollback.element")
  }
];

I thought another way would be to replace the Token that is used to fire off the actual Rollback Modal, but that too is locked away inside the node_modules!

I also tried the unregister function as mentioned in the docs but that function didn’t exist on the UmbExtensionRegistry object (in TS checking and also in console after nocheck).

My @umbraco-cms/backoffice node package is v15.3.1

The experimentation continues.

3

Hi @Rockerby

The problem in this specific case is that Modals are refereed by Alias. Meaning the overwrite feature has no affect since the extension is requested.

I do see it reasonable that this approach maybe should be corrected to work for you, but for now you would need to unregistered the Core one and make sure yours use the same Alias.

Let us know how that goes :slight_smile:

1 Like
4

Awesome, so I was on the right train of thought :slight_smile:

Unregistering was one of the things I’d tried to do but couldn’t quite work out what I was doing as the documentation didn’t work! I delved into the code a bit more and found the right reference and now my modal shows instead of the standard rollback one - a big H5YR @nielslyngsoe

I added a PR to the docs - assuming the way I mention is the right way!

2 Likes
5

Well spotted and thanks.