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>


Benötigen Sie weitere Informationen? Die CA Agile Central-Community ist Ihre zentrale Anlaufstelle für Self-Service und Support. Treten Sie der CA Agile Central-Community bei, um dem CA Agile Central-Support Feedback mitzuteilen oder Fälle zu melden, Antworten zu finden oder mit anderen Benutzern zusammenzuarbeiten.