Informations
Jobs
September 28, 2023
How to setup a Kanban board in Jira using sub columns
What is the article about?
The team that I am part of is very used to Jira Scrum boards but recently decided to give Kanban a try. Since our tickets are all setup in Jira it made sense to setup the Kanban board in Jira as well then.
Very soon though we noticed that the out of the box Jira board has limitations that undermine the Kanban pull approach. Jira does not support sub columns.
There is an issue filed dating back to 2010: You cannot set WIP limits in the Jira Kanban board that restrict multiple columns at one.
In this blog post I want to share the evolution of our Kanban board in Jira and how we worked around this missing feature.
Stage 1
We set up a Kanban board with one state per column, so it looked similar to this:
Figure 1
Figure 1
Every column then got its own wip limit. We soon realized that this is not representing our actual life process. Once I finished a programming task for example it automatically was “ready for review” but due to wip limits in place I might artificially hold it back in the development lane until the next column was free.
This then led to the adjustment that all the “ready for..” columns were setup without any limits. So by design we introduced queues. One of the main reasons to use the Kanban approach though is to avoid any queues in your system. So this was a very bad design approach.
Stage 2
To avoid the mentioned queues we then put multiple states in one column like so:
Abbildung 2: Linter Ergebnisse
Figure 2
But how can you differentiate the two states when looking at the board? We used two ways of doing that. We colored the ticket by state and in addition we put the status itself on the card layout. The Kanban board then looked like this:
Abbildung 2: Linter Ergebnisse
Figure 3
This works fine for most teams and as you can read in the comments of the Jira issue this is a workaround used by many Jira users.
Our team was still not happy with it though and the topic kept coming up in our retros.
Stage 3
Therefore we gave customized CSS a try to attempt to fake the missing sub columns. We used a browser plugin to overwrite the css of the Jira page. Tickets that are ready to be pulled to the next lane are moved further to the right and the other tickets are moved further to the left. This is the result:
Abbildung 2: Linter Ergebnisse
Figure 4
Now it is very easy to see which tickets can be pulled in the next lane while still having the WIP limit in place for multiple states.
There are two downsides still. Unfortunately Jira does not allow you to drag and drop a ticket within a column. So in case you want to switch a ticket from “in development” to “ready for development” you cannot do that my moving the ticket around on the board. Instead you need to open the ticket and change the status there. The other disadvantage is the custom css relying on Jira to implement their board in a certain way. I just saw the possibility to use an enhanced board version with a bit of a different layout. Unfortunately when enabling this feature our css is no longer working. So whenever Jira adapts its layout you might also have to adapt your css.
More team members started using the css and luckily streamlined it further so that it got a bit smaller and also works in multiple browsers. In order for it to work at all it is needed to display the ticket’s state on the card layout. If you want to give it a try also, feel free to use the css posted below the article. You have to adjust the status of course so it matches your board setup. When in doubt just reach out to a developer in your team or you can write a comment here.
There are two downsides still. Unfortunately Jira does not allow you to drag and drop a ticket within a column. So in case you want to switch a ticket from “in development” to “ready for development” you cannot do that my moving the ticket around on the board. Instead you need to open the ticket and change the status there. The other disadvantage is the custom css relying on Jira to implement their board in a certain way. I just saw the possibility to use an enhanced board version with a bit of a different layout. Unfortunately when enabling this feature our css is no longer working. So whenever Jira adapts its layout you might also have to adapt your css.
More team members started using the css and luckily streamlined it further so that it got a bit smaller and also works in multiple browsers. In order for it to work at all it is needed to display the ticket’s state on the card layout. If you want to give it a try also, feel free to use the css posted below the article. You have to adjust the status of course so it matches your board setup. When in doubt just reach out to a developer in your team or you can write a comment here.
I hope this helps other teams to be able to use a Kanban board in Jira the “right” way ;-) Please let me know if you have other ideas for further improvement or simplifying the setup.
/*
This files contains custom css which you can use
to overwrite the JIRA css. It enables us to work with
subcolums when using a Kanban board.
In order for it to work you need to display the Status
of your ticket (board preferences - card layout)
For Firefox you need to enable the has functionality in your about:config file
Open the about:config file and set layout.css.has-selector.enabled to true.
*/
/* general stuff */
section.ghx-summary {
font-weight: bold;
}
/* dev */
div.ghx-issue:has( span[data-tooltip="Status: In Progress"]) {
margin-right: 40% !important
}
div.ghx-issue:has( span[data-tooltip="Status: In Arbeit"]) {
margin-right: 40% !important
}
div.ghx-issue:has( span[data-tooltip="Status: Ready for Review"]) {
margin-left: 40% !important
}
/* review */
div.ghx-issue:has( span[data-tooltip="Status: In Review"]) {
margin-right: 40% !important
}
div.ghx-issue:has( span[data-tooltip="Status: Testbereit"]) {
margin-left: 40% !important
}
/* test */
div.ghx-issue:has( span[data-tooltip="Status: In Test"]) {
margin-right: 40% !important
}
div.ghx-issue:has( span[data-tooltip="Status: im Test"]) {
margin-right: 40% !important
}
div.ghx-issue:has( span[data-tooltip="Status: Getestet"]) {
margin-left: 40% !important
}
div.ghx-issue:has( span[data-tooltip="Status: Tested"]) {
margin-left: 40% !important
}
/* done */
div.ghx-issue:has( span[data-tooltip="Status: Closed"]) {
margin-left: 40% !important
}
div.ghx-issue:has( span[data-tooltip="Status: Deploy"]) {
margin-left: 40% !important
}
div.ghx-issue:has( span[data-tooltip="Status: Resolved"]) {
margin-left: 40% !important
}
div.ghx-issue:has( span[data-tooltip="Status: Integrated"]) {
margin-right: 40% !important
}
Want to be part of the team?
6 people like this.
2Comments
- Dennis Wagner19.10.2023 07:32 Clock
Hi Stefanie,
Thanks for writing this up. I wonder, however, if you discussed switching toil instead. The while article reads a lot like processes and tools over people and interactions. Sorry to say…
The tool Jira is obviously not well suited for Kanban. By far not. Trying to fix the tool seems to distract from the issue at hand (pun intended).
Apart from how wrong that whole process actually looks like 🙄 - Steffi27.10.2023 14:49 Clock
Hey Dennis, thank you very much for your comment. We considered switching to another tool but for the apps team we stayed with the approach in Jira.
Other teams at Otto decided for other tools to set up their boards. One that I know of is Miro.
Write a comment
Answer to: Reply directly to the topic
Written by
Stefanie Schönebein
iOS-Entwicklerin
Similar Articles
FabianApril 17, 2024Confluent Helps Power a Diverse and Scalable Online Shopping Experience for OTTO
06Find out how OTTO is taking its 10-year-old data infrastructure into a new era with the event streaming platform powered by Confluent and making itself future-proof.DevelopmentOperationsWorking methods- JimMarch 14, 2024
Machine Learning Ops: What It's Like in Practice.
06Get an insight into Jim's work as an MLOps-focused engineer! In this article, he explains how a machine learning product is developed and how you can get started in this discipline yourself.Data scienceDevelopmentMachine learning
