Skip to main content
Skip table of contents

Design Guide

Format the Page

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

format_page.png

Adjust page format settings

Safari does not support issue template format settings. You have to configure format, orientation or margins in the print dialog of Safari.

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.

size_of_card.png

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.

Screenshot from 2024-04-09 16-42-58.png

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.

Examples

CODE
{$issue.summary}

Prints the summary of the issue.

CODE
${issue.customfield.sprint}

Prints the value of the custom field "Sprint". Note that the field must exist, otherwise an error will be thrown.

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

Prints the value of the custom field "Story Points" if such a field exists.

CODE
{$issue.description|noAutoescape}

If your rendered field contains any html you need to set the noAutoescape print directive to correctly render your field

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.

Screenshot from 2024-04-09 16-44-58.png

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:

    XML
    <div class="ip-border" issue-type="{$issue.issueTypeNameInt}">

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

    CODE
    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

  • you can also 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: 

CODE
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:

CODE
<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>
JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.