The HTML reports give you a lot of possibilities and flexibility. You can generate and customize any type of report with the help of the SIL™ Template language . Basically, as its name suggests, you are building your report based on a html template and injecting your data using Simple Issue Language™ (SIL) syntax.
Configuring SIL Reporting Gadget
First you need to add the SIL Reporting Gadget to your dashboard. To do that, click Add new gadget. In the Add new gadget dialog, click Load all gadgets. Search for the SIL Reporting Gadget and add it to your dashboard.
To see more instructions about adding a gadget to your dashboard see Atlassian documentation.
The configuration screen is only available to Jira Administrators and System Administrators.
To configure the gadget you have to select the SIL™ script file and add the default values for the parameters used in the selected script.
The parameters will be passed into the program using the argv variable. The values will be available using a construct like argv["parameter_name"] or argv[position]. For the above example, the project can be retrieved using argv["project"] or argv[0].
First the gadget will run with the default values for the parameters, if the values for those parameters were specified in the gadget configuration.
Once you save the gadget configuration, the report will be displayed.
The template script needs to have the ".tpl" extension in order for the report to be executed correctly.
If you want to return information about another project without having to configure the gadget, all you have to do is add a field for the project using one of the routines for creating fields from gadget routines. After that you will be able to set parameter in the parameter section and run the report with the new value.
Examples
Opened vs Closed Issues Report
The report is a bar chart showing the number of opened issues vs number of resolved issues for a given list of projects.
$!
string [] project = argv[ 0 ];
number resolvedIssues = countIssues( "project = " + project + " AND status in (Done, Closed, Resolved)" );
number openedIssues = countIssues( "project = " + project + " AND status not in (Done, Closed, Resolved)" );
number totalIssues = resolvedIssues + openedIssues;
number prResolved = round(resolvedIssues/totalIssues * 100 , 2 );
number prOpened = round(openedIssues/totalIssues * 100 , 2 );
$
<html>
<head>
<style type= "text/css" >
body{
background:#ededeb;
}
.report{
font-family: 'Source Sans Pro' , sans-serif;
color: white;
box-shadow: none;
display: -webkit-inline-box;
}
.report ul{
margin:0px 30px 10px 0px;
padding: 0 ;
list-style-type:none;
font-size:11px;
font-weight: 400 ;
line-height:20px;
}
.report_box{
width: 85%;
background: #42526e;
float : left;
box-shadow: -1px 0px rgba( 255 , 255 , 255 , 0.07 );
cursor: pointer;
transform: scale( 1 );
transition-property: transform,background;
transition-duration: .3s;
max-width: -webkit-fill-available;
}
.report_box_inner{
padding:30px;
}
.report_box_inner span{
font-size:36px;
font-weight: 700 ;
}
.progress{
width: 100%;
margin-top:10px;
height:6px;
background:rgba( 0 , 0 , 0 , 0.3 );
margin-bottom:15px;
}
.progress_bar_opened{
height:6px; float :left;
width: $prOpened$%;
background:#e4da57;
-webkit-animation:bar 2s;
}
.progress_bar_closed{
height:6px; float :left;
width: $prResolved$%;
background:#1c9c6b;
-webkit-animation:bar2 2s;
}
.report_box_inner h2{
font-weight:normal;
color: white;
font-size:16px;
margin:-4px 0px 3px 0px;
}
.report_box_inner p{
font-size:11px;
color:rgb( 182 , 182 , 182 );clear: left;
font-weight: 300 ;
width:160px;
margin:2px 0px 15px 0px;
}
</style>
</head>
<body>
<div class = 'report' >
<div class = 'report_box' >
<div class = 'report_box_inner' >
<h2>
Opened issue in $project$
</h2>
<div class = 'stat' >
<span>$prOpened$</span>
</div>
<div class = 'progress' >
<div class = 'progress_bar_opened' ></div>
</div>
<p>This is a simple example. You can render any html and do everything you want.</p>
</div>
</div>
<div class = 'report_box' >
<div class = 'report_box_inner' >
<h2>
Closed issue in $project$
</h2>
<div class = 'stat' >
<span>$prResolved$%</span>
</div>
<div class = 'progress' >
<div class = 'progress_bar_closed' ></div>
</div>
<p>This is a simple example. You can render any html and do everything you want.</p>
</div>
</div>
</div>
</body>
</html>
