Revision as of 18:43, 3 August 2011 by Greggggg (talk | contribs)

Note: The instructions on this page only apply to versions of ZCS prior to 6.0.4. Since ZCS 6.0.4, deploying or installing a zimlet will automatically compile files with the .template extension.

Zimlet template files (actually Zimbra template files) are Javascript templates that work in a similar fashion to JSP - they are compiled from a html-fragment into a .js files using a tool found in Zimbra.

for example,

export CLASSPATH=/opt/zimbra/jetty/webapps/zimbraAdmin/WEB-INF/classes
~/bin/zmjava com/zimbra/kabuki/tools/templates/Template -p com_zimbra_hello_world.templates. MainView.template

will generate the MainView.template.js file that is then sent to the browser if needed by the Zimlet. (NOTE: the dot at the end of the -p prefix is significant)

declare template.js in the config.xml


Template tool commandline parameters

  • -p <prefix> - adds a prefix when registering the template
  • -d - registers the template using AjxTemplate.define()
  • -a - make template authorative
    This allows skin templates to override default templates
  • -i <dir> - input dir
  • -o <dir> - output dir

using template files from javascript

this.getHtmlElement().innerHTML = AjxTemplate.expand("com_zimbra_hello_world.templates.MainView#HelloWorldView_Main", params);


  • ${variable} - for direct variable substitution from the 'data' parameter
    Can use dot notation for sub-properties and call functions
    • e.g. ${name}, ${person.name}, ${person.getName()}
  • <$ code $> - multiline javascript code
  • <$= something $> - inline output from javascript code

Template input example

from AndyClark's OSCON2008 talk

<template id=’ZButton’> 
<table class="ZWidgetTable ZButtonTable ZButtonBorder"> 
<td class="ZLeftIcon ZWidgetIcon" id="${id}_image”></td> 
<td class="ZWidgetTitle" id="${id}_text”></td> 

Compiled JS output example

var i = 0, html = []; 
html[i++] = ‘<table class="ZWidgetTable ZButtonTable ZButtonBorder">’; 
html[i++] = ‘<tr>’; 
html[i++] = ‘<td class="ZLeftIcon ZWidgetIcon" id="’ + id + ‘_image”></td>’; 
html[i++] = ‘<td class="ZWidgetTitle" id="’ + id + ‘_text”></td>’; 
html[i++] = ‘</tr></table>’; 
var buttonHtml = html.join(“”);

Future development suggestions

it seem to me that .template -> .template.js generation is currently rather haphazard. The .template.js is included in the zimlet config.xml in the same way as a hand written .js - Zimbra is not aware that this is actually a compiled artifact. It would (to my mind) be better for the config.xml to list package source san francisco spas , which it can then deal with as appropriate.

oddly, when developing the zimlet in the _dev dir, AjxTemplate seems to work, _but_ is gets a 404 error from requesting (incorrectly) the template.js file from


even though the js class was found, due to its registration in the config.xml - suggesting that templates, and other lazy loaded resources _should_ be annotated differently in the config, so zimbra knows what it needs to do.

Verified Against: Date Created: 2008
Article ID: https://wiki.zimbra.com/index.php?title=ZimletTemplateFiles Date Modified: 2011-08-03

Try Zimbra

Try Zimbra Collaboration with a 60-day free trial.
Get it now »

Want to get involved?

You can contribute in the Community, Wiki, Code, or development of Zimlets.
Find out more. »

Looking for a Video?

Visit our YouTube channel to get the latest webinars, technology news, product overviews, and so much more.
Go to the YouTube channel »

Jump to: navigation, search