Let’s Send an Email Automatically in the Middle of a Workflow (HTML Email chapter)

 Previous Post: Address embed chapter

• Basic chapter: sending an email with a fixed mail body to a fixed address
• Mail body chapter: changing the mail body of an email using embedded commands
• Address embed chapter: changing the address of an email using embedded commands
• HTML Email chapter: sending an HTML email
• Non-delivery response chapter: troubleshooting when an email has not arrived

With Questetra BPM Suite Version 13.1, it is now possible to send an HTML email using the Throwing Message Intermediate Event (email).

What is HTML Email?

HTML stands for Hyper Text Markup Language, and in simple terms it is a computer language used for making Web pages.

HTML email can be thought of as a form of email that takes advantage of HTML features in the email body to enable visual representations, document structures, and so on.
Specifically, elements enclosed in < and > (called a tag) are written in the character string, and reflect the function of those elements to be displayed.

Below is an example character string.

It’s a Title
The body appears like this
You can highlight partially

I will insert some tags into it.

<h2>It’s a Title</h2>
<p>The body appears like this.<br>
You can <strong>highlight</strong> partially</p>

When it is displayed, it will appear as follows.

As you can see, the written tags themselves do not appear but affect the area where each function is specified.

By the way, the types and functions of tags are so diverse that they will not be covered in this article. Please search the Internet for detailed explanations.

Body (HTML) Settings

We are going to set up an HTML email sending Step using the workflow app that has only a Confirmation Step and an email sending step, like you created in Let’s Send an Email Automatically in the Middle of a Workflow (Basic)). Add the following items as the Data Items.

Data Item Name	Field Name	Data-type	Required	Confirm Step	Description
Title to insert	q_Title	String-type (single line)	No	Editable	Character string to be embedded the Title
Title color	q_Title_Color	String-type (single line)	No	Editable	Specify in hexadecimal
Text to insert	q_Sentence	String-type (multiple lines)	No	Editable	The texts underneath the title

Open the property screen of the Send Step, the Throwing Message Intermediate Event (email), and in the setting field of [Body (HTML)] paste the aforementioned character string with the tags.

<h2>It’s a Title</h2>
<p>The body appears like this.<br>
You can <strong>highlight</strong> partially</p>

In the pasted character string, replace the “It’s a Title” part in between <h2> and </h2> with the expression to embed the “Title to insert” using the Insert reference…

Similarly, replace the part in between <p> and </p> with “Text to insert”. In addition, add codes that specify the character color in <h2> as follows.

<h2 style="color: XXX;">

Replace “XXX” with “Title color” as described above. If you proceed to this point, the character string set in [Body (HTML)] should be as follows.

<h2 style="color: #{#q_Title_Color};">#{#q_Title}</h2>
<p>#{#q_Sentence}</p>

After that, set an address for testing in [To] and the Data Item “Title” in [Subject] and close the settings screen.

Now, let’s test sending an email. Run the [Debug Execution] and enter the following in each Data Item on the Operation screen of the Confirm Step.

• Title: Test
• Title to insert: It’s a Title
• Title color：#1ce61c
• Text to insert: <p>The body appears like this.<br> You can <strong>highlight</strong> partially</p>

Once you have entered the information and finished the Confirmation Step, an email will be delivered to the specified address.

• The value entered in the Data Item Text to insert is recognized as HTML codes
  • Appearing line breaks in the input field are ignored
  • You need to insert <br> where you want the line break, as in the input example
• When you write symbols called special characters (such as< > & ” and consecutive half-width spaces) in a sentence, you need to replace them with the format for displaying them (HTML escape)
  • For example, type & lt; HTML & gt; to display <HTML>
• The value to be entered in “Title text color” is a 6-digit hexadecimal number starting with #
  • If you Google search, for example, ‘#123456’, the color picker tool will be displayed with which you can get the value of the color of your choice

Combining HTML with Plain Text

