CODEWITHSUNDEEP
htmlwordpressgoogle-apps-script
Curtis Humphreys
Curtis Humphreys

Reputation: 79

Link Wordpress with Google Scripts and Google Web Apps

Essentially I want to build to use my Wordpress site to build out the html component of a Google WebApp that i've designed. The WebApp has been completely designed in Google WebApp and so is just Raw HTML and quite ugly. I can make something much nicer in Wordpress (Aesthetically) but i'm unsure how (or even if it's possible) to call my google scripts code.gs file from my wordpress site?

Here's my current Script and HTML file: (note it's not complete yet but you'll get the drift)

document.getElementById("book").addEventListener("change",getData);

function getData(){
  var grabber = document.getElementById("book").value;

     google.script.run.withSuccessHandler(updateBook).getBook(grabber)       
         }

function updateBook(bookn){
     document.getElementById("bookn").innerHTML = bookn;
}
<html>

<head>
  <base target="_self">
  <meta charset="utf-8">
  <title>Bible Book Context Sheets</title>
  <meta name="generator" content="Google Web Designer 9.0.0.0824">
</head>
<body>
<h1 style="text-align: center;"><strong>BIBLE QUICK REFERENCE SHEETS</strong></h1>
<hr />
<p>&nbsp;<select id="book">
<option>Select a Book</option>
<option>Genesis</option>
<option>Exodus</option>
<option>Leviticus</option>
<option>Numbers</option>
<option>Deuteronomy</option>
<option>Joshua</option>
<option>Judges</option>
<option>Ruth</option>
<option>1st Samuel</option>
<option>2nd Samuel</option>
<option>1st Kings</option>
<option>2nd Kings</option>
<option>1st Chronicles</option>
<option>2nd Chronicles</option>
<option>Ezra</option>
<option>Nehemiah</option>
<option>Esther</option>
<option>Job</option>
<option>Psalms</option>
<option>Proverbs</option>
<option>Ecclesiastes</option>
<option>Song of Solomon</option>
<option>Isaiah</option>
<option>Jeremiah</option>
<option>Lamentations</option>
<option>Ezekiel</option>
<option>Daniel</option>
<option>Hosea</option>
<option>Joel</option>
<option>Amos</option>
<option>Obadiah</option>
<option>Jonah</option>
<option>Micah</option>
<option>Nahum</option>
<option>Habakkuk</option>
<option>Zephaniah</option>
<option>Haggai</option>
<option>Zechariah</option>
<option>Malachi</option>
<option>Matthew</option>
<option>Mark</option>
<option>Luke</option>
<option>John</option>
<option>Acts</option>
<option>Romans</option>
<option>1st Corinthians</option>
<option>2nd Corinthians</option>
<option>Galatians</option>
<option>Ephesians</option>
<option>Philippians</option>
<option>Colossians</option>
<option>1st Thessalonians</option>
<option>2nd Thessalonians</option>
<option>1st Timothy</option>
<option>2nd Timothy</option>
<option>Titus</option>
<option>Philemon</option>
<option>Hebrews</option>
<option>James</option>
<option>1st Peter</option>
<option>2nd Peter</option>
<option>1st John</option>
<option>2nd John</option>
<option>3rd John</option>
<option>Jude</option>
<option>Revelation</option>
</select></p>
<h2 style="text-align: center;" id="bookn">BOOK</h2>
  </body>

</html>

So this references my code.gs file:

function doGet(e){

  return HtmlService.createHtmlOutputFromFile("page");

}


function getBook(grabber){

  var ss = SpreadsheetApp.openById("1PYuEuroixBQ7UsNry6qKkship_e7Lb3GwH3wuDwgass");
  var ws = ss.getSheetByName("Estimate");
  var data = ws.getRange(1, 1, ws.getLastRow(), 34).getValues();
  
  var bookList = data.map(function(r){return r[0];});
  var refList = data.map(function(r){return r[0];});
  var position =  bookList.indexOf(grabber)
  
  if(position > -1){
  return refList[position];
  } else {
    return 'Unavailable';
  }
}

I can't simply put the code.gs file in the same directory so i'm wondering if there is a way to remotely reference is so that i can make the call from the wordpress site directly?

Thanks,

Upvotes: 0

Views: 580

Answers (1)

TheMaster
TheMaster

Reputation: 50452

Apps script Webapp can receive inputs from

  • google.script.run in published webapp hosted on script.google.com
  • post using doPost from anywhere in the internet

You can post to your webapp and receive back data. Alternatively, if the intention is just to get data from Google sheets, you can use sheets api() to get data.

Upvotes: 1

Related Questions