title: Rally 2.0 JavaScript API - Creating HTML tables and setting values dynamically
body: <p>I'm using Custom HTML Rally Grid to develop a table that must return some statistics. My JavaScript is being called at the head of my HTML and i'm creating a table in the body tag. So, my JavaScript is setting values in the table using the fields ids. The problem is: the table is being loaded but when the Rally.launchApp method runs, the table disappears. Curiously, if i check the font-code, the table still there.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Grid With Freeform Data Example&lt;/title&gt;
  
      &lt;script type="text/javascript" src="/apps/2.0rc1/sdk.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          Rally.onReady(function() {
              Ext.define('CustomApp', {
                  extend: 'Rally.app.App',
                  componentCls: 'app',
  
                  launch: function() {
                      var firstMetricResult;
                      var secondMetricResult;
                      var firstMetricName = "% of user stories assigned story points";
                      var secondMetricName = "Average story points per user story ";
  
                      var currentProjectName =  Rally.environment.getContext().getProject().Name;
                      var currentProjectNameID = document.getElementById("currentProjectNameID");
                      currentProjectNameID.value = currentProjectName;
  
                      var benchmark = 20;
  
                      var storiesQuery = Ext.create('Rally.data.WsapiDataStore', {
                          model: 'UserStory',
                          fetch: ['PlanEstimate', 'LastUpdateDate'],
                          filters: [
                                      {property: 'ScheduleState',
                                       operator: '=',
                                       value: 'Accepted'}, 
                                      {property: 'DirectChildrenCount',
                                       operator: '=',
                                       value: '0'},
                                      {property: 'AcceptedDate',
                                       operator: '&lt;',
                                       value: 'LastMonth'},
                                      {property: "Iteration.Name",
                                       operator: "!contains",
                                       value: "hardening"},
                                      {property: "Iteration.Name",
                                       operator: "!contains",
                                       value: "regression"},
                                      {property: "Iteration.Name",
                                       operator: "!contains",
                                       value: "stabilization"}
                                    ]
                      });
  
                      storiesQuery.load({
                          callback: function(records, operation) {
                              if(operation.wasSuccessful()) {
                                  var estimatedStoriesCount = 0;
  
                                  Ext.Array.each(records, function(record){
                                      if (record.get('PlanEstimate') != null){
                                        estimatedStoriesCount++;
                                      }
                                  });
  
                                var storiesCount = records.length;
                                firstMetricResult = (estimatedStoriesCount*100)/storiesCount;
                                alert(firstMetricResult);
                              }
                          }
                      });
  
  
                      var estimatedStoriesQuery = Ext.create('Rally.data.WsapiDataStore', {
                         model: 'UserStory',
                         fetch: ['PlanEstimate', 'LastUpdateDate'],
                         filters: [
                             {property: 'PlanEstimate',
                              operator: '!=',
                              value: 'null'},
                             {property: 'ScheduleState',
                              operator: '=',
                              value: 'Accepted'}, 
                             {property: 'DirectChildrenCount',
                              operator: '=',
                              value: '0'},
                             {property: 'AcceptedDate',
                              operator: '&lt;',
                              value: 'LastMonth'}
                          ]
                      });
  
                      estimatedStoriesQuery.load({
                          callback: function(records, operation) {
  
                              if(operation.wasSuccessful()) {
                                var astoriesCount = records.length;
                                var storiesPointsSum = 0;
  
                                Ext.Array.each(records, function(record){
                                    storiesPointsSum += record.get('PlanEstimate');
                                });
  
                                secondMetricResult = storiesPointsSum/astoriesCount; 
                                alert(secondMetricResult);
  
                              }
                          }
                      });
  
                  }   
              });
  
              Rally.launchApp('CustomApp', {
                  name: 'Grid With Freeform Data Example'
              });
  
          });
      &lt;/script&gt; 
  
      &lt;style type="text/css"&gt;
          table.gridtable {
              font-family: verdana,arial,sans-serif;
              font-size:11px;
              color:#333333;
              border-width: 1px;
              border-color: #666666;
              border-collapse: collapse;
          }
          table.gridtable th {
              border-width: 1px;
              padding: 8px;
              border-style: solid;
              border-color: #666666;
              background-color: #dedede;
          }
          table.gridtable td {
              border-width: 1px;
              padding: 8px;
              border-style: solid;
              border-color: #666666;
              background-color: #ffffff;
          }
      &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  
    &lt;table border=1 class='gridtable' id="tab1"&gt;
  
    &lt;tr&gt;
    &lt;th&gt; Team &lt;/th&gt;
    &lt;td&gt;&lt;b&gt;All prior periods&lt;/b&gt;&lt;/td&gt;
    &lt;td&gt;&lt;b&gt;All prior periods&lt;/b&gt;&lt;/td&gt;
    &lt;/tr&gt;
  
    &lt;tr&gt;
    &lt;td id="currentProjectNameID"&gt;
    &lt;/td&gt;
  
    &lt;/tr&gt;&lt;/table&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I decided to use this simple HTML table because i want to have the power to edit the CSS.</p>
  
  <p>Thanks.</p>