We are the Dev Teams of
  • brands
  • ebay_main
  • ebay
  • mobile
<
>
BLOG

Kanban Wall View Based On JIRA API

by André Charton
in Tutorials

This article describes how we use the JIRA API to display a customized Kanban wall view. The task was to switch from a real board to an electronic version. One big requirement was to display the electronic board in the same way as the physical board.

PRECONDITIONS: You need a web server with PHP support, curl, JIRA with API version >= 2 and a JIRA account for accessing the API.

Within JIRA, we used the simplified Greenhopper workflow and defined all columns and states which we need for our board.

JIRA API Access

The goal is to access the JIRA API and return the content to display. We need to create a display account in JIRA (display-user/display-pwd).

First, we create a little proxy controller script to access the JIRA API and get the tickets we want show.

 

<?php
header("Content-Type: application/json");
$status = $_GET["status"];
$jql = "project = MY-PROJECT AND status in ($status) ORDER BY Rank ASC";
$url = "https://display-user:display-pwd@jira.corp.company.de/jira/rest/api/2/search?jql=".urlencode($jql)."&fields=key,summary,assignee,status";
echo shell_exec("curl -k --user display-user:display-pwd \"$url\"");
?>

That's all you need to access the API. If you run the script on a server, you'll get all tickets related to a given status. Here is a sample url: http://127.0.0.1/walldisplay/api.php?status=ToDo.

HTML View

Now we create a nice HTML board: choose a background image, define your colums, and the related JIRA state as meta information 'data-state'.

<div class="row">
    <div class="col-md-2 list">
        <h1><span>8</span> ToDo</h1>
        <div data-state="ToDo"></div>
    </div>
    <div class="col-md-2 list">
        <h1><span>5</span> Dev</h1>
        <div data-state="Dev"></div>
    </div>
    <div class="col-md-2 list">
        <h1><span>5</span>QA</h1>
        <div data-state="QA"></div>
    </div>
    <div class="col-md-2 list">
        <h1><span>5</span>LTS</h1>
        <div data-state="LTS"></div>
    </div>
</div>

Now it's time to bring the board to life: we'll use a little Javascript to access our API script from part 1 and fill the columns with tickets.

The script will run in a loop and update the tickets automatically.

load();
        setInterval(load, 5000);
        function load() {
            $.ajax("api.php?status="+statusItems, {
                success: function(data) {
                    if(data.errorMessages) {
                        error(data.errorMessages.join(", "));
                        return;
                    }
                    var statusMap = {};
                    console.log(data);
                    $.each(data.issues, function(){
                        var key = this.fields.status.name;
                        if(statusMap[key]==null) {
                            statusMap[key] = [];
                        }
                        statusMap[key].push(this);
                    });
                    $columns.each(function(){
                        var state = $(this).attr("data-state");
                        render($(this), statusMap[state]);
                    });
                },
                error: error
            });
        }

 function error(message) {
            $columns.each(function(){
                if(!message) {
                    message = "Could not load column";
                }
                $(this).children().remove();
                $(this).append("<div class='item error'>"+message+"</div> ")
            });
        }
    });

And last, we bind the model to the view (render).

function render($el, resp) {
        if(!resp) {
            return;
        }
        $el.children().remove();
        $.each(resp, function () {
            console.log(this);
            if($el.hasClass("condensed"))
                    $el.append("<div class='item'><h3>" + this.key.replace("BLN-","") + "</h3><h2>" + this.fields.summary + "</h2><div>");
                else
                    $el.append("<div class='item'><h3>" + this.key.replace("BLN-","") + " <img src=\"./img/" + this.fields.assignee.name + ".png\" ></h3><h2>" + this.fields.summary + "</h2><div>");
        });
        var rows = $el.hasClass("condensed") ? 2 : 3;
        $el.find("h2").ellipsis({row: rows});
    }

Now we are done. After approval from your JIRA operator, you can reduce the loop interval to a second (or similar) for a real-time view of your board.

agile, kanban, jira, php

?>