Web UI won't load overriden elements in chrome
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
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.
