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?

Community
Products
Jira
Questions
Sending mail via Jira automation - does it support CSS?

Sending mail via Jira automation - does it support CSS?

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?

3 answers

2 accepted

1 vote

Answer accepted

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.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

2022-11-27 12_50_37-Window.png

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

1 vote

Answer accepted

@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

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

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.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

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

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Like • Amir Katz (Outseer) likes this

0 votes

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>

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Forums

Product Q&A

Community resources

Support

Top groups

Community resources

Support

Learn

Community resources

Support

Events

Community resources

Support

Sending mail via Jira automation - does it support CSS?

3 answers

2 accepted

Suggest an answer

Was this helpful?

Thanks!

TAGS

Community showcase

Atlassian Community Events

Forums

Product Q&A

Community resources

Support

Top groups

Community resources

Support

Learn

Community resources

Support

Events

Community resources

Support

Sending mail via Jira automation - does it support CSS?

3 answers

2 accepted

Suggest an answer

Was this helpful?

Thanks!

TAGS

Community showcase

Atlassian Community Events

Welcome to the new Atlassian Community