nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Automation Email and HTML/CSS Formatting Issues

John Izquierdo

Hello,

I'm setting up an automation to send a email notification to a group when an specific issue type is created but I'm having issues with the email formatting with HTML/CSS. Only some of the CSS is actually working and other parts aren't.

Specifically the stylizing for the div, img, and hr tags.

Below is my HTML in the Send Email action.

<html>
<head>
<style type="text/css">
.container{
margin: auto;
width: 60%;
padding: 10px;
font-family: Arial;
}
a {
text-decoration: none;
}
img {
height: 35px;
float: right;
}
</style>
</head>

<body>
<div class="container">
<p>{{issue.reporter.displayName}} <strong>created an issue</strong>.</p>

<hr style="border:1px solid red">

<p style="color:grey;">{{project.name}} / <a href="{{issue.url}}" style="color:grey;">{{issue.key}}</a></p>

<h2><a href="{{issue.url}}" style="color: #1963d1;">{{issue.summary}}</a></h2>

<p>
<strong>Description:</strong> {{issue.description}}
<br>
<br>
<strong>Issue Type:</strong> {{issue.issuetype.name}}
<br>
<br>
<strong>Priority:</strong> {{issue.priority.name}}
<br>
<br>
<strong>Created:</strong> {{issue.created.longDateTime}}
<br>
<br>
<strong>Reporter:</strong> {{issue.reporter.displayName}}
</p>

<hr style="border: 1px solid red">

<p style="color:grey;">Powered by Jira <img src="SOME-IMAGE-URL"></p>
</div>
</body>
</html>

According to W3Schools Try It page the result should look like the screenshot below.

But the email I receive looks like...

Accepted answers

John Izquierdo

Looks like the issue is how the Outlook desktop app is rendering the HTML/CSS. OWA seems to render it without issues.

I'm investigating some more to find a fix so that it renders correctly everywhere. I'll post my solution if I find one to possible help anyone else out there.

All comments

John Izquierdo

Looks like the issue is how the Outlook desktop app is rendering the HTML/CSS. OWA seems to render it without issues.

I'm investigating some more to find a fix so that it renders correctly everywhere. I'll post my solution if I find one to possible help anyone else out there.

Nick Maday

@John Izquierdo Your template is awesome!

I tested an email with your code in Classic Outlook and New Outlook desktop apps, as well as OWA. I wasn't able to replicate your exact issue, but I did encounter other rendering issues in Classic Outlook.

In Classic Outlook, all of the CSS styling was stripped and the image was blocked (just the broken image link).

New Outlook and OWA rendered perfectly, though! (Followed in case you find a solution, because most of my org is on Classic, but the logo is just such a nice touch!)

Even though I don't have an answer for you, I wanted to share a couple smart values I tweaked for my instance,

1. Convert UTC time to local

{{issue.created.convertToTimeZone([timezone]).longDateTime}}

Replacing [timezone] with a valid TZ Identifier (such as "America/Chicago") converts UTC to your local timezone. Alternatively, you could replace [timezone] with a nested smart value, such as:

{{issue.created.convertToTimeZone(reporter.timeZone]).longDateTime}}

which would convert UTC to the reporter's timezone.

2. Convert Description to HTML

{{issue.description.html}}

If the description contains special formatting, this will retain the original formatting when sending the email

(2.5/)3. Disable "Convert line breaks to HTML line breaks"

At the bottom of the Send email component, select More Options and deselect Convert line breaks to HTML line breaks.

When descriptions contained more than one paragraph, line breaks were duplicated when using {{issue.description.html}}

John Izquierdo

@Nick Maday Thanks!

I got swamped with work and completely forgot to check back on this and post my updates. I completely missed your recommendation which I will definitely be putting in place.

You might have found a way to stylize it better than what I came up with by now but I did want to share what I ended up using.

Below is the HTML/CSS that I used. Some of the tags are Microsoft Office tags that help render the HTML in Outlook for desktop.

<html>

  <head>
    <style type="text/css">
      table {border-collapse: collapse; margin-left: auto; margin-right: auto; padding: 10px 0px 10px 0px; font-family: Arial;}
      p {padding: 5px 0px 5px 0px}
      img {height: 35px; float: right;}
    </style>
  </head>

  <body>
  <table style="width: 50%;" align="center">
        <tr style="mso-yfti-irow:1">
          <td style="border:none;border-bottom:solid #e6412d 1.5pt;padding:0in 0in 9.0pt 0in">
          <p style="padding:0px;">{{issue.reporter.displayName}} <strong>created an issue</strong>.</p>
          </td>
        </tr>

        <tr>
          <td>
          <p style="color:#808080;">{{project.name}} / <a href="{{issue.url}}" style="color: #808080;text-decoration: none;"><font color="#808080">{{issue.key}}</font></a></p>
          </td>
        </tr>

        <tr>
          <td>
          <h2><a href="{{issue.url}}" style="color: #1963d1; text-decoration: none;">{{issue.summary}}</a></h2>
          </td>
        </tr>

        <tr>
        <td>
          <p><strong>Description</strong>
          <br>{{issue.description.html}}</p>
          </td>
        </tr>

        <tr>
          <td>
          <p><strong>Issue Type:</strong> {{issue.issuetype.name}}</p>
          </td>
        </tr>

        <tr>
          <td>
          <p><strong>Priority:</strong> {{issue.priority.name}}</p>
          </td>
        </tr>

        <tr>
          <td>
          <p><strong>Created:</strong> {{issue.created.fullDate}}</p>
          </td>
        </tr>

        <tr style="mso-yfti-irow:1">
          <td style="border:none;border-bottom:solid #e6412d 1.5pt;">
          <p><strong>Reporter:</strong> {{issue.reporter.displayName}}</p>
          </td>
        </tr>

        <tr>
           <td>
           <p style="color:#808080;"><font color="#808080">Powered by Jira</font> <img src="https://i.imgur.com/IMAGE.png" align="right"></p>
          </td>
        </tr>

    </table>
  </body>
</html>

Here's the preview using the W3S site.

Below is a screenshot of my tests.

Our logo in our signature is a bit weird so it renders pretty large but for everything else it seem to do the trick.

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_editor

Amanda Stahle

@John Izquierdo This post just helped me a TON with trying to figure out how to format an automated email triggered from a workflow.

I have another automated email triggered on a schedule that pulls information from a filter, and using fairly standard HTML, I had no issues with formatting. The workflow one is apparently stripped down to basic HTML. I spent way too long trying to figure out what was going on!

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

cloud

automation

css

html

jira-service-management-cloud

jira-service-management