Chapter 7 - AUI-styled reports: tables, lozenges for statuses, etc...

Unfortunately the Atassian's AUI is CSS3 whereas BIRT supports CSS2 only. Therefore, it is not possible import the Atlassian's AUI css file as style in BIRT. This requires some few extra work to use AUI in BIRT reports to get a similar look&feel than JIRA  form BIRT.

Create a new CSS style

Right click on the Styles element on the Outline view and select New Style...

Set the new style name to JIRA:


Then set the font type to Arial and the size to 14 pixels:

Save it by clicking on the Apply and Close button. Then apply the new style to the table: select the Table item from teh Outline view and set the Style to JIRA on the General tab of the Properties Editor view:


 Import the AUI libraries

According to the Atlassian's AUI documentation the libraries listed below must be imported into the HTML page to support AUI Core:

<link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/6.0.7/css/aui.min.css" media="all">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//aui-cdn.atlassian.com/aui-adg/6.0.7/js/aui.min.js"></script>

We will not use the jquery file, though. 

Select the top element (report) on the Outline view, then the Script tab and finally the clientScripts element from the Scripts list:

Copy and paste the Javascript code below to import the AUI Core CSS and Javascript files:


head.js("//aui-cdn.atlassian.com/aui-adg/6.0.7/css/aui.min.css");
head.js("//aui-cdn.atlassian.com/aui-adg/6.0.7/js/aui.min.js");


Select the Layout tab and repalce the Status Label by a Dynamic Text item and copy and paste the Javascript below:

The Atlassian's UI documentation describes how to use lozenges. Unfortunatelly the Atlassian's JIRA Java API does not return the same values and they require some transalation:


var color="";
var category = row["Status Color"];
if(category == "blue-gray")
    color = "aui-lozenge-complete"
else if(category == "yellow")
    color = "aui-lozenge-current"
else if(category == "green")
    color = "aui-lozenge-success"

"<span class='aui-lozenge "+color+"'>"+row["Status"]+"</span>"


Rearrange the column order to move Status before the Summary column and test your report:



Tables

Accordnig to the Atlassian's AUI doumentation, tables must include a class attribute with the aui value in the HTML table tag element:

<table class="aui">

However, this is not possible with standard Eclpse BIRT as it does not allows to set the class attribute in items. Fortunetely. the BIRT plugin provides a workaround:

Create a user's property named class:

Then click the Script tab, select the onCreate event and type the following script to set the aui value for the user's property class:

this.setUserPropertyValue("class", "aui");



As the source code of BIRT has been modified to support this workaround, this feature will only work with BIRT reports on JIRA (v1.4.3+). Unfortunatelly, this does not work with the Eclipse BIRT Report Designer yet nor other document format than HTML (like MS Word, etc). So you have to set a style in BIRT reports in any case to visualize them outside JIRA.