There are two setting items on the Throwing Message Intermediate Event (email) settings screen: [Body (Plain Text)] and [Body (HTML)].

Body (Plain Text)

Used when sending a plain text email. The characters and symbols you enter will be displayed in the body of the email as they appear in the settings field. Line breaks, etc. will be displayed as they are, and you cannot change the size or color of the characters.

Body (HTML)

Used when sending HTML emails. The characters and symbols you enter are recognized as HTML sources. By inserting tags, you can add various decorations such as character color, font specification, and column structure.

How an HTML email is displayed on the receiving side may differ depending on the email software, smartphone app, or webmail service (Gmail, etc.) that displays the email. This is because the displaying software, etc. supports the HTML standard differently. Also, HTML email cannot be displayed on email clients that do not support HTML email.

Therefore, when using HTML email, it is desirable to write HTML codes that assume the environment of the receiving side. Also, assuming an email client that does not support HTML mail, it is recommended to set not only [Body (HTML)] but also [Body (plain text)]. If both are set, the received email client will display it properly.

• When both [Body (HTML)] and [Body (plain text)] is set, the email will be sent with its content-Type as multipart/alternative.

Creating HTML source

1. Handwrite the source

First, let’s create a simple document email for the purpose of understanding HTML.

Let’s open your text editor and start writing…I don’t think so, it’s too hard. So let’s use tools for it. Go searching for “online HTML editor” on the internet and find an appropriate online editor to use.

On the document creation screen, create a document in the same way as Microsoft Word or other word processors. When you are done, use the “View / Download / Copy HTML Source (Code)” menu to get the HTML source code.

You paste the obtained code as it is in [Body (HTML)] of a [Throwing Message Intermediate Event (email)], to send it as an HTML email.

2. Utilizing a Template

Sophisticated HTML emails, such as those sent to you for advertising emails, have fairly advanced HTML coding. To design such source code from scratch you will require specialized knowledge and skills.

So let’s use a template available on the internet. Go searching for “HTML email template” and get an appropriate template. If the site that provides the template has an editing function, use it to complete your HTML email source code. When you get the completed source code, set it in [Body (HTML)].

Utilizing String-type multiple-lines

When setting the Throwing Message Intermediate Event (email), there is a limit of 100,000 characters including the To, Cc, Bcc, Subject, and Body. Since an HTML email has a large number of characters, it is better to set the HTML source in a String-type multiple-lines Data Item and embed it in the body (HTML).

Prepare a String-type multiple lines Data Item and insert an expression that refers to the Data Item in [Body (HTML)] of the [Throwing Message Intermediate Event (email)]. Enter the completed source code to the String-type Data Item while Operating the Step.

Utilizing Update Data

You can automate inputting to String-type Data Items by using a [Update Data]. Select the String-type Data Item in [Data Item] and set the obtained source code in [Value or Expression].

Also, It is also possible to rewrite the contents of the outgoing email that will be sent for each Process. Prepare the necessary Data Items and insert an expression that refers to those Data Items in the appropriate place of the source code set in [Update Data]. With this, the emails to be sent will be composed with the values entered into the Data Items.

• You can use the following functions in the Update Data to automatically correct the value entered in String-type multiple-lines
  • HTML escape
    • e.g. #{#escaper.escapeHtml(#q_string1)}
  • Line break
    • e.g. #{#joiner.splitJoin(#q_string2, ‘<br>’)}

3. Utilizing Add-ons (Professional)

If your Questetra BPM Suite is Professional edition, you can install and use the add-on [Email-HTML String, Create SimpleNotice] to automatically generate an HTML source.

• Email-HTML String, Create SimpleNotice

Prepare Data Items for data insertion, such as Magazine Title, summary text, link button display text, publisher name, etc., and a Data Item to store the completed HTML source. Set the reference expression on the add-on settings screen respectively.

The HTML email sent will look like this:

Next is Non-delivery response chapter