Creating attractive emails with HTML tables in Nintex

Often, our clients ask to receive emails using data compiled from SharePoint lists.

Using the Nintex “Build String” shape, along with a notification, workflows can be created that iterate through lists compiling the information for an email.

This post will go over how to create a table styled with inline CSS and mention some of the common mistakes people run into while building HTML emails in Nintex.

Nintex, Habanero

The above is an example of an easy-to-read email with data compiled from a SharePoint list.

At Habanero, the process we will follow is:

  1. Get a list of the items we want to include in the table
  2. Create the header and columns of the table
  3. Iterate through the rows of the list in order to create rows in the table
  4. Close out the table and email the content

Before we start creating a workflow, two tips:

  • CSS styling should be done in the td tags rather than the tr tags.  Some email clients, including outlook, do not implement css completely. I’ve found that including styling in the td tags provides the best results.
  • Remove whitespace from the html that is written.  All newline characters and unnecessary whitespace should be removed because we’ve found that it isn’t always ignored and shows up as newlines in the resulting email. Forgetting to remove whitespace is a common mistake that’s easily overlooked.

* Download the site workflow and related list template.

So, in a workflow, it looks like this:

Nintex, Habanero

Step 1: Start the table

Drop a build string action into your workflow, and start the table. A tool that supports building out the table is the Real-time HTML Editor.

Nintex, Habanero

With the whitespace removed, becomes:

Step 2: Iterate through the desired items in the list and add them to the rows in the table

There are four parts to this step. The first part is to query the list for a group of items and put them into a collection.

Nintex, Habanero

The second step is to iterate through these items in a For Each loop.

Nintex, Habanero

Step 3: Take the data and capture related data

Nintex, Habanero

And lastly, take all the information and put it into a table. In order to build the table in the string, and not overwrite the string with a single row, the string variable needs to be included at the beginning of the build string for each row that’s added. It’s highlighted in yellow.

Nintex, Habanero

Step 4: Close out the table and email the content

Close table by adding a close table tag to the build string.

And finally, email the string!

Nintex, Habanero

This workflow can be implemented using a site workflow or a list workflow. For it to run at regular intervals, such as once a week or month, a site workflow makes the most sense. If these emails should be sent when items change on the list, a list workflow would be appropriate.

Stories say it best.

Are you ready to make your workplace awesome? We're keen to hear what you have in mind.

Interested in learning more about the work we do?

Explore our culture and transformation services.

Our commitment to reconciliation

Learn how Habanero is responding to the Truth and Reconciliation Calls to Action as a settler-owned company operating on Indigenous territories across what is now called Canada.

Read about our commitment