Difference between revisions of "Zimlet Developers Guide:Templates"

(Overview)
 
(46 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 +
{{BC|Community Sandbox}}
 +
__FORCETOC__
 +
<div class="col-md-12 ibox-content">
 +
= Zimlet Developers Guide: Templates =
 +
{{KB|{{Unsupported}}|{{ZCS 8.0}}|{{ZCS 7.0}}|}}
 +
{{Archive}}
 +
{{warning|1=You are looking at legacy Zimlet documentation. For Zimbra Modern UI Zimlet development go to: https://wiki.zimbra.com/wiki/DevelopersGuide#Zimlet_Development_Guide.}}
 
{| cellspacing="0" cellpadding="5" style="border: 1px solid rgb(153, 153, 170); margin: 0pt 0.5em 0.5em 0pt; float: none; background-color: rgb(249, 249, 255);"
 
{| cellspacing="0" cellpadding="5" style="border: 1px solid rgb(153, 153, 170); margin: 0pt 0.5em 0.5em 0pt; float: none; background-color: rgb(249, 249, 255);"
 
|[[Image:zdg-6-menu-icon-zimbra.jpg|20px]]
 
|[[Image:zdg-6-menu-icon-zimbra.jpg|20px]]
|[[ZCS 6.0:Zimlet Developers Guide:Introduction|Introduction]]
+
|[[Zimlet Developers Guide:Introduction|Introduction]]
 
|style="border-left: 1px solid rgb(153, 153, 170);"|[[Image:zdg-6-menu-icon-green-flag.png|20px]]
 
|style="border-left: 1px solid rgb(153, 153, 170);"|[[Image:zdg-6-menu-icon-green-flag.png|20px]]
|[[ZCS 6.0:Zimlet Developers Guide:Getting Started|Getting Started]]
+
|[[Zimlet Developers Guide:Getting Started|Getting Started]]
 
|style="border-left: 1px solid rgb(153, 153, 170);"|[[Image:zdg-6-menu-icon-terminal.png|20px]]
 
|style="border-left: 1px solid rgb(153, 153, 170);"|[[Image:zdg-6-menu-icon-terminal.png|20px]]
|[[ZCS 6.0:Zimlet Developers Guide:Dev Environment Setup|Dev Environment Setup]]
+
|[[Zimlet Developers Guide:Dev Environment Setup|Dev Environment Setup]]
 
|style="border-left: 1px solid rgb(153, 153, 170);"|[[Image:zdg-6-menu-icon-gear.png|20px]]
 
|style="border-left: 1px solid rgb(153, 153, 170);"|[[Image:zdg-6-menu-icon-gear.png|20px]]
 +
|[[Zimlet Developers Guide:Developing Zimlets|Developing Zimlets]]
 +
|style="border-left: 1px solid rgb(153, 153, 170);"|[[Image:zdg-6-menu-icon-advanced.jpg|20px]]
 
|
 
|
 +
 
     {|
 
     {|
     |[[ZCS 6.0:Zimlet Developers Guide:Developing Zimlets|Developing Zimlets]]
+
     |[[Zimlet Developers Guide:Advanced Concepts|Advanced Concepts]]
 +
    |-
 +
    |[[Zimlet Developers Guide:Application Context|Application Context]]
 +
    |-
 +
    |'''Templates'''
 
     |-
 
     |-
     |[[ZCS 6.0:Zimlet Developers Guide:Proxy Servlet Setup|Proxy Servlet Setup]]
+
     |[[Zimlet Developers Guide:Java and JSP|Java & JSP]]
 
     |-
 
     |-
     |[[ZCS 6.0:Zimlet Developers Guide:Firefox and Firebug|Firefox and Firebug]]
+
     |[[Zimlet Developers Guide:Portal|Portal]]
 
     |-
 
     |-
     |'''Templates'''
+
     |[[Zimlet Developers Guide:Zimlet Tab|Zimlet Tab]]
 
     |-
 
     |-
     |[[ZCS 6.0:Zimlet Developers Guide:Troubleshooting|Troubleshooting]]
+
     |[[Zimlet Developers Guide:Internationalization|Internationalization]]
 
     |}
 
     |}
  
 
|style="border-left: 1px solid rgb(153, 153, 170);"|[[Image:zdg-6-menu-icon-library.jpg|20px]]
 
|style="border-left: 1px solid rgb(153, 153, 170);"|[[Image:zdg-6-menu-icon-library.jpg|20px]]
|[[ZCS 6.0:Zimlet Developers Guide:Zimlet API Specifications|API Specifications]]
+
|[[Zimlet Developers Guide:Zimlet API Specifications|API Specifications]]
 
|style="border-left: 1px solid rgb(153, 153, 170);"|[[Image:zdg-6-menu-icon-checkbox.jpg|20px]]
 
|style="border-left: 1px solid rgb(153, 153, 170);"|[[Image:zdg-6-menu-icon-checkbox.jpg|20px]]
|[[ZCS 6.0:Zimlet Developers Guide:Example Zimlets|Example Zimlets]]
+
|[[Zimlet Developers Guide:Example Zimlets|Example Zimlets]]
 
|}
 
|}
 
  
 
== Overview ==
 
== Overview ==
  
As you start writing user interfaces for your zimlet (for example, in the form of dialogs), you'll start writing more and more HTML code. Simple HTML code can be written in JavaScript in your zimlet. For example, this is the HTML code that displays a simple table:
+
As you start writing user interfaces for your zimlet (for example, dialogs), you'll start writing more and more HTML code. HTML code can be written within your zimlet JavaScript. For example, this is HTML code that displays a table:
  
 
<pre>
 
<pre>
Line 52: Line 65:
 
</pre>
 
</pre>
  
As your pages get more advanced, keeping track of escaping the double-quotes and making sure your HTML code is properly formatted, to name a few challenges, makes this method of integrating HTML with JavaScript more difficult to manage.
+
As your HTML code gets more advanced, keeping track of escaping the double-quotes and making sure your HTML code is properly formatted (just to name a few challenges) makes this method of integrating HTML with JavaScript more difficult to manage.
 
 
That's where Templates come in. Templates provide a mechanism to write HTML code in a file and compile that code into JavaScript to be used with your zimlet. This allows you to separate the HTML presentation logic from the zimlet application code, making it easier to write HTML for your zimlets.
 
  
 +
That's where Templates come in. Templates provide a mechanism to write HTML code in a "template file" and compile that code into JavaScript to be used with your zimlet. This allows you to separate the HTML presentation logic from the zimlet JavaScript application code, making it easier to write HTML for your zimlets.
 +
 
== Template Life Cycle ==
 
== Template Life Cycle ==
  
Line 67: Line 80:
 
</ol>
 
</ol>
  
This section will walk through the creation of a Template for an example zimlet called "com_zimbra_simpletemplate".
+
This section will walk through the creation of a Template for an example zimlet named "com_zimbra_simpletemplate".
  
 
=== Creating the Template ===
 
=== Creating the Template ===
  
This stage involves writing the HTML code for the template in the <code>.template</code> file (i.e. the "Template File"). The Template File basically looks like an HTML file but with some dynamic capabilities. The HTML code in the Template File should be wrapped in a <code><template></code> tag and have a template ID specified. The Template File should be placed in a "templates" directory below the zimlet base directory.
+
This stage involves writing the HTML code for the template in the <code>.template</code> file (i.e. the "Template File"). The Template File basically looks like an HTML file but with some dynamic capabilities. The HTML code in the Template File should be wrapped in a <code><template></code> tag. In that <code><template></code>, you will specify a template ID. The Template File should be placed in a "templates" directory below the zimlet base directory.
 +
 
 +
The following example show creating a Template File with one template with id "Simple".
  
 
==== Example ====
 
==== Example ====
Line 81: Line 96:
 
</pre>
 
</pre>
 
</li>
 
</li>
<li>Create a "template directory:
+
<li>Create a "templates" directory:
 
<pre>
 
<pre>
 
mkdir templates
 
mkdir templates
 
</pre>
 
</pre>
 
</li>
 
</li>
<li>Create a file named "Simple.template".</li>
+
<li>Create a file named "Simple.template". This is the template file.</li>
 
<li>Open the file and insert the following text:
 
<li>Open the file and insert the following text:
 
<pre>
 
<pre>
Line 100: Line 115:
 
</pre>
 
</pre>
 
</li>
 
</li>
<li>Save the file. You now have created the template.</li>
+
<li>Save the file. You now have created the template file "Simple.template" and given it a template ID of "Simple".</li>
 
</ol>
 
</ol>
 +
 +
==== Multiple Templates ====
 +
 +
You can include more than one template is a Template File by including more than one set of <code><template></code> definitions. Each template must have a unique id. The following shows two templates (one named "Simple1" and the second "Simple2"). These can be defined in the same Template File.
 +
 +
<pre>
 +
<template id="Simple1">
 +
...
 +
</template>
 +
<template id="Simple2">
 +
...
 +
</template>
 +
</pre>
  
 
=== Compiling the Template ===
 
=== Compiling the Template ===
  
The Template needs to be compiles before being used in your zimlet. Compiling converts the HTML code into JavaScript so the zimlet can call the template. This stage is often the most troublesome part of using Templates. To that end, we are including a link to a Zimlet Template Generator utility. '''Note: this utility is provided in early-access form and is provided without support at this time.'''
+
The Template File (<code>.template</code>) needs to be compiled before being used in your zimlet. Compiling converts the template HTML code into JavaScript so the zimlet can call the template. Compilation will generate a <code>.template.js</code> file. This is the file to include as reference in the Zimlet Definition File <code><include></code>. See [[Zimlet_Developers_Guide:Templates#Including_the_Template|Including the Template]] for more information.
  
==== Example ====
+
==== Automatic Compilation ====
 +
 
 +
Automatic compilation is available with Zimbra Collaboration Suite 6.0.5. When you deploy your zimlet, all Template Files (<code>.template</code>) are compiled into JavaScript automatically.
 +
 
 +
Note: You still need to include the compiled Template File (<code>.template.js</code>) with an <code><include></code> reference in the Zimlet Definition File. See [[Zimlet_Developers_Guide:Templates#Including_the_Template|Including the Template]] for more information.
 +
 
 +
==== Manual Compilation ====
 +
 
 +
This stage is often the most troublesome part of using Templates. To that end, we are including a link to a Zimlet Template Generator utility (written using ant). '''Note: this utility is provided in early-access form and is provided without support at this time.'''
 +
 
 +
===== Example =====
  
 
<ol>
 
<ol>
<li>Download the Zimlet Template Generator utility: [[Media:zimlet-template-generator-v0-9.zip|zimlet-template-generator-v0-9.zip]]</li>
+
<li>Download the Zimbra Template Compiler utility: [http://files.zimbra.com/docs/zimlet/zcs/6.0/zimbra-template-compiler-v0-9-4.zip zimbra-template-compiler-v0-9-4.zip]</li>
<li>Unzip the package to obtain the ant <code>build.xml</code> file.</li>
+
<li>Unzip the package to obtain the ant <code>build.xml</code> file
 +
''Note: You can run <code>ant help</code> for usage.
 +
''</li>
 
<li>Using ant, call this buildfile with the following arguments:
 
<li>Using ant, call this buildfile with the following arguments:
 
<pre>
 
<pre>
ant -Dzimlet.name=com_zimbra_simpletemplate -Dtemplate.name=Simple.template -D-Dtemplate.dir=/opt/my/path/to/com_zimbra_simpletemplate/templates
+
ant -Dtemplate.name=Simple.template -Dtemplate.dir=/opt/my/path/to/com_zimbra_simpletemplate/templates -Dtemplate.namespace=com_zimbra_simpletemplate.templates
 
</pre>
 
</pre>
 
{| cellpadding="5" cellspacing="0" border="1" width="70%"
 
{| cellpadding="5" cellspacing="0" border="1" width="70%"
 
|style="background-color:#ffffcc;" width="15%"|'''Argument'''
 
|style="background-color:#ffffcc;" width="15%"|'''Argument'''
 +
|style="background-color:#ffffcc;"|'''Required/Optional'''
 
|style="background-color:#ffffcc;"|'''Description'''
 
|style="background-color:#ffffcc;"|'''Description'''
|-
 
|zimlet.name
 
|The name of the zimlet. For example, <code>com_zimbra_simpletemplate</code>
 
 
|-
 
|-
 
|template.name
 
|template.name
 +
|Required
 
|The name of the template file. For example, <code>Simple.template</code>
 
|The name of the template file. For example, <code>Simple.template</code>
 
|-
 
|-
 
|template.dir
 
|template.dir
|The directory path to the template file location. This path can be absolute or relative to where the ant buildfile is run. For example, <code>/opt/my/path/to/the/zimlet/file</code>
+
|Required
 +
|The directory path to the template file location. This path can be absolute or relative to where the ant buildfile is run. For example, <code>/opt/my/path/to/the/template/file</code>.
 +
|-
 +
|template.namespace
 +
|Required
 +
|The name of the template namespace. For a zimlet, you can use a combination of the zimlet name and the sub-directory where the template is located. For example, <code>com_zimbra_simpletemplate.templates</code>
 +
|-
 +
|template.compiler
 +
|Optional
 +
|Specifies the template compiler to use. Valid values are '''<code>classic</code>''' (for ZCS 6.0.3 or earlier) and '''<code>commons</code>''' (for ZCS 6.0.4 or later). Defaults to <code>commons</code>.
 +
|-
 +
|zimbra.home.dir
 +
|Optional
 +
|The Zimbra home directory (i.e. where Zimbra is installed). Defaults to <code>/opt/zimbra</code>.
 
|}
 
|}
 +
 
</li>
 
</li>
<li>The compiled Template File "Simple.template.js" will be created next to the "Simple.template" file.</li>
+
<li>The compiled Template File "Simple.template.js" will be created next to the "Simple.template" file in the "templates" directory.</li>
 
</ol>
 
</ol>
  
 
=== Including the Template ===
 
=== Including the Template ===
  
Not that your template is compiled, you need to include that file with your zimlet. To do this, in the Zimlet Definition File, you should add an <code><include></code> element.
+
Now that your template is compiled, you need to include that file with your zimlet. To do this, in the Zimlet Definition File (for example, <code>com_zimbra_simpletemplate.xml</code>), you should add an <code><include></code> element that references the compiled Template File. The path of this include is relative to your zimlet directory.
  
 
For example:
 
For example:
 
<pre>
 
<pre>
<include>templates/Simple.template.js</include>
+
<include>templates/Tab.template.js</include>
 
</pre>
 
</pre>
  
See [[ZCS_6.0:Zimlet_Developers_Guide:Zimlet_Definition_File_Reference|Zimlet Definition File Reference]] for more information on the Zimlet Definition File and the <code><include></code> element.
+
[[Image:template-directory-structure.jpg]]
 +
 
 +
See [[Zimlet_Developers_Guide:Zimlet_Definition_File_Reference|Zimlet Definition File Reference]] for more information on the Zimlet Definition File and the <code><include></code> element.
  
 
=== Calling the Template ===
 
=== Calling the Template ===
  
After you have packaged and deployed your zimlet (note: be sure to include the "templates" directory in your package), from the Zimlet Handler Object, you can use JavaScript to call the template and retrieve the HTML code:
+
After you have packaged and deployed your zimlet (note: be sure to include the "templates" directory in your Zimlet Package), from the Zimlet Handler Object, you can use JavaScript to call the template and retrieve the HTML code:
  
 
<pre>
 
<pre>
Line 152: Line 207:
 
</pre>
 
</pre>
  
The syntax for the name of the template is: {zimlet-name}.{templates-dir}.{template-name}#{template-id}
+
Note: The syntax for the name of the template is: {template.namespace}.{template-name}#{template-id}
  
 
== Dynamic Elements ==
 
== Dynamic Elements ==
  
You can use dynamic elements with the template to call JavaScript or to act on JavaScript objects. When calling the template, data can be optionally passed using an array. That data can be accessed inside of the template using data namespace and <code>"<$= $>"</code> syntax.
+
You can use dynamic elements within a template to call JavaScript or to act on JavaScript objects. When calling the template, data can be optionally passed using a object literal. That data can be accessed inside of the template using the data namespace and <code>"<$= $>"</code> syntax.
  
For example, in your template (before compilation,) you have:
+
For example, in your template (before compilation,) you have the following text:
 
<pre>
 
<pre>
 
The phone number is <$=data.phone$>. Lines are open 24/7.
 
The phone number is <$=data.phone$>. Lines are open 24/7.
 
</pre>
 
</pre>
  
When calling the template, you should include the phone data:
+
When calling the template, you should include the phone data (in a object literal) to be used in the template dynamically:
 
<pre>
 
<pre>
 
var dataArray = {phone: "123-456-7890"};
 
var dataArray = {phone: "123-456-7890"};
Line 183: Line 238:
 
Do something multi-line:
 
Do something multi-line:
 
<$
 
<$
var s = AjxImg.getImageHtml("Telephone")
+
AjxImg.getImageHtml("Telephone")
// do something
+
// do something next line
// do something
+
// do something next line
// do something
+
// do something next line
 
$>
 
$>
 
</pre>
 
</pre>
Line 193: Line 248:
  
 
<ul>
 
<ul>
<li>[[ZCS_6.0:Zimlet_Developers_Guide:Examples:Simple_Dialog_with_Template|Simple Dialog using a Template]]</li>
+
<li>[[Zimlet_Developers_Guide:Examples:Simple_Dialog_with_Template|Simple Dialog using a Template]]</li>
 +
<li>[[Zimlet_Developers_Guide:Internationalization#Accessing_Resource_Properties|Internationalization > How to access i18n properties from a template]]</li>
 +
<li>[[Zimlet_Developers_Guide:Examples:Tab_Template|Tab using a Template]]</li>
 
</ul>
 
</ul>
  
  
  
{{Article Footer|Zimbra Collaboration Suite 6.0|12/22/2009}}
+
{{Article Footer|Zimbra Collaboration Server 7.0|12/22/2009}}
 +
 
 +
 
 +
[[Category:Developers]]
 +
[[Category:Zimlets]]
 +
[[Category:ZCS 7.0]]
 +
[[Category:ZCS 6.0]]

Latest revision as of 06:04, 17 July 2021

Zimlet Developers Guide: Templates

   KB 3255        Last updated on 2021-07-17  




0.00
(0 votes)
Warning: You are looking at legacy Zimlet documentation. For Zimbra Modern UI Zimlet development go to: https://wiki.zimbra.com/wiki/DevelopersGuide#Zimlet_Development_Guide.
Zdg-6-menu-icon-zimbra.jpg Introduction Zdg-6-menu-icon-green-flag.png Getting Started Zdg-6-menu-icon-terminal.png Dev Environment Setup Zdg-6-menu-icon-gear.png Developing Zimlets Zdg-6-menu-icon-advanced.jpg
Advanced Concepts
Application Context
Templates
Java & JSP
Portal
Zimlet Tab
Internationalization
Zdg-6-menu-icon-library.jpg API Specifications Zdg-6-menu-icon-checkbox.jpg Example Zimlets

Overview

As you start writing user interfaces for your zimlet (for example, dialogs), you'll start writing more and more HTML code. HTML code can be written within your zimlet JavaScript. For example, this is HTML code that displays a table:

<table cellpadding="2" cellspacing="0" border="0" width="100%">
  <tr>
    <td colspan="2">
    This is a sample table HTML code...
    </td>
  </tr>
</table>

If you want to use this HTML in your zimlet, you can use an Array to generate the code:

var html = new Array();
var i = 0;
html[i++] = "<table cellpadding=\"2\" cellspacing=\"0\" border=\"0\" width=\"100%\"><tr><td colspan=\"2\">";
html[i++] = "This is a sample table HTML code...";
html[i++] = "</td></table>";
return html.join("");

As your HTML code gets more advanced, keeping track of escaping the double-quotes and making sure your HTML code is properly formatted (just to name a few challenges) makes this method of integrating HTML with JavaScript more difficult to manage.

That's where Templates come in. Templates provide a mechanism to write HTML code in a "template file" and compile that code into JavaScript to be used with your zimlet. This allows you to separate the HTML presentation logic from the zimlet JavaScript application code, making it easier to write HTML for your zimlets.

Template Life Cycle

The life cycle of a template involves these stages:

  1. Creating the Template
  2. Compiling the Template
  3. Including the Template
  4. Calling the Template

This section will walk through the creation of a Template for an example zimlet named "com_zimbra_simpletemplate".

Creating the Template

This stage involves writing the HTML code for the template in the .template file (i.e. the "Template File"). The Template File basically looks like an HTML file but with some dynamic capabilities. The HTML code in the Template File should be wrapped in a <template> tag. In that <template>, you will specify a template ID. The Template File should be placed in a "templates" directory below the zimlet base directory.

The following example show creating a Template File with one template with id "Simple".

Example

  1. Browse to your zimlet base directory:
    cd com_zimbra_simpletemplate
    
  2. Create a "templates" directory:
    mkdir templates
    
  3. Create a file named "Simple.template". This is the template file.
  4. Open the file and insert the following text:
    <template id="Simple">
      <table cellpadding="2" cellspacing="0" border="0" width="100%">
        <tr>
          <td colspan="2">
          This is a sample table HTML code...
          </td>
        </tr>
      </table>
    </template>
    
  5. Save the file. You now have created the template file "Simple.template" and given it a template ID of "Simple".

Multiple Templates

You can include more than one template is a Template File by including more than one set of <template> definitions. Each template must have a unique id. The following shows two templates (one named "Simple1" and the second "Simple2"). These can be defined in the same Template File.

<template id="Simple1">
...
</template>
<template id="Simple2">
...
</template>

Compiling the Template

The Template File (.template) needs to be compiled before being used in your zimlet. Compiling converts the template HTML code into JavaScript so the zimlet can call the template. Compilation will generate a .template.js file. This is the file to include as reference in the Zimlet Definition File <include>. See Including the Template for more information.

Automatic Compilation

Automatic compilation is available with Zimbra Collaboration Suite 6.0.5. When you deploy your zimlet, all Template Files (.template) are compiled into JavaScript automatically.

Note: You still need to include the compiled Template File (.template.js) with an <include> reference in the Zimlet Definition File. See Including the Template for more information.

Manual Compilation

This stage is often the most troublesome part of using Templates. To that end, we are including a link to a Zimlet Template Generator utility (written using ant). Note: this utility is provided in early-access form and is provided without support at this time.

Example
  1. Download the Zimbra Template Compiler utility: zimbra-template-compiler-v0-9-4.zip
  2. Unzip the package to obtain the ant build.xml file Note: You can run ant help for usage.
  3. Using ant, call this buildfile with the following arguments:
    ant -Dtemplate.name=Simple.template -Dtemplate.dir=/opt/my/path/to/com_zimbra_simpletemplate/templates -Dtemplate.namespace=com_zimbra_simpletemplate.templates
    
    Argument Required/Optional Description
    template.name Required The name of the template file. For example, Simple.template
    template.dir Required The directory path to the template file location. This path can be absolute or relative to where the ant buildfile is run. For example, /opt/my/path/to/the/template/file.
    template.namespace Required The name of the template namespace. For a zimlet, you can use a combination of the zimlet name and the sub-directory where the template is located. For example, com_zimbra_simpletemplate.templates
    template.compiler Optional Specifies the template compiler to use. Valid values are classic (for ZCS 6.0.3 or earlier) and commons (for ZCS 6.0.4 or later). Defaults to commons.
    zimbra.home.dir Optional The Zimbra home directory (i.e. where Zimbra is installed). Defaults to /opt/zimbra.
  4. The compiled Template File "Simple.template.js" will be created next to the "Simple.template" file in the "templates" directory.

Including the Template

Now that your template is compiled, you need to include that file with your zimlet. To do this, in the Zimlet Definition File (for example, com_zimbra_simpletemplate.xml), you should add an <include> element that references the compiled Template File. The path of this include is relative to your zimlet directory.

For example:

<include>templates/Tab.template.js</include>

Template-directory-structure.jpg

See Zimlet Definition File Reference for more information on the Zimlet Definition File and the <include> element.

Calling the Template

After you have packaged and deployed your zimlet (note: be sure to include the "templates" directory in your Zimlet Package), from the Zimlet Handler Object, you can use JavaScript to call the template and retrieve the HTML code:

var html = AjxTemplate.expand("com_zimbra_simpledialogtemplate.templates.Simple#Simple");		

Note: The syntax for the name of the template is: {template.namespace}.{template-name}#{template-id}

Dynamic Elements

You can use dynamic elements within a template to call JavaScript or to act on JavaScript objects. When calling the template, data can be optionally passed using a object literal. That data can be accessed inside of the template using the data namespace and "<$= $>" syntax.

For example, in your template (before compilation,) you have the following text:

The phone number is <$=data.phone$>. Lines are open 24/7.

When calling the template, you should include the phone data (in a object literal) to be used in the template dynamically:

var dataArray = {phone: "123-456-7890"};
canvas.innerHTML = AjxTemplate.expand("com_zimbra_simpledialogtemplate.templates.Simple#Simple", dataArray);

The resulting HTML code will be:

The phone number is 123-456-7890. Lines are open 24/7.

You can also inline JavaScript code in your template (before compilation) using the "<$= $>" syntax for a single-line and "<$ $>" for multi-line.

Do something single-line <$=AjxImg.getImageHtml("Telephone")$>.
Do something multi-line:
<$
AjxImg.getImageHtml("Telephone")
// do something next line
// do something next line
// do something next line
$>

Useful Links


Verified Against: Zimbra Collaboration Server 7.0 Date Created: 12/22/2009
Article ID: https://wiki.zimbra.com/index.php?title=Zimlet_Developers_Guide:Templates Date Modified: 2021-07-17



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