Zimbra SkillZ: Interact with Zimbra Composer using Zimlets – Signature Template

Interact with Zimbra Composer using Zimlets – Signature Template

Hello Zimbra Friends,

Today Barry de Graaff, Channel Evangelist for Zimbra Synacor, introduces you to the new Zimlet Slot composer. This Zimlet Slot allows you to write Zimlets that interact with Zimbra’s composer component. The composer is based on TinyMCE and is used when writing new emails and when configuring email signatures in Zimbra Preferences.

In this blog, you’ll learn how to write a simple Signature Template Zimlet. This Zimlet provides a globally configured email signature template where all users in an organization can have a uniform signature yet customize their email information.

How the Signature Template Works in Zimbra

 Signature Template button added by Zimlet.

 Signature loaded once button is clicked.

 User fills in the blanks

 Final result when writing an email.

Installing the Zimlet

This Zimlet uses Global Zimlet Configuration as described in https://github.com/Zimbra/zimbra-zimlet-configuration.

To install this Zimlet:

cd /tmp
  wget https://github.com/Zimbra/zimbra-zimlet-signature-template/download/0.0.3/zimbra-zimlet-signature-template.zip
  zmzimletctl deploy /tmp/zimbra-zimlet-signature-template.zip

To make changes to the configuration, get the configuration template:

zmzimletctl getConfigTemplate /tmp/zimbra-zimlet-signature-template.zip > /tmp/myconfig.xml

Review and make changes to /tmp/myconfig.xml using vi or nano and deploy using:

zmzimletctl configure  /tmp/myconfig.xml

The config_template.xml file has the following structure:

<zimletConfig name="zimbra-zimlet-signature-template" version="0.0.1">
    <global>
        <property name="htmlTemplate">PGRpdj48c3BhbiBzdHlsZT0iY29sb3I6ICNlMDNlMmQ7Ij48c3Ryb25nPk5BTUU8L3N0cm9uZz48L3NwYW4+PC9kaXY+PGRpdj48ZW0+PHNwYW4gc3R5bGU9ImNvbG9yOiAjN2U4YzhkOyI+RlVOQ1RJT048L3NwYW4+PC9lbT48YnIvPjxici8+PGltZyBzcmM9Imh0dHBzOi8vczIyLnE0Y2RuLmNvbS80NzYzMjUxMzcvZmlsZXMvZGVzaWduL3N5bmFjb3ItbG9nby0yMDE2LXJnYi5wbmciPjwvaW1nPjwvZGl2Pgo=</property>
    </global>
</zimletConfig>

The htmlTemplate is a base64 encoded HTML template for use with the email signature. You can use an online tool like https://www.base64decode.org/ to encode/decode the HTML template.

Development Notes

Please note that it is not possible to side-load config_template.xml files. So you must always deploy an actual Zimlet to read the configuration properties.

A pre-packed version of the example Zimlet used in this article can be downloaded from https://github.com/Zimbra/zimbra-zimlet-signature-template/releases/download/0.0.3/zimbra-zimlet-signature-template.zip

See: https://github.com/Zimbra/zimbra-zimlet-configuration.

The Zimlet in Preferences->Signatures

The file src/components/more-menu/index.js implements the Signature Template button in Settings->Signatures. The in-code comments explain how it works:

import { createElement, Component } from 'preact';
import { withIntl } from '../../enhancers';
import { withText } from 'preact-i18n';

@withIntl()
@withText({
	title: 'zimbra-zimlet-signature-template.title'
})
export default class MoreMenu extends Component {
	constructor(props) {
		super(props);
		this.zimletContext = props.children.context;

		//Get all zimlets
		const zimlets = this.zimletContext.getAccount().zimlets;

		this.globalConfig = new Map();

		//Get the current zimlet
		const zimlet = zimlets.zimlet.find(
			zimlet => zimlet.zimlet[0].name === 'zimbra-zimlet-signature-template'
		);

		//Add zimlet configuration properties to an ES6 Map
		if (zimlet) {
			const globalConfig = zimlet.zimletConfig[0].global[0].property || [];
			for (let i = 0; i < globalConfig.length; i++) {
				this.globalConfig.set(globalConfig[i].name, window.atob(globalConfig[i].content));
			}
		}
		//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
		//now you can get a property value by doing: this.globalConfig.get('name-of-property')
	}

	//Use this.props.editor.setContent to replace the contents of the composer textarea
	handleClick = e => {
		this.props.getComposer().setContent(this.globalConfig.get('htmlTemplate'));
	};

	render() {
		//Only show the Zimlet in the UI where we want it.

		if (this.props.editorType === 'signature') {
			return (
				<div style="float:right">
					<button
						onClick={this.handleClick}
						type="button"
						class="blocks_button_button blocks_button_regular zimbra-client_settings_subsectionBodyButton"
					>
						{this.props.title}
					</button>
				</div>
			);
		}
	}
}

References

Enjoy the new Zimlet slot & Signature Template Zimlet,

Your Zimbra Friends & Colleagues

, , , , , ,

4 Responses to Zimbra SkillZ: Interact with Zimbra Composer using Zimlets – Signature Template

  1. Minh January 31, 2021 at 12:40 PM #

    There is no file in the github link https://github.com/Zimbra/zimbra-zimlet-signature-template/download/0.0.3/zimbra-zimlet-signature-template.zip. Please re-check.
    Regards,
    Minh.

  2. Hoang Thanh January 31, 2021 at 3:28 PM #

    Could you please re-check the link of zimlet.zip file? There is error message of “Not Found”.

Leave a Reply