Style email content dynamically

This article demonstrates how to change the look and feel of an email notification based on the content of the message. This enables you use a single form to define a message that uses different colors and styles based on the value of a form property. When a message sender selects a given property value, the message content is dynamically styled to match the desired design.

We’ll use this technique to display a red background when the “Severity” property is set to “High”, a yellow background when the “Severity” property is set to “Medium”, and a green background when the “Severity” property is set to “Low”. 

To apply this technique, you work with the source view of the email message editor and apply CSS styling to your email message content. You’ll want to have basic familiarity with CSS before you work through this example.

If you'd like to work with the example in this article, you can import the attached communication plan into your system.

Step 1 - Edit the email message content in source view

Locate the communication plan and form that you want to work with (or import the example attached to this article), and then edit the Email/Fax/Push Message content in the email message editor.

• Click "Show Source" to view the email message content in source view. 

TIP: When you're working with your own content, you may want to format the HTML source to make it easier to work with. You can copy this content into an external tool such as freeformatter.com, format it, and then paste it back into the source view.

Step 2 - Locate the UUID of the Severity property

While working in the source view, locate the UUID of the Severity property, and copy it somewhere handy. We’ll use this value later when we style the message.

In this example the UUID of the priority property is:

${2fcc8130-c934-45d4-825c-0bb032e6530d}

Here's what the Severity property looks like in the message:

And, here's what the Severity UUID looks like in source view:

Step 3 - Use a <div> tag to define the styled area

Use a <div> tag to enclose the area that you want to style based on the value of the Severity property, and set the ID of the <div> tag to be the UUID of the Severity property. In this example, the <div> tag looks like this:

<div id="${2fcc8130-c934-45d4-825c-0bb032e6530d}">...</div>

When an email notification is generated, this UUID is replaced with the value selected by the message sender. In our example, the resulting HTML in the generated email will be one of the following:

<div id="High">...</div>

<div id="Medium">...</div>

<div id="Low">...</div>

We'll use this <div> tag to style the content of the table cell that displays the severity. When an email notification is generated, the table cell will be formatted according to the styles defined for "High", "Medium", or "Low". We'll define these styles in the next step.

Step 4 - Create styles for "High", "Medium", and "Low"

Next, we'll define the styles for elements tagged with the ID "High", "Medium", or "Low". These values correspond to the choices listed in the Severity property combo box and will be present in the generated email once the Severity property is replaced with the selected value.

We'll define these styles by including a <style> section at the top of the email message content and defining CSS within this section. 

Add the following code to the email content:

<style>
   #High 
   {
      background-color: red;
   }
   #Medium 
   {
      background-color: yellow;
    }
   #Low
   {
      background-color: greenyellow;
    }
</style>

Step 5 - Preview the message

You can now preview the message and see how it looks when you select different values for the Severity property. You'll notice that the background color of the Severity table cell changes color based on the selection. 

You may also want to preview the form without selecting any value for the Severity property. This allows you to see how the message appears when the email notification is viewed in an email reader that does not support CSS, or if the message sender does not choose a value for the Severity property.

• Click Save Changes to save your changes exit the message editor.
• Click View Form.
• Select a value for the Severity property, and then click Preview Message.