Details View Example (JIRA Service Desk)
- 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)
25 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 email 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 details 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 class="jira" style="color: #333; font-family: Arial, sans-serif; font-size: 12px;">
<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">
#foreach ($issue in $issues)
<tr>
<td style="padding: 0px; border-collapse: collapse; padding: 0px 20px">
<table cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt">
<tr>
<td style="vertical-align: top; padding: 0px 0px 5px 0px;">
<div style="padding-top: 5px;">
</div>
</td>
</tr>
</table>
</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 class="email-content-rounded-top mobile-expand" 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 class="email-content-main mobile-expand wrapper-special-margin" style="border-collapse: collapse; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-top: 0; border-bottom: 0; padding: 0px 15px 5px 16px; background-color: #fff;">
<table class="keyvalue-table" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt">
<tr>
<td style="vertical-align: top; font-size: 12px;">
#if($emailmessage)
${emailmessage}
#end
</td>
</tr>
</table>
<table class="keyvalue-table" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt">
#set ($i = 0)
#foreach ($element in $issue.elements)
<tr>
<th style="color: #707070; font: normal 14px/20px Arial, sans-serif; text-align: left; vertical-align: top; padding: 2px 15px 2px 0px">
<div style="white-space: nowrap;">
#set ($j = 0)
#foreach($header in $issueheaders)
#if($j == $i) $header #end
#set ($j = $j + 1)
#end
</div>
</th>
<td style="border-collapse: collapse; font: normal 14px/20px Arial, sans-serif; padding: 2px 0 2px 5px; vertical-align: top">
<div style="white-space: nowrap;">
#if($includeChange && $element.fieldChangeInfo.originalValue)<span style="background-color: #f1f1f1; text-decoration: line-through; margin-right: 5px;">${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($element.getFieldKey().equals("issuekey"))
#if($includeLinks)
<a href="${baseurl}/servicedesk/customer/portal/${issue.portalId}/${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}/servicedesk/customer/portal/${issue.portalId}/${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>
</tr>
#set ($i = $i + 1)
#end
</table>
</td>
</tr>
<!-- there needs to be content in the cell for it to render in some clients -->
<tr>
<td class="email-content-rounded-bottom mobile-expand" 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>
</table>
</td>
</tr>
#end
<tr>
<td style="vertical-align: top; padding: 10px 0px 5px 0px;">
#if($emailfooter) ${emailfooter} #end
</td>
</tr>
</table>
</body>
</html>