topic Re: Web UI won't load overriden elements in chrome in Nuxeo Forum

Web UI won't load overriden elements in chrome

a_c — Mon, 09 Dec 2019 20:10:45 GMT

Hello everyone,

I have come to notice that the web UI won't load the overriden elements in chrome if the network speed is slow. I tried changing the network speed from the dev tools to Fast 3G or slower. The interface will load only the default elements and leave aside any custom elements.

I modified the document actions slots for the edit and delete document buttons with custom logic, this slots where added to a html file called my-custom-bundle.html:

<nuxeo-slot-content name="deleteDocumentAction" slot="DOCUMENT_ACTIONS" order="15">
    <template>
        <my-delete-document-button document="[[document]]"></my-delete-document-button>
    </template>
</nuxeo-slot-content>

<nuxeo-slot-content name="deleteSelectionAction" slot="RESULTS_SELECTION_ACTIONS" order="30">
    <template>
        <my-delete-documents-button documents="[[selectedItems]]"></my-delete-documents-button>
    </template>
</nuxeo-slot-content>

I can see my components being loaded in the network tab, but if I examine the buttons from the ui they are just the default ones.

Could this be a problem with my deployment fragment, or the require tag order?

I share my deployment-fragment changes:

<?xml version="1.0" encoding="UTF-8"?>

<fragment version="1">
    <extension target="application#MODULE">
        <module>
            <java>${bundle.fileName}</java>
        </module>
    </extension>
    <require>org.nuxeo.web.ui</require>
    <require>all</require>
    <install>
        <!-- unzip the war template -->
        <unzip from="${bundle.fileName}" to="/" prefix="web">
            <include>web/nuxeo.war/**</include>
            <exclude>web/nuxeo.war/ui/i18n/**</exclude>
        </unzip>
        <!-- create a temporary folder -->
        <delete path="${bundle.fileName}.tmp" />-
        <mkdir path="${bundle.fileName}.tmp" />
        <unzip from="${bundle.fileName}" to="${bundle.fileName}.tmp"/>

        <copy from="${bundle.fileName}.tmp/web/nuxeo.war" to="/"/>
        <!-- append the translations -->
        <append from="${bundle.fileName}.tmp/web/nuxeo.war/ui/i18n/messages.json" to="nuxeo.war/ui/i18n/messages.json" addNewLine="true"/>
        <delete path="${bundle.fileName}.tmp"/>
    </install>
</fragment>

This is the component I declared to add the custom ui elements to the bundle:

<?xml version="1.0"?>
<component name="studio.extensions.remove-button" version="1.0.0">
    <require>org.nuxeo.web.ui.resources</require>
    <extension target="org.nuxeo.ecm.platform.WebResources" point="resources">
        <resource name="delete-document" type="import" shrinkable="false">
            <uri>/ui/my-delete-document-button.html</uri>
        </resource>
        <resource name="delete-documents" type="import" shrinkable="false">
            <uri>/ui/delete-selected-docs-button.html</uri>
        </resource>
    </extension>
    <extension target="org.nuxeo.ecm.platform.WebResources" point="bundles">
        <bundle name="web-ui">
            <resources append="true">
                <resource>delete-document</resource>
                <resource>delete-documents</resource>
            </resources>
        </bundle>
    </extension>
</component>

Finally, this is my manifest file to include my contribution:

Bundle-ActivationPolicy: lazy
Bundle-ClassPath: .
Manifest-Version: 1.0
Bundle-Vendor: my.bundle.vendor
Bundle-Version: 1.0.0
Bundle-Name: ssa-tree
Bundle-ManifestVersion: 2
Require-Bundle: org.nuxeo.runtime
Bundle-SymbolicName: my.custom.bundle;singleton=true
Nuxeo-Component: OSGI-INF/extensions.xml,
  OSGI-INF/edit-permission-contrib.xml
Import-Package: org.nuxeo.ecm.core,
 org.slf4j,
 org.apache.avro

Is there any other configuration missing or wrong?

EDIT

After some research, I found a jira ticket https://jira.nuxeo.com/browse/ELEMENTS-1096 in which it explains it's most likely a bug with the chrome browser. Tested with firefox, even reducing network speed at maximum everything loads correctly unlike with chrome.

Hopefully some fix will be released soon

Re: Web UI won't load overriden elements in chrome

Rodri_ — Sat, 28 Dec 2019 10:52:45 GMT

Hello again,

I have being rethinking about this issue, and after some tests I think I came up with a solution. Instead of overwriting the buttons, why don't you create a new one and then hide the default ones? For example, with the delete button:

<!-- Add your custom button -->
<nuxeo-slot-content name="myCustomdeleteDocumentAction" slot="DOCUMENT_ACTIONS" order="15">
    <template>
        <my-delete-document-button document="[[document]]"></my-delete-document-button>
    </template>
</nuxeo-slot-content>

<!-- Disable the default delete button -->
<nuxeo-slot-content name="deleteDocumentAction" slot="DOCUMENT_ACTIONS" disabled></nuxeo-slot-content>

I have tested this solution, and it worked pretty good. I also added a new more generic "require" tag in the bundle. This requirement is added when you generate the custom elements using Nuxeo Studio:

<?xml version="1.0"?>
<component name="studio.extensions.remove-button" version="1.0.0">
    <require>org.nuxeo.runtime.started</require>
	...
</component>

And finally, I have also seen you didn't import the custom elements in "my-custom-bundle.html". I think you forgot to add them only in this topic, but just in case, remember to add them:

<link rel="import" href="path/to/my-delete-document-button.html">  
<link rel="import" href="path/to/my-delete-documents-button.html">

I hope this solution will help you.

Regards.

Re: Web UI won't load overriden elements in chrome

a_c — Mon, 30 Dec 2019 18:05:07 GMT

Thank you very much for your insight and suggested solution Rodri, this might work, I will try it out!

Re: Web UI won't load overriden elements in chrome

Rodri_ — Tue, 07 Jan 2020 08:30:34 GMT

I hope my solution worked as a temporary solution. However, I think this problem has been recenty solved with the new HotFix HF20