How to Get an Embedded PDF Preview in Nuxeo

Starting 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}">

      <iframe
            width="100%"
            height="600"
            frameborder="0"
            style="border:0"
            src = "#{baseURL}viewer/web/viewer.html?file=#{baseURL}api/v1/id/#{currentDocument.id}/@blob/blobholder:0#{conversionActions.isPDF(currentDocumentAsBlobHolder)?'':'/@convert?format%3Dpdf'}">
      </iframe>

</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.

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}">

      <iframe
            width="100%"
            height="250"
            frameborder="0"
            style="border:0"
            src = "#{baseURL}viewer/web/viewer.html?file=#{baseURL}api/v1/id/#{field_0.id}/@blob/blobholder:0">
      </iframe>

</f:subview>

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.

Try it out and let us know what you think!