Color-Coded Defect Board

Deprecation Warning! The content below is only applicable for use within deprecated 1.x versions of CA Agile Central's App SDK. Use of the component(s) and/or code on this page is not supported. To develop custom apps within our current environments, please see App SDK 2.1 documentation.

This displays defects organized in columns by schedule state . This example uses the Card Board component and demonstrates using a custom card renderer to show defect priority by color-coded card headers.

color coded

Example Code

Copy and paste the following into a CA Agile Central custom page .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<!-- Copyright (c) 2010 CA Agile Central Software Development Corp. All rights reserved -->
   <title>App Example: Color Coded Defect Board</title>
   <meta name="Name" content="App Example: Color Coded Defect Board" />
   <meta name="Version" content="2011.02.12" />
   <meta name="Vendor" content="CA Agile Central Software" />
   <script type="text/javascript" src="<//apps/1.26/sdk.js"></script>
   <script type="text/javascript">

    function DefectCardRenderer(column, item) {
      var that = this;
       var cardRenderer = new rally.sdk.ui.cardboard.BasicCardRenderer(column, item);

      function decorateWithPriority(card) {
         switch(item.Priority) {
           case "Resolve Immediately":
            dojo.addClass(card, "immediate");
           case "High Attention":
             dojo.addClass(card, "high");
          case "Normal":
             dojo.addClass(card, "normal");
          case "Low":
             dojo.addClass(card, "low");
             dojo.addClass(card, "unknown");
         return card;

      this.renderCard = function() {
         return decorateWithPriority(cardRenderer.renderCard());

       this.renderDndCard = function() {
         return decorateWithPriority(cardRenderer.renderDndCard());

    function onLoad() {
       var cardboard;

      var appHeader = rally.sdk.ui.AppHeader;

       var rallyDataSource = new Agile CentralDataSource('__WORKSPACE_OID__',

       var cardboardConfig = {
        types: ["Defect"],
        attribute: "State",
        sortAscending: true,
         order: "Rank",
        cardRenderer: DefectCardRenderer,
        columns:["Submitted", "Open", "Fixed"]

       cardboard = new rally.sdk.ui.CardBoard(cardboardConfig, rallyDataSource);


   <style type="text/css">

    .legendContainer {
       line-height: 18px;

     .legendContainer .label {
      margin-left: 5px;
      margin-right: 15px;

    .legend {
      height: 16px;
       width: 16px;
       border: 1px solid #c6c6c6;

    .cardboard .immediate .cardHeader, .legend.immediate {
      background-color: #EF3F35;
    .cardboard .high .cardHeader, .legend.high {
       background-color: #E57E3A;
    .cardboard .normal .cardHeader, .legend.normal {
       background-color: #FBDE98;
     .cardboard .low .cardHeader, .legend.low {
       background-color: #B5D8EB;
     .cardboard .unknown .cardHeader, .legend.unknown {
       background-color: #E0E0E0;

     .header {

    .cardboard .board {
      margin-top: 20px;

<div class="header">
   <div class="legendContainer">
     <div class="legend immediate"></div>
     <div class="label">Resolve Immediately</div>
     <div class="legend high"></div>
    <div class="label">High Attention</div>
     <div class="legend normal"></div>
     <div class="label">Normal</div>
     <div class="legend low"></div>
     <div class="label">Low</div>
     <div class="legend unknown"></div>
     <div class="label">None</div>
<div id="defectBoard"></div>


Need more help? The CA Agile Central Community is your one-stop shop for self-service and support. To submit feedback or cases to CA Agile Central Support, find answers, and collaborate with others, please join us in the CA Agile Central Community.