PDF Exporter : Customize PDF/WORD Templates


PDF/Word Exporter allows you to create your custom templates for exported file. Templates can be designed using HTML and styled to meet your specific requirements. With the use of this guide, you can easily add certain values from a ticket (such as ticket priority) or a section (such as comments) to your own template. Even your custom fields can be added anywhere in the template.

Follow these steps to add any field, section, or even elements such as a header, footer, or watermark to your template

--

Basic Settings

  • Basic Fields:
    1. Issues Id : ${Issue.issueid}
    2. Issue Summary : ${Issue.summary}
    3. Ticket Creation date and time : ${Issue.ticketCreated}
    4. Ticket type ( story, bug ) : ${Issue.type}
    5. Status (todo, done) : ${Issue.status}
    6. Priority of task( high, medium, low) : ${Issue.priority}
    7. The task has been resolved or not(resolved, unresolved) : ${Issue.resolution}
    8. Labels : ${Issue.label}
    9. Reporter : ${Issue.reporter}
    10. Project of the issue : ${Issue.project}
    11. Assignee : ${Issue.assignee}
    12. Fix Version of the issue : ${Issue.fixVersion}
  • Username of exporter : ${Issue[0].pdfCreator}
  • Export date and time : ${Issue[0].pdfCreated}
  • Description : ${Issue.description} Will export png format images only.
  • Environment of service management ticket: ${Issue.environment}
  • Advanced Fields :
    <#list Issue.advFields as fieldName, fieldValue>
        <tr>
            <td>${fieldName}:</td>
            <td>${fieldValue}</td>
        </tr>
    </#list>

    For using any single advanced field

    ${Issue.advFields["fields name"]}

    Example:

    ${Issue.advFields["Components"]} 
  • All Custom fields ( including user-defined fields)
    <#list customFields as fieldName,fieldValue>
        <tr>
            <td>${fieldName}:</td>
            <td>${fieldValue}</td>
        </tr>
    </#list>

    For using any single custom field

    ${customFields["field name"]}

    Example:

    ${customFields["Rank"]}
  • Attachments

    For each attachment

    Attachment name : ${attachment.getAttachmentName()}

    Attachment Link : ${attachment.getAttachmentLink()}

    Attachment size : ${attachment.getAttachmentSize()}


    Example :

    <#list Issue.attachments as attachment>
        <div>
            <div>
                <img height="100%" src="https://cdn-icons-png.flaticon.com/512/4725/4725488.png" />
                <div>
                    <a href="${attachment.getAttachmentLink()}">${attachment.getAttachmentName()} </a>
                    <span>${attachment.getAttachmentSize()}</span>
                </div>
            </div>
        </div>
        <br />
    </#list>
  • Comments :

    For each comment

    Username of commentator : ${comment.getCommentedBy()}

    Comment date and time : ${comment.getCommentDateTime()}

    Comment’s content : ${comment.getComment()}


    Example :

    <#list Issue.comments as comment>
        <tr>
            <td style="border-bottom:1px solid #ddd;">
                <p>Comment by
                    <span>${comment.getCommentedBy()} : ${comment.getCommentDateTime()}</span>
                </p>
            </td>
        </tr>
        <tr>
            <td>
                <p>${comment.getComment()}</p>
            </td>
        </tr>
        <br />
    </#list>
  • Subtask’s basic details :

    For each subtask

    Link of subtask : ${subtask.getLink()}

    Issue Key : ${subtask.getKey()}

    Subtask summary : ${subtask.getSummary()}

    Subtask Priority : ${subtask.getPriority()}

    Subtask status : ${subtask.getStatus()}


    Example :

    <#list Issue.subtasks as subtask>
        <tr>
            <td> <a href="${subtask.getLink()}"> ${subtask.getKey()} </a> </td>
            <td>
                <p>${subtask.getSummary()}</p>
            </td>
            <td>
                <p>${subtask.getPriority()}</p>
            </td>
            <td>
                <p>${subtask.getStatus()}</p>
            </td>
        </tr>
        <br />
    </#list>
  • Linked Issues :

    Link of issue : ${issue.getLink()}

    Issue Key : ${issue.getKey()}

    Issue summary : ${issue.getSummary()}

    status : ${issue.getStatus()}

    To check if the issue blocks or is blocked by the current issue (blockes, is blocked by, clones, is cloned by) : ${issue.getLinkedIssueOutwardType()}


    Example :

    <#list Issue.linkedIssues as issue>
        <tr>
            <td> <a href="${issue.getLink()}"> ${issue.getKey()} </a> </td>
            <td>
                <p>${issue.getSummary()}</p>
            </td>
            <td>
                <p>${issue.getStatus()}</p>
            </td>
            <td>
                <p>${issue.getLinkedIssueOutwardType()}</p>
            </td>
        </tr>
    </#list>
  • History :

    Change done by : ${history.getAuthorName()}

    Field that was changed : ${history.getFieldsName()}

    Before change value : ${history.getFromString()}

    After change value : ${history.getToString()}


    Example :

    <#list Issue.historyList as history>
        <tr>
            <strong> ${history.getAuthorName()} </strong> updated <strong> ${history.getFieldsName()} </strong>
        </tr>
        <tr>
            <td> ${history.getFromString()} </td>
            <td> ${history.getToString()} </td>
        </tr>
        <hr style="border:none;border-bottom:1px solid #d7e0f0;" />
    </#list>
  • Details for each subtask -
    Same fields as basic fields for each issue ( 1st point)
    <#list Issue.subtasksDetails as subtaskdetail>
    <div style="page-break-before:always;">
        <p><b>[${subtaskdetail.issueid}]</b>${subtaskdetail.summary}</p>
    </div>
        <div>
            <table>
                <tr>
                    <td>Type:</td>
                    <td>${subtaskdetail.type}</td>
                    <td>Status:</td>
                    <td>${subtaskdetail.status}</td>
                </tr>
                <tr>
                    <td>Priority:</td>
                    <td>${subtaskdetail.priority}</td>
                    <td>Resolution:</td>
                    <td>${subtaskdetail.resolution}</td>
                </tr>
                <tr>
                    <td>Affects Version/s:</td>
                    <td>${subtaskdetail.affectsVersion}</td>
                    <td>Fix Version/s:</td>
                    <td>${subtaskdetail.fixVersion}</td>
                </tr>
                <tr>
                    <td Label:</td>
                    <td>${subtaskdetail.label}</td>
                    <td Reporter:</td>
                    <td>${subtaskdetail.reporter}</td>
                </tr>
                <tr>
                    <td Project:</td>
                    <td>${subtaskdetail.project}</td>
                    <td>Assignee:</td>
                    <td>${subtaskdetail.assignee}</td>
                </tr>
            </table>
        </div>
    </#list>
    
  • Worklog section -
    Use this section to get all time tracking details, to use time tracked by tempo timesheet, an inbuilt template is available.
       <#if Issue.visibleObj.getTimeTrackingVisible() == true>
       <p class="heading"><b>Worklog</b></p>
       <table class="heading"><b>Worklog</b></p>
       <tr>
       <th>Started:</th>
       <th>Comments:</th>
       <th>Time Spent:</th>
       </tr>
       <tr>
       <#list Issue.workLogFieldsMap as counter, workLogFields>
       <td>${fieldValue}</tdgt;
       </tr>
       </list>
       <tr>
       <th>Total:</th>
       <#list Issue.totalTimeSpent as fieldName, fieldValue>
       <th>fieldValue:</th>
       </list>
       </tr>
       </table>
    
  • For multiple issues -
    Loop through each issue using <#list Issues as x> and use any of the above fields as x.field_name.
    Example:
    <#list Issues as Issue >
        <p><b>${Issue.issueid}</b> ${Issue.summary} </p>
        <span> Created : ${Issue.ticketCreated} </span>
    </#list>

    Example:

    <p class="heading"><b>Attachments</b></p>
    <#list Issue.attachments as attachment>
        <div>
            <a href="${attachment.getAttachmentLink()}">${attachment.getAttachmentName()} </a>
            <span>${attachment.getAttachmentSize()}</span>
        </div>
    </#list>

