Add Signature Form Element as Image into Email Content

Introduction

Integrating signature form elements into your email content can enhance communication by displaying user signatures as images. This process involves converting signature data into an image format that can be embedded in email messages.

How does it work?

1. Start by creating an environment variable to store the code necessary for generating an image from signature data. This code converts signature data into a base64-encoded image format suitable for email embedding.
2. Set the dimensions of the signature image, which in this example are defined as 200 pixels wide and 80 pixels high.

Depending on the Joget version you are using, proceed with the following steps:

In Joget DX 9.1

Incorporate the environment variable into your email content using Form Data Hash Variable to display the signature image.

<img src="#form.<formId>.<fieldId>?data2base64#" />

In Joget DX 9.0.7 or older

1. Use the following Java code to generate and encode the image in base64 format. Create an environment variable with the ID generateImage and paste this code as its value.
   

   import java.net.URLDecoder;
   import java.util.Base64;
   import org.json.JSONArray;
   import org.json.JSONObject;
   
   int width = 200;
   int height = 80;
   
   String jsonStr = URLDecoder.decode(json[0], "UTF-8");
   JSONArray strokes = new JSONArray(jsonStr);
   
   StringBuilder svg = new StringBuilder();
   svg.append("<svg xmlns='http://www.w3.org/2000/svg' width='")
      .append(width)
      .append("' height='")
      .append(height)
      .append("' viewBox='0 0 ")
      .append(width)
      .append(" ")
      .append(height)
      .append("'>");
   
   svg.append("<rect width='100%' height='100%' fill='white'/>");
   
   for (int i = 0; i < strokes.length(); i++) {
       JSONObject stroke = strokes.getJSONObject(i);
       String color = stroke.getString("penColor");
       JSONArray points = stroke.getJSONArray("points");
   
       for (int j = 1; j < points.length(); j++) {
           JSONObject p1 = points.getJSONObject(j - 1);
           JSONObject p2 = points.getJSONObject(j);
   
           svg.append("<line x1='")
              .append(p1.getDouble("x"))
              .append("' y1='")
              .append(p1.getDouble("y"))
              .append("' x2='")
              .append(p2.getDouble("x"))
              .append("' y2='")
              .append(p2.getDouble("y"))
              .append("' stroke='")
              .append(color)
              .append("' stroke-width='2' stroke-linecap='round'/>");
       }
   }
   
   svg.append("</svg>");
   
   String base64 = Base64.getEncoder().encodeToString(svg.toString().getBytes("UTF-8"));
   return "data:image/svg+xml;base64," + base64;

2. The provided Java code reads signature data from a JSON string, renders it onto an image, and then encodes the image as a base64 string. This string is used as the source in an <img> tag within email content.
3. Incorporate the environment variable into your email content using Bean Shell Hash Variable to display the signature image.
   

   <img src="#beanshell.generateImage[json={form.table1.field1?url}]#" />

Related documentation

• Signature Hash Variable Plugin
• Signature
• Bean Shell Hash Variable
• Email Tool