Engineering Blog

In the third post I showed you how you can create an App from scratch using the App Starter Kit.

In this post I will show you how to take our existing Kanban Board App and enhance it to show colors based upon certain Tags. Many of our customers are using Tags to show Kanban Cards that need special attention or should be expedited through the development process.

First download the Kanban App here. You should place the unzipped contents of the folder into a sub-folder beneath your App Starter Kit.

So the first thing we want to do is add a CSS class to the card for each Tag. Since Tag names can have spaces in them it is probably best to do a little work to sanitize them. Inside the KanbanCardRender class you will want to add a function like this:

    this.applyTagStyles = function () {
        rally.forEach(item.Tags, function (tag) {
            dojo.addClass(card, tag.Name.replace(" ", "-"));
        });
    };

Then at the bottom of the _populateCard function you can add a call to this function:

     that.applyTagStyles();

This code will add a CSS class to each card for every tag in the artifact’s collection. The next step is to add some CSS classes to change the colors of the headers.

At the bottom of the Kanban.css you can add the following CSS for each Tag that you want to color code a card.

.cardboard .your-tag-name-here .cardHeader {
    background-color: #FF1111;
    !important
}

Here is a link to my completed version. It will change items that have Tags named ‘expedited’ to show a horrid red color.