List View Example (JIRA)
- Mathias Edblom (Unlicensed)
- Boris Berenberg - Atlas Authority (Unlicensed)
- Patrick Cartier (Unlicensed)
Owned by Mathias Edblom (Unlicensed)
Last updated: Dec 10, 2019 by Boris Berenberg - Atlas Authority (Unlicensed)
10 min read
Loading data...
The code will run in a velocity engine and you'll have to make sure your code is well formatted.
Make sure to write your code (HTML) so that most of the common used email clients can render the HTML. The most error prone client is Microsoft Outlook (according to our findings), so make sure to test before you publish any custom theme.
Below you will find an example (the default list view theme):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
th.confluenceTh {border: 1px solid #cccccc;
background: #f5f5f5;
padding: 3px 4px 3px 4px;
text-align: center;}
table.confluenceTable {
border-collapse: collapse;
margin: 5px 0 5px 2px;
width: auto;
}
td.confluenceTd {
border: 1px solid #cccccc;
padding: 3px 4px 3px 4px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>Message Title</title>
</head>
<body style="color: #333; font-family: Arial, sans-serif;">
<table id="background-table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f5f5f5; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt">
<tr>
<td id="header-pattern-spacer" style="padding: 0px; border-collapse: collapse; font-size: 10px; height: 10px; line-height: 10px">
</td>
</tr>
<tr>
<td id="email-content-container" style="padding: 0px; border-collapse: collapse; padding: 0 20px">
<table id="email-content-table" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: separate">
<tr>
<!-- there needs to be content in the cell for it to render in some clients -->
<td style="padding: 0px; border-collapse: collapse; color: #fff; padding: 0 15px 0 16px; height: 15px; background-color: #fff; border-left: 1px solid #ccc; border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 0; border-top-right-radius: 5px; border-top-left-radius: 5px; height: 10px; line-height: 10px; padding: 0 15px 0 16px; mso-line-height-rule: exactly">
</td>
</tr>
<tr>
<td style="border-collapse: collapse; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-top: 0; border-bottom: 0; padding: 0 15px 10px 16px; background-color: #fff">
#if($emailmessage)
<table style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt">
<tr>
<td style="vertical-align: top; width: 100%;">
${emailmessage}
</td>
</tr>
</table>
#end
</td>
</tr>
<tr>
<td style="border-collapse: collapse; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-top: 0; border-bottom: 0; padding: 0 15px 0 16px; background-color: #fff">
</td>
</tr>
<tr>
<td style="border-collapse: collapse; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-top: 0; border-bottom: 0; padding: 0 15px 0 16px; background-color: #fff">
<table id="issuetable" border="0" cellpadding="2" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font: normal 14px/20px Arial, sans-serif">
<thead>
<tr>
#foreach($header in $issueheaders)
<th style="white-space: nowrap; min-width: 80px; text-align: left; vertical-align: top; padding: 7px; font: bold 14px/20px Arial, sans-serif">
$header</th>
#end
</tr>
</thead>
<tbody>
#foreach ($issue in $issues)
<tr id="issuerow${issue.id}" rel="${issue.id}" data-issuekey="${issue.key}">
#foreach ($element in $issue.elements)
<td style="border-collapse: collapse; text-align: left; vertical-align: top; padding: 7px; border-top: 1px solid #ccc">
<div>
#if($includeChange && $element.fieldChangeInfo.originalValue)<span style="background-color: #f1f1f1; text-decoration: line-through;">${element.fieldChangeInfo.originalValue} </span>#end
#if ($element.isEm())<em>#end
#if($element.iconurl)
<img
src="${element.iconurl}"
height="16" width="16" border="0"
alt="${element.description}"
title="${element.description}">
#end
#if($issue.parentKey && $element.getFieldKey().equals("summary"))
#if($includeLinks)
<a href="${baseurl}/browse/${issue.parentKey}" >${issue.parentKey}</a>
#else
${issue.parentKey}
#end
#end
#if($element.getFieldKey().equals("issuekey"))
#if($includeLinks)
<a href="${baseurl}/browse/${issue.key}">${element.name}</a>
#else
<span style="white-space: nowrap;">${element.name}</span>
#end
#elseif($element.getFieldKey().equals("summary"))
#if($includeLinks)
<a href="${baseurl}/browse/${issue.key}">${element.name}</a>
#else
${element.name}
#end
#elseif($element.getFieldKey().equals("status"))
<div style="text-align: center; background-color: #FFF; white-space: nowrap; margin: 0; padding: 1px; border-radius: 3px; display: inline-block; line-height: 99%; #if($element.getType().equals("New")) border: 1px solid #E4E8ED; #elseif($element.getType().equals("In Progress")) border: 1px solid #FFE28C; #elseif($element.getType().equals("Complete")) border: 1px solid #B2D8B9; #else border: 1px solid #ccc; #end">
<span style="background-color: #FFF; border-top: 2px solid #FFF; border-bottom: 2px solid #FFF; border-left: 5px solid #FFF; border-right: 5px solid #FFF; border-radius: 3px; font-size: 11px; font-weight: bold; margin: 0; padding: 0; text-decoration: none; text-transform: uppercase; #if($element.getType().equals("New")) color: #4c74c3; #elseif($element.getType().equals("In Progress")) color: #594300; #elseif($element.getType().equals("Complete")) color: #14892C; #else color: #333; #end">
${element.name}
</span>
</div>
#elseif($element.getFieldKey().equals("labels"))
#if ($element.getInnerElements() && $element.getInnerElements().size() > 0)
#set($count=1)
#set($total=$element.getInnerElements().size())
#foreach($innerelement in $element.innerElements)
<div style="text-align: center; background-color: #f5f5f5; white-space: nowrap; margin: 0; padding: 2px 5px; border-radius: 3px; display: inline-block; line-height: 99%; border: 1px solid #ccc;">
<span style="margin: 0; padding: 0; text-decoration: none; color: #3b73af;">
${innerelement.name}
</span>
</div>
#set($count=$count+1)
#end
#else
<span>${element.name}</span>
#end
#else
#if ($element.getInnerElements() && $element.getInnerElements().size() > 0)
#set($count=1)
#set($total=$element.getInnerElements().size())
#foreach($innerelement in $element.innerElements)
#if($innerelement.iconurl)
<div style="white-space: nowrap; padding-right: 3px;">
<img src="${innerelement.iconurl}"
height="16" width="16" border="0"
alt="${innerelement.name}"
title="${innerelement.name}">
#end
<span>
#if($includeLinks && $innerelement.href)
<a href="${baseurl}${innerelement.href}">${innerelement.name}</a>
#else
<span>${innerelement.name}#if($count<$total && !$innerelement.iconurl), #end</span>
#end
</span>
#if($innerelement.iconurl)
</div>
#end
#set($count=$count+1)
#end
#else
<span #if($element.getName().equals("Completed")) style="color: rgb(61, 178, 127)"
#elseif($element.getName().matches("-(.*)")) style="color: rgb(252, 87, 58)"
#end>${element.name}</span>
#end
#end
#if($element.iconurl)
#end
#if ($element.isEm())</em>#end
</div>
</td>
#end
</tr>
#end
<tr>
<td colspan="100%" style="border-collapse: collapse; text-align: left; vertical-align: top; padding: 7px; border-top: 1px solid #ccc">
Number of issues: ${issuecount}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- there needs to be content in the cell for it to render in some clients -->
<tr>
<td style="padding: 0px; border-collapse: collapse; color: #fff; padding: 0 15px 0 16px; height: 5px; line-height: 5px; background-color: #fff; border-top: 0; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; mso-line-height-rule: exactly">
</td>
</tr>
<tr>
<td style="vertical-align: top; padding: 0px 0px 5px 0px; color: #fff;">
<div style="padding-top: 10px;">
#if ($emailfooter) ${emailfooter} #end
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>