Sample Spreadsheet Gadget

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Sample Spreadsheet Gadget"
              description="Fun sample spreadsheet Gadget."
             author="Google Engineering"
              author_affiliation="Google Inc."
             author_email="visualization.api+spreadsheet@gmail.com"
              screenshot="/ig/modules/spreadsheet.png"
             thumbnail="/ig/modules/spreadsheet-thm.png" > 
 <Require feature="idi"/>
<Require feature="locked-domain" />
 </ModulePrefs>
<UserPref name="_table_query_url" display_name="Data source url" 
           required="true"/>
<UserPref name="_table_query_refresh_interval" 
           display_name="Data refresh interval (minutes)" 
          default_value="0" datatype="enum" required="false">
 <EnumValue value="0" display_value="Do not refresh"/>
 <EnumValue value="60" display_value="1"/>
 <EnumValue value="300" display_value="5"/>
 <EnumValue value="1800" display_value="30"/>
 </UserPref>
<Content type="html"><![CDATA[
 
<script src="http://www.google.com/jsapi" type="text/javascript"></script>

<div id="tablediv" style="overflow: auto;">
 <img src="http://www.google.com/ig/images/spinner.gif" />
</div>

<script>

/**
 * Load the APIs and run sendQuery when the load is complete
  */
var gadgetHelper = null;
_IG_RegisterOnloadHandler(loadVisualizationAPI);
function loadVisualizationAPI() { 
  google.load("visualization", "1");
  google.setOnLoadCallback(sendQuery);
 }

/**
 * Create a query (shaped by the Gadget's user preferences), then 
 * send it to the spreadsheet data source. Also give the name of a 
 * function ("handleQueryResponse") to run once the spreadsheet data 
  * is retrieved:
 */
function sendQuery() {
  var prefs = new _IG_Prefs(); // User preferences 
  gadgetHelper = new google.visualization.GadgetHelper(); 
  var query = gadgetHelper.createQueryFromPrefs(prefs);
   query.send(handleQueryResponse);
} 

/**
 * The core logic. Process the spreadsheet data however you want. 
 * In this case, we create HTML to be presented back to the user. 
 * We'll use inline comments to provide a step-by-step description 
  * of what we're doing:
 */
function handleQueryResponse(response) {

  /**
   * Use the visualization GadgetHelper class to handle errors 
   */
  if (!gadgetHelper.validateResponse(response)) {
     return;     // Default error handling was done, just leave. 
  }

  /**
   * GET THE DATA FROM THE SPREADSHEET - sorry to scream in caps, but 
   * this is a key step
   */
  var data = response.getDataTable();
 
  var html = [];   // start the HTML output string
  html.push('Looking for the secret word\n');

  /**
   * Process all Rows in the specified range
   */
  for (var row = 0; row < data.getNumberOfRows(); row++) {
 
    /**
     * Process the Columns in each Row
     */
    for (var col = 0; col < data.getNumberOfColumns(); col++) {

      /**
       * GET A DATA VALUE FROM THE RANGE - sorry again for screaming - but 
        * this is the next key step 
       */
      var formattedValue = data.getFormattedValue(row, col);
      formattedValue = escapeHtml(formattedValue);

      /**
       * Look for the 'world'... add the word to the html either way, but 
        * format it differently
       */
      if (formattedValue == 'world') {
        html.push(
          '<span style="color:red; font-size:24pt; font-weight:bold;">');
        html.push(formattedValue);
         html.push('</span>');
      } else {
        html.push(formattedValue);
      }
      html.push('\n');
    }
  } 

  /**
   * Set the generated html into the container div.
    */
  var tableDiv = _gel('tablediv');
  tableDiv.innerHTML = html.join('');
  tableDiv.style.width = document.body.clientWidth + 'px';
  tableDiv.style.height = document.body.clientHeight + 'px';
 }

/**
 * Define any supporting code you need 
 * (like this handy function to escape special characters for html output):
 */
function escapeHtml(text) {
  if (text == null) {
    return '';
   }
  return _hesc(text);
} 

</script> 
]]>
</Content>
</Module>