Setting email headers from Zimlets using the ONSEND event and Redux

Are you looking to add extra headers to emails in Zimbra? This can now be done in Modern UI using Zimlets. In this article we will introduce you to the newly added SendCustomHeaderMessage component and guide you through the use of Redux by means of an example Zimlet.

What are Zimlets?

Zimlets are add-ons that extend the functionality of Zimbra by allowing developers to integrate their own features seamlessly into the Zimbra web client. They are written in JavaScript (React) and can hook into various events, modify UI elements, and perform actions based on user interactions.

Using ONSEND Event and Redux

In this example, we’ll demonstrate how to send emails with additional headers by leveraging the ONSEND event and Redux.

Redux, a predictable state container for JavaScript apps, allows us to manage application state efficiently. We’ll use it to store a variable that tracks whether the user has clicked a menu item.

Based on this variable, we’ll add extra headers to the email using the SendCustomHeaderMessage component, introduced in Zimbra 10.0.9, and the Zimlet event ONSEND.

How to Implement

Before diving into the code, ensure you have the necessary permissions to set custom headers. Run the following commands as the zimbra user:

Once you’ve set up the permissions, load the Zimlet using Sideloader. You can find detailed instructions on how to use Sideloader here.

Exploring the Example Zimlet

After loading the Zimlet, you’ll find it accessible via the menu, as shown below:

Take a closer look at the example Zimlet code to understand how Redux and the SendCustomHeaderMessage component work together to enhance email headers.

Further reading

This Zimlet can be found here: https://github.com/Zimbra/zimbra-zimlet-send-header

Setting headers is also possible in the Classic UI, for an example take a look at: https://github.com/Zimbra-Community/rmail