Monday, November 25, 2013

JIRA Agile Extended Kanban Board

JIRA Agile does not keep the column width as you add more columns resulting on unusable boards when the number of columns reach certain point and your display device is not big enough.

Here are a couple of hacks I have tried so far until JIRA Agile provides a fix for this issue. All credits here for Jose Garcia who helped me tweak the JIRA standard Kanban Board with javascript plus CSS hacks.

TamperMonkey script

This is our preferred option so far. I have built a Chrome Tampermonkey JIRA Extended Rapidboard plugin. A similar plugin could be tested and released for Firefox GreaseMonkey plugin.

Javascript Injector add-on

I started using this at the beginning but it was buggy in chrome for windows (In a MAC it worked kind of OK)
  1. Install Javascript Injector chrome plugin
  2. Set url as http://your.jira.url/secure/RapidBoard.jspa
  3. Paste the snippet in “script”:
    var clone = $("#ghx-column-header-group").clone();
    clone.attr("id", "newHeader").css("background", "#FFF").css("position", "absolute").css("width", "1465px").css("margin-top", "-90px");
    $("#ghx-pool").css("width", "1500px");
    $("body").removeClass("ghx-scroll-columns").css("overflow-y", "hidden !important");
    $("#ghx-work").attr("id", "ghx-work1").css("overflow-x", "scroll").css("overflow-y", "hidden").width("2000px");
  4. Hit “Inject Now”. You have some options there like unchecking "autorun" or using regex for "url" so most likely you will be able to introduce some more customization for your own needs like when needing something different depending on the specific board.

Other approaches

You can certainly build your own extension. For example it would make sense to have the width for the whole board available for setup as well as turning the script ON/OFF. These features are available via TamperMonkey or GreaseMonkey but I have to agree the interfaces might be a little bit scary for non Javascript programmers.

No comments: