Creating node type’s view template in eXoPlatform ECMS

eXo ECMS supports the inline visualization of a lot of file formats. For example let’s see it in action with a PDF file :

For those not yet available, a generic message is displayed, allowing to download the file. Here the view of a ZIP file (in the File Explorer) :

Fortunately, eXo ECMS allows to easily add your own file preview (and even modify the existing ones). Let’s do it with our ZIP file.
The goal is to display the list of file’s names contained in the ZIP file.

All the files that we will create have to be packaged in a JAR and added to the classpath.

Creation of the view template

We will start by creating the view template. It is written in Groovy. You can access to all the node’s properties, and even navigate in the node hierarchy :

<style>
ul.zip-file-list {
	padding: 0 20px;
}
ul.zip-file-list li {
	list-style-position: inside;
    list-style-type: circle;
}
</style>
<%
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>")
	}
	out.println("</ul>")
} finally {
	zis?.close()
}
%>

Here we only iterate on all the ZIP’s files in order to display thier names.
Save it as ZipViewer.gtmpl and add it in the JAR in a folder templates.

Registration of the preview template

Once the view template 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 define the path of the view template :

package org.exoplatform.ecm.dms;

import org.exoplatform.webui.config.annotation.ComponentConfig;
import org.exoplatform.webui.core.UIComponent;

@ComponentConfig(
template = "classpath:templates/ZipViewer.gtmpl"
)
public class ZipViewer extends UIComponent {
}

Note that this class defines the template’s path. In our case templates/ZipViewer.gtmpl.

Then this class needs to be declared in the configuration. This will be done with the org.exoplatform.webui.ext.UIExtensionManager component. Just create a file called configuration.xml in conf/portal in your jar, with the following content :

<?xml version="1.0" encoding="ISO-8859-1"?>
<configuration 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.exoplatform.org/xml/ns/kernel_1_2.xsd http://www.exoplatform.org/xml/ns/kernel_1_2.xsd"
	xmlns="http://www.exoplatform.org/xml/ns/kernel_1_2.xsd">
  <external-component-plugins>
    <target-component>org.exoplatform.webui.ext.UIExtensionManager</target-component>
    <component-plugin>
      <name>Zip File dynamic viewer</name>
      <set-method>registerUIExtensionPlugin</set-method>
      <type>org.exoplatform.webui.ext.UIExtensionPlugin</type>
      <init-params>
        <object-param>
          <name>Zip</name>
          <object type="org.exoplatform.webui.ext.UIExtension">
            <field name="type">
              <string>org.exoplatform.ecm.dms.FileViewer</string>
            </field>
            <field name="rank">
              <int>110</int>
            </field>
            <field name="name">
              <string>Zip</string>
            </field>
            <field name="category">
              <string>FileViewer</string>
            </field>
            <field name="component">
              <string>org.exoplatform.ecm.dms.ZipViewer</string>
            </field>
            <field name="extendedFilters">
              <collection type="java.util.ArrayList">
                <value>
                  <object type="org.exoplatform.webui.ext.filter.impl.FileFilter">
                    <field name="mimeTypes">
                      <collection type="java.util.ArrayList">
                        <value>
                          <string>application/zip</string>
                        </value>
                      </collection>
                    </field>
                  </object>
                </value>
              </collection>
            </field>
          </object>
        </object-param>
      </init-params>
    </component-plugin>
  </external-component-plugins>
</configuration>

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

Your JAR should now contain 3 files :

• templates/ZipViewer.gtmpl
• org/exoplatform/ecm/dms/ZipViewer.class
• conf/portal/configuration.xml

The last step is to add this JAR in the classpath and restart the plaform. You should now see the content of the ZIP when displaying it :