How to override a Web UI component without having to update all it's references?
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:
<require>org.nuxeo.web.ui.resources</require>
<extension target="org.nuxeo.ecm.platform.WebResources" point="resources">
<resource name="custom-avatar" type="import" shrinkable="false">
<uri>/ui/custom-user-avatar.html</uri>
</resource>
</extension>
<extension target="org.nuxeo.ecm.platform.WebResources" point="bundles">
<bundle name="web-ui">
<resources append="true">
<resource>custom-avatar</resource>
</resources>
</bundle>
</extension>
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)
 |
Gregory Carlin
Nuxeo Specialist (18.6K) 4 7 5 |
01/05/2020 ( History) |
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.
 |
Benjamin Gamard
Member (164) 1 4 2 |
12/24/2019 ( History) |
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?
|
Gregory Carlin
Nuxeo Specialist (18.6K) 4 7 5 |
12/19/2019 ( History) |
But then I would have to replace every usage of <nuxeo-user-avatar> for <custom-user-avatar> right? And if I keep the original component name, it will throw an error saying the component has already been defined and won't make any changes.
Or you mean the my-project-name-custom-bundle.html that's generated at the ui folder by nuxeo studio?