Format the Page

You can store page format settings in your template. The page format is used for preview and printing.

Change the Size of Your Card

To change the size of a predefined template you only have to change the style attribute of the outermost division in the template like shown below.

Adding Fields to Your Card

You can put almost every field onto your card, even custom fields. Most fields are rendered as in the browser by JIRA. Therefore, you may also print your nicely formatted descriptions. You can see a list of available fields in the Help section on the right.

Image Removed

Image Added

All JIRA system fields are available under the variable issue. All custom fields can be accessed by issue.customfield. If a field exists its value is never null but empty. You can check for field existence by using an if-clause. This is only necessary for custom fields if you want to prevent your template to fail when the custom field is renamed or deleted.

{$issue.summary}

${issue.customfield.sprint}

{if $issue.customfield.storyPoints}
    {$issue.customfield.storyPoints} SP
{/if}

{$issue.description|noAutoescape}

Change the Border of Your Card

To change the border of a predefined template you need to adjust the border-division of the card. You may also change the appropriate CSS style at the beginning of the template for more advanced borders.

Image Removed

Image Added

If the border should depend on any value of the issue like the priority or the issue type just use the following:

1. Give the division a new attribute like "issue-type" and use the appropriate value:

   Code Block
   language xml
   <div class="ip-border" issue-type="{$issue.issueTypeNameInt}">

2. Write some CSS rules that depend on the attribute value:

   Code Block

   div[issue-type='Story'] {lb} border-color:#ffd500; {rb} div[issue-type='Bug'] {lb} border-color:#CC0000; {rb} div[issue-type='New Feature'] {lb} border-color:#ff9933; {rb} div[issue-type='Epic'] {lb} border-color:#888620; {rb} div[issue-type='Task'] {lb} border-color:#bfe4ff; {rb} div[issue-type='Sub-task'] {lb} border-color:#009999; {rb} div[issue-type='Improvement'] {lb} border-color:#009900; {rb} div[issue-type='Technical task'] {lb} border-color:#cc0000; {rb}

   Note that you have to use {lb} and {rb} instead of { and }, because { and } cannot be used directly as these are reserved characters in Closure Templates.

Starting from Scratch

If you want to start from scratch, create a new template based on the Blank design. This design only defines some important CSS rules as well as the outermost division. You always need one outermost division with the CSS-class ip-card, otherwise, template rendering will fail.

When designing your template, please be aware that browsers cannot be controlled completely via CSS for printing. You may have to configure the following settings in your browsers print dialog:

• print background colors

• do not print header/footer of a page

• see also how to format the page

The template language is Closure Templates so you may do anything that is possible via this template language.

Look at the useful snippets below or the predefined templates to get an idea of possible designs.

Useful Snippets

Card sizing

Wherever you have boxes for content with padding or borders you should apply the following CSS-rule to make it easier to ensure that the card is not enlarged by your border or padding: 

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

Layout

If you want to place content next to each other, tables are the easiest way:

<style type="text/css">
.ip-left {lb}
    text-align: left;
{rb}

.ip-center {lb}
    text-align: center;
{rb}


.ip-right {lb}
    text-align: right;
{rb}
</style>
 
...
 
<table>
    <tr>
        <td class="ip-left">Left column</td>
        <td class="ip-center">Middle column</td>
        <td class="ip-right">Right column</td>
    </tr>
</table>