Important Settings

  • Only PNG/JPEG images would display in exported pdf/doc.
  • Flexbox does not work for any styling.
  • To add default values in case of null of empty values. ${variable_name!"default_val"} Example:
    ${priority!"priority not defined"}
  • To add Header/ Footer.
    <div class="header">
        <span style="float:left;">${issueid}</span>
        <span style="float:right;">Created by ${pdfCreator} at ${pdfCreated} </span>
    </div>
    <div class="footer">
        <hr />
        <span>This is the footer</span>
    </div>

    Styles:

    div.header {
        display: block;
        position: running(header);
    }
    div.footer{
        display: block;
        position: running(footer);
    }
    @page {
        @top-center { content: element(header) }
    }
    @page{
        @bottom-center { content: element(footer) }
    }
  • To add a watermark (only for pdf) Add a watermark image to the background image for the header div Only use png format for the watermark image.
    div.header{
        background-image: url("watermark-url.png");
        background-repeat: no-repeat;
        background-size:50%;
    }

Example Template

  • <html>
    <head>
        <title>${issueid}</title>
        <style>
        body{
            font-family:'Montserrat',sans-serif !important;
            color:#072B63;
            font-size:12px;
            align-items: center;
        }                   
        div.top_header {
            display: block; text-align: left;
            position: running(header);
        }
        div.footer{
            display: block; text-align: center;
            position: running(footer);
        }
        @page {
            @top-center { content: element(header) }
        }
        @page{
            @bottom-center { content: element(footer) }
        }
        </style>
    </head>
    
    <body>
        <div class="top_header">
        <div>
            <span style="float:left;">${issueid}</span>
            <span style="float:right; text-align:right;">Created by ${pdfCreator} at ${pdfCreated} </span>
        </div >
        <hr />
        </div>
    
        <div class="footer">
            <hr/>
            <span >Powered by MiniOrange</span>
        </div>
    
        <p ><b>[${Issue.issueid}]</b>${summary}</p>
        <span>
        <#if Issue.visibleObj.getCreatedTimeVisible() == true>
            Created : ${Issue.ticketCreated}
        <#if Issue.visibleObj.getUpdatedTimeVisible() == true>
            Updated : ${Issue.ticketUpdated}
        </span>
        <br />
        <div class="div">
        <p class="heading"><b>Details</b></p>
    
        <table cellpadding="0" cellspacing="0" width="100%" style="margin:0;">
            <tr>
                <td >Type:</td> 
                <td>${Issue.type}</td>
                <td >Status:</td>
                <td>${Issue.status}</td> 
            </tr>
            <tr>   
                <td>Priority:</td>
                <td>${Issue.priority}</td>         
                <td>Resolution:</td>
                <td>${Issue.resolution}</td>
            </tr>
            <tr>       
                <td>Label:</td>
                <td>${Issue.label}</td>         
                <td>Reporter:</td>
                <td>${Issue.reporter}</td>       
            </tr>
            <tr>         
                <td>Project:</td>
                <td>${Issue.project}</td>        
                <td>Assignee:</td>
                <td>${Issue.assignee}</td>         
            </tr>
            <tr>            
                <td>Fix Version/s:</td>
                <td>${Issue.fixVersion}</td>        
            </tr>
        </table>
        </div>
        <br />   
            <div class="div">
            <p class="heading"><b>Description</b></p>
            <p> ${Issue.description}</p>
            </div>            
        <br/>   
        <p class="heading"><b>Advance Fields</b></p>
            <table>
                <#list advFields as fieldName, fieldValue>
                    <tr>
                    <td >${fieldName}:</td>
                    <td>${fieldValue}</td>
                    </tr>
                </#list>
            </table> 
        
            <p class="heading"><b>Custom Fields</b></p>
            <table>
                    <#list customFields as fieldName,fieldValue>
                        <tr>
                        <td >${fieldName}:</td>
                        <td>${fieldValue}</td>
                        </tr>
                    </#list>
            </table>  
    
            <p class="heading"><b>Attachments</b></p>
            <#list attachments as attachment>                                      
                <div >
                    <a href="${attachment.getAttachmentLink()}">${attachment.getAttachmentName()} </a>
                    <span>${attachment.getAttachmentSize()}</span>
                </div>                
            </#list>
        
        <br/>   
            <div class="div">
            <p class="heading"><b>Comments</b></p>
            <table>
                <#list comments as comment>
                <tr>
                    <td> Comment by <span >[${comment.getCommentedBy()}] :      
                        ${comment.getCommentDateTime()}</span>                  
                    </td>
                </tr>
                <tr>
                    <td>
                    <p>${comment.getComment()}</p>
                    </td>
                </tr>
                <br/>
                </#list>
            </table>
            </div>
        
            <div class="div">
                <p class="heading"><b>Subtasks</b></p>
                <table>
                    <tr>
                        <th></th>
                        <th> Description </th>
                        <th> Priority </th>
                        <th> Status </th>
                    </tr>
                    <#list subtasks as subtask >
                    <tr>
                        <td> <a href="${subtask.getLink()}"> ${subtask.getKey()}</a> </td>
                        <td> <p>${subtask.getSummary()}</p> </td>
                        <td> <p>${subtask.getPriority()}</p> </td>
                        <td> <p>${subtask.getStatus()}</p> </td>
                    </tr>             
                    </#list>
                </table>
            </div>    
    
            <div class="div">
                <p class="heading"><b>Linked Issues</b></p>
                <table>
                    <tr>
                        <th> </th>
                        <th> Description </th>
                        <th> Status </th>
                        <th> Issue type </th>
                    </tr>
                    <#list linkedIssues as issue >
                        <tr>
                            <td> <a href="${issue.getLink()}">
                                    ${issue.getKey()} </a> </td>
                            <td> <p>${issue.getSummary()}</p> </td>
                            <td> <p>${issue.getStatus()}</p> </td>
                            <td> <p>${issue.getLinkedIssueOutwardType()}</p> </td>
                        </tr>
                    </#list>
                </table>
            </div>
    
            <div class="div">
                <p class="heading"><b>History</b></p>
                <#list historyList as history >
                    <tr>
                        <strong> ${history.getAuthorName()} </strong> updated 
                        <strong> ${history.getFieldsName()} </strong>
                    </tr>
                    <tr>
                        <td> ${history.getFromString()} </td>
                        <td> ${history.getToString()} </td>
                    </tr>           
                </#list>
            </div>
    
        <#-- subtask seperate page -->
            <#list subtasksDetails as subtaskdetail >
                <div style="page-break-before:always;">
                    <p><b>[${subtaskdetail.issueid}]</b>${subtaskdetail.summary}</p>
                </div>
                <div>            
                    <div class="div">
                    <p class="heading"><b>Details</b></p>
    
                    <table>
                        <tr>
                        <td class="attribute_div">Type:</td>
                        <td>${subtaskdetail.type}</td>
                        <td class="attribute_div">Status:</td>
                        <td>${subtaskdetail.status}</td>
                        </tr>
                        <tr>
                        <td class="attribute_div">Priority:</td>
                        <td>${subtaskdetail.priority}</td>
                        <td class="attribute_div">Resolution:</td>
                        <td>${subtaskdetail.resolution}</td>
                        </tr>                                                         
                    </table>
                    </div>                            
                        <div class="div">
                        <p class="heading"><b>Description</b></p>
                        <p> ${subtaskdetail.description}</p>
                        </div>                                
                </div>
            </#list> 
    </body>
    </html>