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.

Note:
  • 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" "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>Defects Dashboard Example</title>
   <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 rally.sdk.data.CA Agile CentralDataSource('__WORKSPACE_OID__',
                                         '__PROJECT_OID__',
                                         '__PROJECT_SCOPING_UP__',
                                         '__PROJECT_SCOPING_DOWN__'
);
      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);
         priorityPieChart.display("priorityPie");

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

        var severityPieChart = new rally.sdk.ui.PieChart(severityPieConfig, rallyDataSource);
        severityPieChart.display("severityPie");
       }

       showPies();

       function showDropdowns() {

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

         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:",
         showLabel:true
         };

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

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

       showDropdowns();

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

       function refreshTable() {
         if(!wait) {
         wait = new rally.sdk.ui.basic.Wait();
         wait.display("defects");
         }
         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
       refreshTable();
     }

     rally.addOnLoad(defectsDashboard);

   </script>
</head>
<body>
   <table>
     <tr>
       <td>
<div id="priorityPie" style="height:225px; width:250px;"></div>
       </td>
       <td>
         <div id="severityPie" style="height:225px; width:250px;"></div>
       </td>
     </tr>
     <tr>
       <td colspan="2">
         <hr/>
         <div style="padding-top:10px">
            <input type="checkbox" id="filterByPriority">
           <div id="priorityDiv" style="display:inline">
           </div>
         </div>
         <div style="padding-top:10px;">
            <input type="checkbox" id="filterBySeverity">
            <div id="severityDiv" style="display:inline">
            </div>
         </div>
      </td>
     </tr>
     <tr>
       <td colspan="2">
         <div id="defects" style="padding-top:20px; height:300px">
         </div>
       </td>
    </tr>
   </table>
</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.