<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="//online.tableau.com/javascripts/api/tableau-2.0.0.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    
    <h1>Tableau JavaScript API Sample</h1>
    
    <table style="width:100%">
      <thead>
        <tr>
          <td><strong>Name</strong></td>
          <td><strong>Role</strong></td>
        </tr>        
      </thead>
      <tbody data-js="fields-info">
      </tbody>
    </table>
    
    <div data-js="tableau-root" style="display: block;"></div>
    
  </body>

</html>

(function(){
    /**
     * Viz オブジェクト
     * @property viz
     * @type {Object}
     */
    var viz;
    /**
     * WorkBook オブジェクト
     * @property workbook
     * @type {Object}
     */
    var workbook;
    /**
     * アクティブな Sheet オブジェクト
     * @property activeSheet
     * @type {Object}
     */
    var activeSheet;
    /**
     * Viz クラスの初期化処理
     * @method initializeViz
     */
    var initializeViz = function () {
      var $body          = $('body');
      var placeholderDiv = $body.find('[data-js=tableau-root]')[0];
      var $tbody         = $body.find('[data-js=fields-info]');
      var url = 'http://public.tableau.com/views/cm-awsmembers-blogposts/sheet0';
      var options = {
          'hideTabs'           : true,
          'hideToolbar'        : true,
          'onFirstInteractive' : function () {
              workbook = viz.getWorkbook();
              activeSheet = workbook.getActiveSheet();
              activeSheet
                .getDataSourcesAsync()
                .then(function(dataSources) {
                  $.each(dataSources, function(i, dataSource) {
                    console.log('dataSource : ', dataSource, dataSource.getName());
                    var fields = dataSource.getFields();
                    $.each(fields, function(j, field) {
                      console.log('field : ', field, field.getName());
                      $tbody.append('<tr><td>'+ field.getName() + '</td><td>' + field.getRole() + '</td></tr>');
                    });
                  });
                });
          }
      };
      viz = new tableau.Viz(placeholderDiv, url, options);
    };
    $(initializeViz);
}());
/* Styles go here */