Defect Dashboard

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 example demonstrates the integration of multiple components to create a basic app.

  • Defects are broken down by priority and severity and displayed in pie charts.
  • A table displays all defects and can be filtered using a drop-down list.

defects dashboard

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 -->
   Defects <dfn class="onomasticon onomasticon-extra-element onomasticon-orientation-below onomasticon-cursor-help" aria-label="Term Dashboard. definition is. A CA Agile Central page located under the My Home page. Panels on the dashboard display various information and charts. Users can control what panels display and how they appear. You can create multiple dashboards as custom pages. " tabindex="0" title="">Dashboard <button disabled="disabled" class="onomasticon-term-description"><p>A CA Agile Central page located under the My Home page. Panels on the dashboard display various information and charts. Users can control what panels display and how they appear. You can create multiple dashboards as custom pages.</p> </button> </dfn> Example
   <meta name="Name" content="App Example: Defects Dashboard" />
   <meta name="Version" content="2010.4"   />
<meta name="Vendor" content="CA Agile Central Software" />

   <script type="text/ javascript " src="/apps/1.26/sdk.js"></script>
   <script type="text/javascript">

     function defectsDashboard() {

       var rallyDataSource = new Agile CentralDataSource('__WORKSPACE_OID__',
      var dpDropdown;
      var dsDropdown;
      var wait;
      var table;

       function showPies() {

         var priorityPieConfig = {
         title : "Defects by Priority",
        type : "Defect",
         attribute : "Priority",
        height : 200,
        width : 200

        var priorityPieChart = new rally.sdk.ui.PieChart(priorityPieConfig, rallyDataSource);

         var severityPieConfig = {
         title : "Defects by Severity",
        type : "Defect",
        attribute: "Severity",
         height : 200,
        width : 200

        var severityPieChart = new rally.sdk.ui.PieChart(severityPieConfig, rallyDataSource);


       function showDropdowns() {

         var dpConfig = {
         type : "defect",
        attribute: "priority",
        defaultDisplayedValue: "High Attention",
        label: "Filter table by priority:",

         dpDropdown = new rally.sdk.ui.AttributeDropdown(dpConfig, rallyDataSource);
         dpDropdown.display("priorityDiv", onSelect);

         var dsConfig = {
         type : "defect",
         attribute: "severity",
         defaultDisplayedValue: "Major Problem",
        label: "Filter table by severity:",

         function onSelect(dropdown, eventArgs) {
        if((dropdown === dpDropdown && dojo.byId("filterByPriority").checked) ||
          (dropdown === dsDropdown && dojo.byId("filterBySeverity").checked)) {

        dsDropdown = new rally.sdk.ui.AttributeDropdown(dsConfig, rallyDataSource);
        dsDropdown.display("severityDiv", onSelect);


      function showTable(results) {
         wait = null;
         if(table) {
         var config = {
         columnKeys: ['FormattedID', 'Name', 'Priority', 'Severity'],
         height: "300px"
        table = new rally.sdk.ui.Table(config);

       function refreshTable() {
         if(!wait) {
         wait = new rally.sdk.ui.basic.Wait();
         var queryObject = {
        type : 'defect',
        key : 'defects',
        fetch: 'Name,FormattedID,Priority,Severity'

        var priorityClause = document.getElementById('filterByPriority').checked ?
                 '(Priority = "' + dpDropdown.getValue() + '")' : '';
         var severityClause = document.getElementById('filterBySeverity').checked ?
                 '(Severity = "' + dsDropdown.getValue() + '")' : '';

        if (priorityClause && !severityClause) {
         queryObject.query = priorityClause;
        } else if (severityClause && !priorityClause) {
         queryObject.query = severityClause;
         } else if (priorityClause && severityClause) {
         queryObject.query = '(' + priorityClause + ' AND ' + severityClause + ')';

         rallyDataSource.findAll(queryObject, showTable);

       dojo.connect(dojo.byId("filterByPriority"), "onclick", refreshTable);
       dojo.connect(dojo.byId("filterBySeverity"), "onclick", refreshTable);

       //Load initial data


<div id="priorityPie" style="height:225px; width:250px;"></div>
         <div id="severityPie" style="height:225px; width:250px;"></div>
       <td colspan="2">
         <div style="padding-top:10px">
            <input type="checkbox" id="filterByPriority">
           <div id="priorityDiv" style="display:inline">
         <div style="padding-top:10px;">
            <input type="checkbox" id="filterBySeverity">
            <div id="severityDiv" style="display:inline">
       <td colspan="2">
         <div id="defects" style="padding-top:20px; height:300px">


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.