This tutorial provides step by step instructions to replace the default Nuxeo previewer by the Enhanced Viewer. The instructions work for other use cases: it is possible to display the enhanced viewer in the task layout, or any other location where a document preview should be displayed.
Prerequisites
Make sure that the Nuxeo Enhanced Viewer addon is installed and configured on your Nuxeo instance.
Enhanced Previewer Element
Nuxeo Web UI is built upon Nuxeo Elements. The Enhanced Viewer is displayed thanks to the nuxeo-arender-page
element. It is composed of the following attributes:
visible
: Whether the element should be displayed or not.name
: The component name.document
: The document which should be displayed.
document
attribute is linked to a property of type Object
(as in the document layouts for example).
Modify the Default Previewer
We can have two approaches:
- Update the previewer for a specific document types
- Update the previewer for all document types
For a Specific Document Type
- Generate the layouts of the desired document in Nuxeo Studio Designer > UI > Layouts.
On the View layout, switch to code view and replace the line:
<nuxeo-document-viewer role="widget" document="[[document]]"></nuxeo-document-viewer>
by
<nuxeo-arender-page visible="true" name="enhanced-viewer" document="[[document]]"></nuxeo-arender-page>
- Save and deploy.
For All Document Types
- In Resources > UI, create a new folder
custom-elements
. - In it, create a new element and name it
nuxeo-document-page
and copy/paste the code from the Nuxeo Web UI GitHub Page. Replace the line:
<nuxeo-document-view document="[[document]]"></nuxeo-document-view>
by
<nuxeo-arender-page visible="true" name="enhanced-viewer" document="[[document]]"></nuxeo-arender-page>
In Resources > UI, add the following contribution to the
-bundle.html
file:<nuxeo-slot-content name="documentViewPage" slot="DOCUMENT_VIEWS_PAGES" order="10"> <template> <nuxeo-filter document="[[document]]" expression="document.facets.indexOf('Folderish') === -1 && document.facets.indexOf('Collection') === -1" > <template> <nuxeo-arender-page visible="true" name="enhanced-viewer" document="[[document]]"></nuxeo-arender-page> </template> </nuxeo-filter> </template> </nuxeo-slot-content>
- Save your changes and deploy your changes.
Going Further
It is possible to create custom logic to display a specific document version. All needed is:
- Create an automation scripting / chain which returns a document, using the
Document.GetVersion
operation. - Navigate to your document type layout.
Add the following operation to retrieve the current document (adapt the variable to the context):
<nuxeo-operation id="getFirstVersion" op="javascript.AS_GetFirstVersion" input="[[document]]"></nuxeo-operation>
Add the
_valueChanged
observer on thedocument
to execute the operation.document: { type: Object, observer: '_valueChanged' },
Add the document which needs to be displayed in the properties:
myFirstVersion: Object
.- Add the
_valueChanged
method:_valueChanged: function() { if (this.currentTaskDocument){ this.$.getFirstVersion.input = this.currentTaskDocument; this.$.getFirstVersion.params = {}; this.$.getFirstVersion.execute() .then(function(result) { this.myFirstVersion = result; }.bind(this)) .catch(function (error) { }.bind(this)); }
- Save your changes and deploy.