Sunday, December 1, 2013

Liferay Document Viewer Plugin Portlet


Create Plug-in portlet  to view documents

Liferay already have documents preview in documents and media portlet by using that we can view documents

Document preview concept is uses Apache PDF Box by default from this we can see the PDF document.

For this we need not to do any configuration so that it will automatically view the PDF documents.

For better quality views life ray have provide future to configure Image Magick tool so that we can view documents with very good quality.

If we not configure Image Magick tool for life ray then it will show following message in the console  when we try to preview documents in liferay.

Liferay is not configured to use ImageMagick for generating Document Library previews and will default to PDFBox. For better quality previews, install ImageMagick and enable

If we use Image Magic tool then document is converted into images. Means each page is converted into one image.

This can be handle by liferay libraries the main class is it will take care the all the things

Download LiferayDocViewr  portlet from following location

You can find source and war file


Portlet developed in Liferay 6.1GA2 EE version

If you want deploy in CE version you just do changes in
Liferay 6.1 EE version

author=Liferay, Inc.

Liferay 6.1 CE version

name = LiferayDocViewr
author=Liferay, Inc.

Procedure for deploy portlet:

You can use war file and directly place in your portal deploy folder and test or you can also use source to deploy portlet.

Once portlet is deployed successfully you can see the portlet in sample category name as
Liferay Doc Viewer.

Login as Admin and add some sample documents using Document Media Portlet in liferay


Before use this portlet read entire article and then test the portlet

Now our target id create plug-in portlet for to view documents

  1. Configure Image Magic tool
  2. Configure Open Office and Start Open Office Service.
  3. Develop portlet to view documents

Configure Image Magic tool

Download Image Magick Tool from Following Location

Install image magic in your system, follow the installation steps and choose your image magick installation directory

Generally it is in program Files, this path we will use in liferay Image magick configuration

Now login as Admin in liferay and go control panel

Go to portal server section and click on Server Administration menu form the tab choose External Service from that enable image magick tool and configure Image Magick installation path

The following is screen for Image Magick configuration in liferay.

Now Document Viewer uses Images Magick service to generate images from document then we can see view good quality

If any quality problem then go through following URL from liferay wiki

Configure Open Office and Start Open Office Service

From document viewer can support by default PDF view. If we want see MS office documents and open office documents we need to configure open office and we need to start open office service.

The concept something like first documents will be converted into PDF and then PDF documents will be converted into images based on pages the document contains.each page converted into one image.

Go through following link configure open office and start open office service

Develop portlet to view documents

Liferay have already provides document preview in Document Library Portlet.

They have created AUI JavaScript to make view template.

This AUI script will take preview URL and Number of pages count as options.
The page preview URL something like Follows

The following is Example URL

Each time when the request have  /document URL pattern the request will be handled by  servlet this will start PDFProcessor and do further actions like convert PDF to images or documents to PDF and then images.

The following is important java classes and

Internally it uses many implementation classes from portal


If document is more then it will take time to generate images

If document is ms office or open office first it should convert into PDF and then images so It will take time to complete this process.

The following is code for document viewer template
<%@page import="com.liferay.portlet.documentlibrary.util.DLUtil"%>
<%@page import="com.liferay.portlet.documentlibrary.util.PDFProcessorUtil"%>
<%@page import="com.liferay.portal.kernel.repository.model.FileVersion"%>
<%@page import="com.liferay.portal.kernel.repository.model.FileEntry"%>
<%@page import="com.liferay.portlet.documentlibrary.service.DLAppLocalServiceUtil"%>
<%@page import="com.liferay.portlet.documentlibrary.service.DLAppHelperLocalServiceUtil"%>
<%@ include file="init.jsp"%>
long fileEntryId=ParamUtil.getLong(renderRequest,"fileEntryId");
FileEntry fileEntry=DLAppLocalServiceUtil.getFileEntry(fileEntryId);
FileVersion fileVersion=fileEntry.getFileVersion();
boolean hasPDFImages = PDFProcessorUtil.hasImages(fileVersion);
int previewFileCount = 0;
String previewFileURL = null;
String[] previewFileURLs = null;
String videoThumbnailURL = null;
String previewQueryString = null;
if (hasPDFImages) {
            previewFileCount = PDFProcessorUtil.getPreviewFileCount(fileVersion);
            previewQueryString = "&previewFileIndex=";
            previewFileURL = DLUtil.getPreviewURL(fileEntry, fileVersion, themeDisplay, previewQueryString);
            <div class="lfr-preview-file" id="<portlet:namespace />previewFile">
            <div class="lfr-preview-file-content"
                        id="<portlet:namespace />previewFileContent">
                        <div class="lfr-preview-file-image-current-column">
                                    <div class="lfr-preview-file-image-container">
                                                <img class="lfr-preview-file-image-current"
                                                            id="<portlet:namespace />previewFileImage"
                                                            src="<%= previewFileURL + "1" %>" />
                                    <span class="lfr-preview-file-actions aui-helper-hidden"
                                                id="<portlet:namespace />previewFileActions"> <span
                                                id="<portlet:namespace />previewToolbar"></span> <span
                                                class="lfr-preview-file-info"> <span
                                                            id="<portlet:namespace />previewFileIndex">1</span> of <span
                                                            class="lfr-preview-file-count"><%= previewFileCount %></span>

                        <div class="lfr-preview-file-images"
                                    id="<portlet:namespace />previewImagesContent">
                                    <div class="lfr-preview-file-images-content"></div>
<aui:script use="aui-base,liferay-preview">
new Liferay.Preview(
            actionContent: '#<portlet:namespace />previewFileActions',
            baseImageURL: '<%= previewFileURL %>',
            boundingBox: '#<portlet:namespace />previewFile',
    contentBox: '#<portlet:namespace />previewFileContent',
            currentPreviewImage: '#<portlet:namespace />previewFileImage',
            imageListContent: '#<portlet:namespace />previewImagesContent',
            maxIndex: <%= previewFileCount %>,
    previewFileIndexNode: '#<portlet:namespace />previewFileIndex',
            toolbar: '#<portlet:namespace />previewToolbar'
<h2>Unable to view document</h2>

Liferay.Preview needs options baseImageURL and maxIndex means total page count.


We can also use Jquery Page Flip to make better view

Tip to generate images

for(int i=1;i<= previewFileCount;i++){%>

<img   id="<portlet:namespace />previewFileImage"
src="<%= previewFileURL + "1" %>"


Important Points

  • Liferay have provide document view by default by using PDF box
  • To get better quality view we need to configure Image Magick tool to liferay .
  • To view only PDF documents then we need not to configure open office.
  • To View documents we need to configure open office and we need to start open office service
  • In document view each page converted into one image by PDF processor.
  • If documents are Open office or MS office then first it will be converted into PDF and then it will be converted into images based on number of pages document contains
  • Liferay provide AUI java script template to view documents we can also use JQuery Page Flip to make better view.
  • The following are portlet screen shots

Screen 1:

Screen 2:

Reference Links

Meera Prince


Post a Comment

Recent Posts

Recent Posts Widget

Popular Posts