nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to override a Web UI component without having to update all it's references?

a_c

Hello community

I need to change the way the <nuxeo-user-avatar> returns the user's initials, which is a simple javascript function. The problem is, I would need to override all the references in other components throughout the application as well, like the <nuxeo-user-tag> component, or the <nuxeo-user-group-formatter>, which would also have to be overriden and have their references changed in the nuxeo-app.html file or the elements.html file, and so on.

It snowballs to a bunch of other components which I'd also have to override just for a simple function!

Since web components cannot be redefined or unregistered, is there any better way to change the behavior of a component without having to override all the other components that use it? How can I keep using the same component and only change the logic I need? Or how to tell the component to use a different function with my custom logic at runtime?

EDIT This is the xml contribution file I would use to override the component:

org.nuxeo.web.ui.resources /ui/custom-user-avatar.html custom-avatar

Find more posts tagged with

Accepted answers

Gregory_Carlin

There is no way to do it today (at least not until we have import maps support). This can’t be supported as we might need to break the API and we can’t ensure your override implements the API we need. Solutions to address this that we’d like to propose once we can do so:

import maps (https://www.chromestatus.com/feature/5315286962012160 )
custom npm deps (you fork nuxeo-elements and reference your fork instead)
source overlay Essentially you can override any source file of Web UI or it’s deps during the build (we take those files and override the local fs before doing a build) Finally, about the “This is the xml contribution file I would use to override the component:” the answer is “Where we’re going we don’t need/want no XML contribution” (due back to the future reference. The Webresource component thing and the wro4j resource processors only apply to resources managed by Nuxeo and we’re moving to a static / custom deployment of Web UI (already have an image with nginx deployment). Also we’re not planning to support any runtime procesing of resources (ig “magic” is to happen it’ll happen at build time)

All comments

Gregory_Carlin

Have you tried to duplicate the source code of the element (https://github.com/nuxeo/nuxeo-ui-elements/blob/maintenance-2.4.x/widgets/nuxeo-user-avatar.html ) and copy it into your Nuxeo Studio Designer Project, make your updates and reference it in your custom bundle file?

a_c

You mean the xml contribution file? I edited my question to show my contribution.

Gregory_Carlin

Hello, I'm making a reference to what is done to extend the user profile for exemple

a_c

I see in your example that you're replacing the <link> references and the href attribute in nuxeo-layout, but in my case what would I replace? The whole nuxeo-app.html file and add the import there? If I just add the html import in my *custom-bundle.html it will throw the customElementRegistry error

Benjamin_Gamard

I asked the same question a few weeks ago and the answer from the Nuxeo team was that it's not possible without overriding the massive 80k LOC nuxeo-app.html file.

a_c

I see, it is I as I feared. Could you share a link to the question please?

Benjamin_Gamard

Here it is https

Gregory_Carlin

import maps (https://www.chromestatus.com/feature/5315286962012160 )
custom npm deps (you fork nuxeo-elements and reference your fork instead)
source overlay Essentially you can override any source file of Web UI or it’s deps during the build (we take those files and override the local fs before doing a build) Finally, about the “This is the xml contribution file I would use to override the component:” the answer is “Where we’re going we don’t need/want no XML contribution” (due back to the future reference. The Webresource component thing and the wro4j resource processors only apply to resources managed by Nuxeo and we’re moving to a static / custom deployment of Web UI (already have an image with nginx deployment). Also we’re not planning to support any runtime procesing of resources (ig “magic” is to happen it’ll happen at build time)