You are viewing limited content. For full access, please sign in.

Question

Question

What's possible with style for HTML emails? I can't get my table to render correctly.

Workflow
Updated July 1, 2022
asked on June 29, 2022 • Show version history

I can't seem to get the HTML to appear like I want, something like this (ignore the tokens):

What I have above is what I have produced in Visual Studio Code and shown in the browser with live server, so I know I have the syntax correct. This is what I have:

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table
      style="background-color: #ffffe0; color: black; border: 1px solid #bdb76b"
    >
      <tr style="background-color: darkgreen; color: white">
        <th style="background-color: darkgreen; color: white">Scanner</th>
        <th style="background-color: darkgreen; color: white">Start Date</th>
        <th style="background-color: darkgreen; color: white">End Date</th>
        <th style="background-color: darkgreen; color: white">Documents</th>
      </tr>
      <tr style="background-color: darkgreen; color: white">
        <td>%(_scanner_fullNames#[1]#)</td>
        <td>%(_tc__oneMonthAgo)</td>
        <td>%(_tc__today)</td>
        <td>%(_resultCount#[1]#)</td>
      </tr>
      <tr style="background-color: darkgreen; color: white">
        <td>%(_scanner_fullNames#[2]#)</td>
        <td>%(_tc__oneMonthAgo)</td>
        <td>%(_tc__today)</td>
        <td>%(_resultCount#[2]#)</td>
      </tr>
    </table>
  </body>
</html>

I see that in-line CSS seems to work because I was able to change the font color to blue previously. A style tag in the head was ignored. For the table, tr, td, and th, there does not seem to be a way allow a way to color the cells, borders, etc. 

The email I send doesn't look good without styling. How can I get my email to look more like my first screen shot? 

0 0

Answer

SELECTED ANSWER
replied on June 29, 2022

This doesn't make for a pretty view inside Workflow, but try removing all of the line breaks.  Even though HTML ignores line breaks, the editor in Workflow doesn't necessarily treat the entire contents of the text box as HTML.  I've noticed that I often get extra line breaks in the emails from Workflow unless I make my HTML look like an ugly run-on sentence: 

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><table><tr><th style="background-color: darkgreen; color: white; vertical-align: top;">Scanner</th><th style="background-color: darkgreen; color: white; vertical-align: top;">Start Date</th><th style="background-color: darkgreen; color: white; vertical-align: top;">End Date</th><th style="background-color: darkgreen; color: white; vertical-align: top;">Documents</th></tr><tr><td>%(_scanner_fullNames#[1]#)</td><td>%(_tc__oneMonthAgo)</td><td>%(_tc__today)</td><td>%(_resultCount#[1]#)</td></tr><tr><td>%(_scanner_fullNames#[2]#)</td><td>%(_tc__oneMonthAgo)</td><td>%(_tc__today)</td><td>%(_resultCount#[2]#)</td></tr></table></body></html>

 

2 0

Replies

replied on June 29, 2022

Maybe this will help...

I have dozens of Workflow processes that send emails with HTML tables.  Here's an example of one - this sends an email of the current month's staff birthdays to the HR Deparment.

Does a database query (in this case, it gets a list of employees from the HR database, returning their employee ID, their name, and the month and day or their date of birth).

Then it creates a multi-value token named %(Form Details).

Then it iterates through each returned result from the database, and appends a record to the %(Form Details) based on whether the iteration is even or odd (in order to make color-banded rows).

If it is even, it adds this to the token: 

<tr style="background-color:#bcbcbc;"><td>%(CycleThroughEachReturnedrow_employee_id)</td><td>%(CycleThroughEachReturnedrow_name_preferred)</td><td>%(CycleThroughEachReturnedrow_birth_month)</td><td>%(CycleThroughEachReturnedrow_birth_day)</td></tr>

 

If it is odd, it adds this to the token: 

<tr style="background-color:white;"><td>%(CycleThroughEachReturnedrow_employee_id)</td><td>%(CycleThroughEachReturnedrow_name_preferred)</td><td>%(CycleThroughEachReturnedrow_birth_month)</td><td>%(CycleThroughEachReturnedrow_birth_day)</td></tr>

 

You can see those are identical other than the background-color.

 

Then, if the number of records returned from the database query is greater than 0, it sends an email.  Here's the body of that email: 

<table border="1" style="table-layout:fixed; width:600; border-collapse:collapse;"><font size="2"><b><tr style="background-color:blue; color:white;"><td width="100">Employee ID</td><td width="300">Employee Name</td><td width="100">Month</td><td width="100">Day</td></tr></b>%(Form Details#[ ]##"HTML"#)</font></table>

 

You can see that the email just makes the header row of the table, and then includes the %(Form Details) token with values separated by spaces and formatted as HTML.  The HTML formatting is essential since the %(Form Details) token has the HTML tags within it.

 

End result in Outlook looks like this:

1 0
View 2 previous replies
replied on June 29, 2022 • Show version history

Thanks, Matt. That might come in handy down the line; for now, I'll make my table from scratch without tokens, just doing one thing at a time. I got my table to finally show up, and I am not sure what I did differently, but there it is. Now the vertical alignment is messed up. I'll be making a separate post on this. And I thought the HTML would be the easy and fun part of this WF!

Here is the result I got when putting vertical-align as "top". How can I fix it? 

 

 

Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table>
      <tr>
        <th style="background-color: darkgreen; color: white; vertical-align: top;">Scanner</th>
        <th style="background-color: darkgreen; color: white; vertical-align: top;">Start Date</th>
        <th style="background-color: darkgreen; color: white; vertical-align: top;">End Date</th>
        <th style="background-color: darkgreen; color: white; vertical-align: top;">Documents</th>
      </tr>
      <tr>
        <td>%(_scanner_fullNames#[1]#)</td>
        <td>%(_tc__oneMonthAgo)</td>
        <td>%(_tc__today)</td>
        <td>%(_resultCount#[1]#)</td>
      </tr>
      <tr>
        <td>%(_scanner_fullNames#[2]#)</td>
        <td>%(_tc__oneMonthAgo)</td>
        <td>%(_tc__today)</td>
        <td>%(_resultCount#[2]#)</td>
      </tr>
    </table>
  </body>
</html>

 

 

0 0
SELECTED ANSWER
replied on June 29, 2022

This doesn't make for a pretty view inside Workflow, but try removing all of the line breaks.  Even though HTML ignores line breaks, the editor in Workflow doesn't necessarily treat the entire contents of the text box as HTML.  I've noticed that I often get extra line breaks in the emails from Workflow unless I make my HTML look like an ugly run-on sentence: 

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><table><tr><th style="background-color: darkgreen; color: white; vertical-align: top;">Scanner</th><th style="background-color: darkgreen; color: white; vertical-align: top;">Start Date</th><th style="background-color: darkgreen; color: white; vertical-align: top;">End Date</th><th style="background-color: darkgreen; color: white; vertical-align: top;">Documents</th></tr><tr><td>%(_scanner_fullNames#[1]#)</td><td>%(_tc__oneMonthAgo)</td><td>%(_tc__today)</td><td>%(_resultCount#[1]#)</td></tr><tr><td>%(_scanner_fullNames#[2]#)</td><td>%(_tc__oneMonthAgo)</td><td>%(_tc__today)</td><td>%(_resultCount#[2]#)</td></tr></table></body></html>

 

2 0
replied on June 29, 2022

Thanks, I'll try that. I am slowly making progress. Do you have a favorite online tool or method to quickly get the html all down to one line? 

0 0
replied on June 29, 2022

I just use Notepad++ when I need to edit stuff outside of Workflow or Forms (I use it a lot).  To edit your code to one line I did a "Find and Replace" with the option selected for "Extended Search Mode" which lets you include break codes.  Then I search for "\r\n        " (carriage return, new line, 8 spaces) and replaced it with "" (empty string), hit Replace All; changed it to 7 spaces and did Replace All again changed it to 6 spaces and did Replace All again and kept going until I was out of spaces.  I probably could have just removed the line breaks and left the spaces, but that didn't occur to me until just now. wink

0 0
replied on July 1, 2022

This worked pretty well for me for compressing it. 

https://www.textfixer.com/html/compress-html-compression.php

0 0
replied on June 29, 2022

Using Outlook to read emails? What part does not render quite right?

0 0
replied on June 29, 2022 • Show version history

I can't get the table to show up at all. I have been searching posts like crazy here, but I can't even get the table to show up. I tried a sample from another post, no tables lines, borders, or anything. This pretty close to what it looks like.

 

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...