Zimbra SkillZ: Zimbra Email Templates Zimlet … It’s Back!

Hi Zimbra Friends, Partners & Customers,

Today’s post is from Barry de Graaff, Channel Evangelist for Zimbra Synacor, and it explains the Email Templates Zimlet. If you used the Email Templates Zimlet in previous versions of Zimbra, you will know how helpful it is … a huge time saver if you send regular,  similar looking emails that have small changes. For example, someone in Finance may send invoices at the end of the month. Now she or he can create an invoice template with all the usual text and put placeholders in the template where the changing data goes. When it is time to send out the invoices, the user simply:

• Composes a new email.
• Inserts the template into the email.
• Replaces the placeholder text.
• Sends the email.

Bam! It’s that easy!

This week’s post gives you the Developers Info, and next week’s post will show users how to use the template.

For Developers: Building a Zimbra Email Template Zimlet

Prerequisites

To follow the steps in this article, you need a Zimbra test server and Zimbra 9 Network Edition. You can set this up in a Virtual Machine in the cloud, or you can install it on your local computer inside VirtualBox/KVM/Parallels etc. If you decide to set it up on your local computer, you need at least an i5 with 16GB of RAM and a SSD. Your test server needs to be accessible over SSH. Here are instructions to set up your Zimbra server: https://blog.zimbra.com/2018/01/install-zimbra-collaboration-8-8-ubuntu-16-04-lts/ Make sure to install the latest patches. Here are instructions on how to install patches at https://wiki.zimbra.com/wiki/Zimbra_Releases

Deploy the Zimlet Sideloader

Deploy and enable the Zimlet Sideloader on your development server. You only have to do this step once.

  yum install zimbra-zimlet-sideloader
  apt install zimbra-zimlet-sideloader
  su - zimbra
  zmmailboxdctl restart

Verify that the Sideloader Zimlet is available and enabled for your Zimbra Class of Service (CoS) by logging into the Admin UI -> Home -> Configure -> Class of Service.

Install Zimlet CLI

You can develop Zimbra Zimlets on any OS supported by NodeJS (https://nodejs.org/en/download/). This article includes Linux commands you can run on CentOS/Fedora/Redhat and Ubuntu. If you run on a different OS, reading these commands should help you understand how to get started.

Zimbra provides a tool called Zimlet CLI that is based on Webpack. It is used for building/packaging your Zimlet and for working with Zimlet templates. Install it on your local computer:

As root:

  yum install nodejs
  apt install nodejs
  npm install -g @zimbra/zimlet-cli

Download and Run the Email Templates Zimlet

Create a folder on your local computer to store the Email Templates Zimlet:

  mkdir templates_zimlet
  cd templates_zimlet
  git clone git@github.com:Zimbra/zimbra-zimlet-email-templates.git
  cd zimbra-zimlet-email-templates
  npm install
  zimlet watch

The output of this command should be:

Compiled successfully!

You can view the application in browser.

Local:            https://localhost:8081/index.js
On Your Network:  https://192.168.1.100:8081/index.js

Visit https://localhost:8081/index.js in your browser and accept the self-signed certificate. The index.js is a packed version of the Email Templates Zimlet. More information about the zimlet command, npm and using SSL certificates can be found in https://github.com/Zimbra/zm-zimlet-guide.

Sideload the Email Templates Zimlet

Log on to your Zimbra development server and make sure that you are seeing the modern UI. Then append /sdk/zimlets to the URL.

Sideload the Email Templates Zimlet by clicking Load Zimlet. The Zimlet is now added to the Zimbra UI in real-time. No reload is necessary.

For a detailed explanation on how things work, checkout the CLI Readme.

Visual Studio Code

Open the folder ~/templates_zimlet/zimbra-zimlet-email-templates in Visual Studio code to take a look at the code in the Email Templates Zimlet. More information on this can be found at: https://github.com/Zimbra/zimbra-zimlet-email-templates.

Implement the Feature

First, implement the Zimlet slot compose-footer-right-btn. This is done in

• ~/templates_zimlet/zimbra-zimlet-email-templates/src/index.js

import { createElement } from 'preact';
import withIntl from './enhancers';
import TemplateOptions from './components/template-options';

export default function Zimlet(context) {
	const { plugins } = context;
	const exports = {};

	exports.init = function init() {
		plugins.register('slot::compose-footer-right-btn', templateBtn);
	};

	const templateBtn = withIntl()(props => {
		return (
			<TemplateOptions
				getMessage={props.getMessage}
				insertAtCaret={props.insertAtCaret}
				subjectInput={props.subjectInput}
				context={context}
			/>
		);
	});
	return exports;
}

It is important to understand that the compose-footer-right-btn Zimlet slot passes on to our Zimlet the getMessage, insertAtCaret prop. We use this getMessage prop to get the composed message and insertAtCaret prop is used to set the template content in the body of composer. This piece of code calls methods from Composer component from Zimbra core when user inserts or saves a template.

this.props.insertAtCaret(msgBody, false);

const msg = this.props.getMessage();

Zimlet slot compose-sender-options-menu

This Zimlet uses the compose-sender-options-menu Zimlet slot. This slot allows a Zimlet developer to get/set the subject and body of the email message a user is composing. The Zimlet slot has the following props:

Enjoy the Zimlet!
Your Zimbra Team