How to Get an Embedded PDF Preview in Nuxeo


Tue 05 April 2016 By Michael Gena

Embedded pdf previewStarting from the version 7.3, the Nuxeo Platform offers the capability of previewing a PDF using PDF.js. Recently, we were asked if it’s possible to have an embedded version of the PDF preview. Our answer, of course, was yes! Let me walk you through the steps on how you can achieve this.

A Custom Widget


The first step is to create a custom widget containing the following code snippet.

<f:subview
xmlns:f="http://java.sun.com/jsf/core"
id="#{widget.id}">

  &lt;iframe
        width="100%"
        height="600"
        frameborder="0"
        style="border:0"
        src = "#{baseURL}viewer/web/viewer.html?file=#{baseURL}api/v1/id/#{currentDocument.id}[email protected]/blobholder:0#{conversionActions.isPDF(currentDocumentAsBlobHolder)?'':[email protected]?format%3Dpdf'}"&gt;
  &lt;/iframe&gt;

</f:subview>


It’s basically an iframe containing a url to a PDF. As you can see, the idea is to fetch the blob of the current document and verify whether the blob is in the PDF format. If not, we will convert it to PDF.

You just need to add the widget above as a resource in your Studio project, under Resources > Widget Templates.

Then, under the Tab where you want your widget to be displayed, you have to drop a Template Widget.

Layout Widget Editor

Under the View Properties section, you can select the custom widget you uploaded in the Resources of your Studio project. You will now have the PDF preview displayed under the corresponding Tab!

Preview In List


Now, let’s extend this feature and have this preview widget in a list. For this, the widget is almost the same; the only difference is that we use the field_0 variable instead of currentDocument to retrieve the data.

<f:subview
xmlns:f="http://java.sun.com/jsf/core"
id="#{widget.id}">

  &lt;iframe
        width="100%"
        height="250"
        frameborder="0"
        style="border:0"
        src = "#{baseURL}viewer/web/viewer.html?file=#{baseURL}api/v1/id/#{field[email protected]/blobholder:0"&gt;
  &lt;/iframe&gt;

</f:subview>


Layout widget editor for preview in list:

Here’s how you can configure the template. Of course, the widget has to be imported under the View Properties section. Also, under the Advanced mode configuration section, add a new Fields property called data. This way, you can get the data for each line.

Embedded pdf preview

Try it out and let us know what you think!


Tagged: Document Management, Features, How to, Nuxeo Platform 7.x