jkriss/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Setup


Make sure your Google Form is set up to save results to spreadsheet
Follow the instructions from Tabletop.js to make the spreadsheet loadable (short version: publish to web, then make it public with link).
Copy the example below (you'll need the tabletop script tag, the embedded javascript below it, and an element with an id for displaying the signers)
Change publicSpreadsheetUrl in the example above to use the share link for your spreadsheet
Change nameField to be the name of the column you want to display


## index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Petition Test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js"></script>
    <script type="text/javascript">

      function showSigners(opts) {
        if (!opts.publicSpreadsheetUrl || !opts.nameField || !opts.rootElementId) {
          alert("Couldn't load spreedsheet: must provide publicSpreadsheetUrl, nameField, and rootElementId")
        } else {
          var root = document.getElementById(opts.rootElementId)
          if (!root) {
            console.log("Couldn't find root element", opts.rootElementId)
          } else {
            Tabletop.init({
              key: opts.publicSpreadsheetUrl,
              simpleSheet: true,
              callback: function(data, tabletop) {
                var list = document.createElement('ul')
                for (var i=0; i<data.length; i++) {
                  var el = document.createElement('li')
                  el.innerText = data[i][opts.nameField]
                  list.appendChild(el)
                }
                root.innerHTML = ''
                root.appendChild(list)
              }
            })
          }
        }
      }

      window.addEventListener('DOMContentLoaded', function() {
        showSigners({
          publicSpreadsheetUrl: 'https://docs.google.com/spreadsheets/d/1aNb7cy2GkbZ2SgzWyz-nJ8UBh9gTtdL-MtTKJz1wegY/edit?usp=sharing',
          nameField: "What's your name?",
          rootElementId: 'signers'
        })
      })
    </script>
  </head>
  <body>
    <h1>Some site</h1>
    <p>Some content</p>
    <div id="signers">
      Loading signers...
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en" dir="ltr">
	<head>
	<meta charset="utf-8">
	<title>Petition Test</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js"></script>
	<script type="text/javascript">

	function showSigners(opts) {
	if (!opts.publicSpreadsheetUrl \|\| !opts.nameField \|\| !opts.rootElementId) {
	alert("Couldn't load spreedsheet: must provide publicSpreadsheetUrl, nameField, and rootElementId")
	} else {
	var root = document.getElementById(opts.rootElementId)
	if (!root) {
	console.log("Couldn't find root element", opts.rootElementId)
	} else {
	Tabletop.init({
	key: opts.publicSpreadsheetUrl,
	simpleSheet: true,
	callback: function(data, tabletop) {
	var list = document.createElement('ul')
	for (var i=0; i<data.length; i++) {
	var el = document.createElement('li')
	el.innerText = data[i][opts.nameField]
	list.appendChild(el)
	}
	root.innerHTML = ''
	root.appendChild(list)
	}
	})
	}
	}
	}

	window.addEventListener('DOMContentLoaded', function() {
	showSigners({
	publicSpreadsheetUrl: 'https://docs.google.com/spreadsheets/d/1aNb7cy2GkbZ2SgzWyz-nJ8UBh9gTtdL-MtTKJz1wegY/edit?usp=sharing',
	nameField: "What's your name?",
	rootElementId: 'signers'
	})
	})
	</script>
	</head>
	<body>
	<h1>Some site</h1>
	<p>Some content</p>
	<div id="signers">
	Loading signers...
	</div>
	</body>
	</html>