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.0 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Copyright (c) 2010 CA Agile Central Software Development Corp. All rights reserved -->
<html>
<head>
   <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");
            break;
           case "High Attention":
             dojo.addClass(card, "high");
             break;
          case "Normal":
             dojo.addClass(card, "normal");
             break;
          case "Low":
             dojo.addClass(card, "low");
             break;
           default:
             dojo.addClass(card, "unknown");
             break;
         }
         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;
      appHeader.showPageTools(true);
      appHeader.showHelp(true);

       var rallyDataSource = new rally.sdk.data.CA Agile CentralDataSource('__WORKSPACE_OID__',
                                                 '__PROJECT_OID__',
                                                 '__PROJECT_SCOPING_UP__',
                                                 '__PROJECT_SCOPING_DOWN__'
);

       var cardboardConfig = {
        types: ["Defect"],
         attribute : "State",
        sortAscending: true,
         order: " Rank ",
        fetch:"Name,FormattedID, Owner ,ObjectID,Rank,Priority",
        cardRenderer: DefectCardRenderer,
        columns:["Submitted", "Open", "Fixed"]
       };

       cardboard = new rally.sdk.ui.CardBoard(cardboardConfig, rallyDataSource);
      cardboard.display("defectBoard");
    }

    rally.addOnLoad(onLoad);

   </script>
   <style type="text/css">

    .legendContainer {
      padding-top:5px;
      vertical-align:middle;
       line-height: 18px;
    }

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

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

    .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 {
       margin-left:auto;
       margin-right:auto;
       width:450px;
    }

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

  </style>
</head>
<body>
<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>
</div>
<div id="defectBoard"></div>
</body>
</html>

Feedback

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.