Creating a file viewer

eXo Platform supports the inline visualization for many file formats. For example, let's see the display of PDF file:

For those not yet available, one message will be displayed that requires you to download it. Here is the view of a ZIP file:

However, eXo Platform allows you to create a new file viewer to read one file format, for example, ZIP files. Assuming that you want to display the list of files contained in the ZIP file, do as follows:

  1. Create a Maven project, for example, named zip-viewer, with the below structure:

  2. Create the view template by editing the resources/templates/ZipViewer.gtmpl. Here, you only need to iterate all the ZIP files to display their names:

    ul.zip-file-list {
        padding: 0 20px;
    ul.zip-file-list li {
        list-style-position: inside;
        list-style-type: circle;
    import java.util.zip.ZipEntry
    import java.util.zip.ZipInputStream
    import org.exoplatform.webui.core.UIComponent
    def uiParent = uicomponent.getParent()
    def originalNode = uiParent.getOriginalNode()
    def contentNode = originalNode.getNode("jcr:content")
    def zis;
    try {
        zis = new ZipInputStream(contentNode.getProperty("jcr:data").getStream())
        ZipEntry ze
        out.println("<ul class=\"zip-file-list\">")
        while ((ze = zis.getNextEntry()) != null) {
          out.println("<li>" + ze.getName() + "</li>")
    } finally {
  3. Open the java/org/exoplatform/ecm/dms/ZipViewer.java file. Once the view template is ready, it has to be registered and linked to the ZIP file type. The first step for registering the template is to create a simple class which extends UIComponent and to define the view template's path. Note that this class defines the template's path, that is, templates/ZipViewer.gtmpl in this case.

    package org.exoplatform.ecm.dms;
    import org.exoplatform.webui.config.annotation.ComponentConfig;
    import org.exoplatform.webui.core.UIComponent;
    template = "classpath:templates/ZipViewer.gtmpl"
    public class ZipViewer extends UIComponent {
  4. Edit the resources/conf/portal/configuration.xml file where the class is declared by the org.exoplatform.webui.ext.UIExtensionManager component.

    <?xml version="1.0" encoding="ISO-8859-1"?>
        xsi:schemaLocation="http://www.exoplatform.org/xml/ns/kernel_1_2.xsd http://www.exoplatform.org/xml/ns/kernel_1_2.xsd"
          <name>Zip File dynamic viewer</name>
              <object type="org.exoplatform.webui.ext.UIExtension">
                <field name="type">
                <field name="rank">
                <field name="name">
                <field name="category">
                <field name="component">
                <field name="extendedFilters">
                  <collection type="java.util.ArrayList">
                      <object type="org.exoplatform.webui.ext.filter.impl.FileFilter">
                        <field name="mimeTypes">
                          <collection type="java.util.ArrayList">

    This configuration links the org.exoplatform.ecm.dms.ZipViewer component to the application/zip mimetype.

  5. Update the pom.xml file that declares dependencies of the classes imported in the ZipViewer.java file.

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  6. Build the zip-viewer project using the command: mvn clean install.

    Your JAR (zip-viewer/target/zip-viewer-1.0-SNAPSHOT.jar) should now contain 3 files:

    • templates/ZipViewer.gtmpl

    • org/exoplatform/ecm/dms/ZipViewer.class

    • conf/portal/configuration.xml

  7. Put this .jar file into the eXo Platform package.

    • $PLATFORM_TOMCAT_HOME/lib (in Tomcat).

    • $PLATFORM_JBOSS_HOME/standalone/deployments/platform.ear!/lib (in JBoss).

  8. Restart the server. The content of a ZIP file is now displayed as below:

Copyright ©. All rights reserved. eXo Platform SAS
blog comments powered byDisqus