I have a few fields in my issue that I want to put in a table in the body of the outgoing mail. Currently, I use this: Field 1: {{issue.fields.field_1}} Field 2: {{issue.fields.field_2}} This works, but is ugly. I want to format these fields in a table, like this (header row, borders and grid): Field name Value Field 1some-value-1 Field 2 some-value-2 I tried to use table formatting elements (table,tr,th,td) but the result is ugly. Also, nowhere in the documentation (here), do they mention if one can add CSS into the mail body. Anyone?

@Amir Katz (Outseer) It does support styling, I generally use it this way Issue {{issue.key}} Assignee {{assignee.displayName}} Reporter {{reporter.displayName}} Thanks

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; } } }

Sending mail via Jira automation - does it support CSS?

Amir Katz (Outseer)

I have a few fields in my issue that I want to put in a table in the body of the outgoing mail.

Currently, I use this:

Field 1: {{issue.fields.field_1}}

Field 2: {{issue.fields.field_2}}

This works, but is ugly.

I want to format these fields in a table, like this (header row, borders and grid):

Field name	Value
Field 1	some-value-1
Field 2	some-value-2

I tried to use table formatting elements (table,tr,th,td) but the result is ugly.

Also, nowhere in the documentation (here), do they mention if one can add CSS into the mail body.

Anyone?

Accepted answers

Vedant Kulkarni_Trundl

@Amir Katz (Outseer) It does support styling, I generally use it this way

<table>
<tr style="text-align:left">
<th style="text-align:left">Issue</th>
<td><a href="{{issue.url}}" target="_blank" >{{issue.key}}</a></td>
</tr>
<tr style="text-align:left">
<th style="text-align:left">Assignee</th>
<td>{{assignee.displayName}}</td>
</tr>
<tr style="text-align:left">
<th style="text-align:left">Reporter</th>
<td>{{reporter.displayName}}</td>
</tr>
</table>

Thanks

Amir Katz (Outseer)

Thanks a lot to @Gideon Nolte _Eficode_ and @Vedant Kulkarni_Trundl who steered me in the right direction.

The reason I was getting unaligned table rows is because there is a checkbox in the mail action in automation that says 'Convert line breaks to HTML line breaks' and is On by default.

Once I set it to Off, the table works as designed - see screenshot.

All comments

Vedant Kulkarni_Trundl

@Amir Katz (Outseer) It does support styling, I generally use it this way

<table>
<tr style="text-align:left">
<th style="text-align:left">Issue</th>
<td><a href="{{issue.url}}" target="_blank" >{{issue.key}}</a></td>
</tr>
<tr style="text-align:left">
<th style="text-align:left">Assignee</th>
<td>{{assignee.displayName}}</td>
</tr>
<tr style="text-align:left">
<th style="text-align:left">Reporter</th>
<td>{{reporter.displayName}}</td>
</tr>
</table>

Thanks

Amir Katz (Outseer)

Thanks, but there are 2 problems.

First, I forgot to mention that I need borders and grid on the table.

Second, this is what I get when I implemented your suggestion. #1 is the non-table, #2 is the table:

2022-11-21 15_47_43-Window.png

What I need is two columns and a header row, like I described in my original question.

Gideon Nolte _Eficode_

Hi @Amir Katz (Outseer)

This seems to work for me - even though the line height is still not looking great, to say the least :

<table style="border-collapse: collapse">

  <tr>

    <th style="height: 1.5em;padding: 0px 1em;text-align: left;border: 1px solid #ddd;"><b>Company</b></th>

    <th style="height: 1.5em;padding: 0px 1em;text-align: left;border: 1px solid #ddd;"><b>Contact</b></th>

    <th style="height: 1.5em;padding: 0px 1em;text-align: left;border: 1px solid #ddd;"><b>Country</b></th>

  </tr>

  <tr>

    <td style="height: 1.5em;padding: 0px 1em;text-align: left;border: 1px solid #ddd;"> Alfreds Futterkiste </td>

    <td style="height: 1.5em;padding: 0px 1em;text-align: left;border: 1px solid #ddd;"> Maria Anders </td>

    <td style="height: 1.5em;padding: 0px 1em;text-align: left;border: 1px solid #ddd;"> Germany </td>

  </tr>

  <tr>

    <td style="height: 1.5em;padding: 0px 1em;text-align: left;border: 1px solid #ddd;"> Centro comercial Moctezuma </td>

    <td style="height: 1.5em;padding: 0px 1em;text-align: left;border: 1px solid #ddd;"> Francisco Chang </td>

    <td style="height: 1.5em;padding: 0px 1em;text-align: left;border: 1px solid #ddd;"> Mexico </td>

  </tr>

</table>

It's a pain to write, but style tags seem to get ignored, so no luck with classes. Also there does not seem to be any stylesheet linked by default from which you could draw Atlassian's styles. I would suggest using an editor like vscode, atom, notepad++, etc. in order to get their benefits, but be aware that formatting help such as multi-line style attributes seem to cause A4J to wrap the whole thing in a p-tag. Causing it to render as text.

Hope this helped.

Greetings
Gideon

Amir Katz (Outseer)

Thanks a lot to @Gideon Nolte _Eficode_ and @Vedant Kulkarni_Trundl who steered me in the right direction.

The reason I was getting unaligned table rows is because there is a checkbox in the mail action in automation that says 'Convert line breaks to HTML line breaks' and is On by default.

Once I set it to Off, the table works as designed - see screenshot.

Amir Katz (Outseer)

2022-11-27 12_50_37-Window.png

Pieter Wouter Hartog

CSS style classes are supported with email formatting, but you do need to make the email body a complete HTML document like this:


<html>
 <head>
 <style>
        .field {font-size: 100%;
                font-weight: bold;}
        .from {font-size: 100%;
                color: red;
        background-color: lightpink;
        text-decoration-line: line-through;}
        .to {font-size: 100%;
               color: green;
               background-color: lightgreen;}
         </style>
 </head>
 <body>
 <p>
        Issue <a href="{{issue.url}}">{{issue.key}} - {{issue.summary}}</a> was updated
        </p>
 <p>
        The following changes were made:
        </p>
 <ul>
        {{#if (exists(changelog.assignee))}}
         <li>
                <span class="field">{{changelog.assignee.field}}</span> changed from 
                <span class="from">{{changelog.assignee.fromString}}</span> to 
                <span class="to">{{changelog.assignee.toString}}</span>
        </li>
        {{/}}
        {{#if (exists(changelog.Resource Group))}}
        <li>
                <span class="field">{{changelog.Resource Group.field}}</span> changed from 
                <span class="from">{{changelog.Resource Group.fromString}}</span> to 
                <span class="to">{{changelog.Resource Group.toString}}</span>
       </li>
        {{/}}
         </ul>
 </body>
</html>

Welcome!

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

Quick Links

Find more posts tagged with

cloud

jira-software

jira-software-cloud

automation