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.

In my second post I explained how to get started making your own Apps using Rally’s APP SDK. In this post I will show you how to use the starter kit to create an App that shows the stories that have changed in the past day.

First we will use the starter kit to create up a new App.

Note: In the example image you will see that I had to escape the brackets in order to get the rake task to run in oh-my-zsh.

Open the LastDay.js file that is contained in the folder that the starter kit created for you. For editing JavaScript I like the JetBrains IDEs, for this tutorial I will be using RubyMine to help create the App.

One of the important things to remember when using the SDK is to make sure that all of your JavaScript code is called after the addOnLoad callback has been completed. The addOnLoad callback is called by the underlying SDK code after all the resources that are needed are loaded and the environment for your App has been set up.

For this App we will use the RallyDataSource to query Rally for work items that have been changed in the last day and put those items into a table.

First we need to configure the RallyDataSource. By default a RallyDataSource will follow the current projects scoping. The server replaces the special variables like __PROJECT_OID__ with the current scoping information from your Rally session. When you change scope in Rally your App will be reloaded and those scoping variables will be replaced with the updated project information.

var rallyDataSource = new rally.sdk.data.RallyDataSource("__WORKSPACE_OID__",
"__PROJECT_OID__",
"__PROJECT_SCOPING_UP__",
"__PROJECT_SCOPING_DOWN__");

Since we are going to only show stories that have changed in the last day we will need to calculate yesterday’s date.

var yesterday = rally.sdk.util.DateTime.add(new Date(), "day", -1);
var startOfYesterday = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate());
var stringDate = rally.sdk.util.DateTime.toIsoString(startOfYesterday);

The SDK ships with a some utilities to make it easier to work with dates. In the above code I find the DateTime for today and subtract one day from it. I then create a new date with the year, month, and day to get a DateTime that is at the beginning of the day. Lastly that DateTime is translated into an ISO string (the format that Rally expects dates to be when they are sent.)

Next we need to create the configuration object for our table.

var config = {
//this is the type for User Story
type: "hierarchicalrequirement",
query: "( LastUpdateDate > " + stringDate + " )",
columns:
[
{key: 'FormattedID', header: 'Formatted ID', width: 100},
{key: 'Name'},
{key: 'ScheduleState', header: 'Schedule State'}
]
};

• type: Type is the Rally item type that you want the table to query for. In this case we want to display User Stories so we use the name WSAPI type name for them which is “hierarchicalrequirement”. You will notice that the type name has all spaces removed from it so if you wanted to see last changed defect suites the type would be “defectsuite”
• query: Query is a filter you want to put on the data that will shown in your table. LastUpdateDate is changed every time that an artifact is changed in Rally. In the case of our query we want things that have a LastUpdateDate greater than yesterday.
• columns: Columns is an array that contains what fields you want displayed in your table.

Now we need a place to display the table. First we need to create a div to show it in. That can be done by opening up the LastDay.template.html file and putting a div tag into the body.

<body class="lastDay">
<div id="myDiv">

</div>
</body>

While we are in here we can change the name of the App to something more appropriate. In my case I will change the name of the App to “App: Example Day 3″.

<meta name="Name" content="App: Example Day 3"/>

The final code step is to create and show the Table in the browser.

var table = new rally.sdk.ui.Table(config, rallyDataSource);
table.display("myDiv");

After you add that last piece of code you should be able to open LastDay.template.html in your browser. If you are currently logged into Rally you should see a list of stories that have been updated in a table.

To combine these files into one file so that it can be deployed into a Rally App tab all you need to do is use the starter kit’s combine task.

rake combine

That will create a file named LastDayApp.html, the contents of this file can be copied into a Rally App tab or Custom Tab.

LastDay zip archive is attached to help illustrate the things I covered in the post.

In my next App Tutorial I will show you how to add the ability to show Kanban cards that are colored by the tags they contain.

In my first post I explained the advantages of creating your own App in Rally. An App is a customized view of Rally data that is served in an IFrame. Apps can create interesting ways to interact with Rally data and internally we use them to prototype new features and ideas that are not quite ready to be a portion of the full product. In this post I will explain to you some of the tools that can be used to help you get started on your first App.

One of the challenges facing new App developers is how to organize their files. It is usually easier to develop an App by breaking out the different language sections into their own files. This is because Editors and IDEs tend to be more efficient when working on a file that contains purely HTML, CSS or JavaScript rather than a mixture. Unfortunately Rally expects Apps to be in one contiguous blob of text when it is pasted into the custom App tab. In my experience it can be error prone trying to copy the contents of each style and script tag from an outside file into a single page HTML file.

One of the ways that we circumvent this problem while we develop Apps internally is through the App Development Starter Kit. The starter kit can be found alongside our other tools in our developer portal. It combines each of the separate CSS and JavaScript files together into the one centralized HTML file. This file can be easily copied into Rally to create a new custom App. Once you have the starter kit, making a new App is a breeze. All you need to do is run rake new[APPNAME] and all the files that you need to start your new App will be combined into that contiguous blob the Rally tool knows and loves.

In part two I will show you how to create an App that shows you all of the work items that have been changed in the past day.