HTML buttons in Google Script not working

74 Views Asked by At

My "Upload Content" Google Form linked to a Google Sheet's Google Script is working, but the HTML is failing. Google Sheet:

Column A Column B Column C Column D Column E
Timestamp Upload Content Email Address Add comma separated tags Shortened name

Here is Code.gs:

function onOpen() {
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .createMenu('Website')
      .addItem('Search', 'showDialog')
      .addToUi();
}
function showDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Index')
      .setWidth(400)
      .setHeight(300);
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .showModalDialog(html, 'Search');
}
function search(emails, tags) {
  var returnData = [];
  var sheet = SpreadsheetApp.getActiveSheet();
  var data = sheet.getDataRange().getValues();
  var esplit = null;
  if(emails)
    esplit = emails.split(', ');
  var tsplit = null;
  if(tags)
    tsplit = tags.split(', ');
  var arr = [];
  for (var i = 1; i < data.length; i++) {
    if(tags)
      tsplit.forEach(
        (element) => arr.push(data[i][3].split(', ').includes(element))
      )
    if ( ( !emails || ( esplit.includes(data[i][2]) ) ) && ( !tags || ( arr.includes(true) ) ) ) {
      returnData.push(data[i]);
    }
    arr = [];
  }
  return returnData;
}

Here is Index.html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form action="javascript:void(0);" onsubmit="search();">
      <p><label for="emails">Enter people to view files from(comma seperated):</label> <input type="text" id="emails"></p>
      <p><label for="tags">Enter tags to find(comma seperated):</label> <input type="text" id="tags"></p>
      <button type="submit">find files</button>
    </form>
    <ul id="search-results"></ul>
    <script>
      function search() {
        var emails = document.getElementById("emails").value;
        var tags = document.getElementById("tags").value;
        document.getElementById("search-results").innerHTML = null;
        google.script.host.search(emails, tags).forEach(callback);
      }
      function expand(id, thing, shortened) {
        if(id.innerHTML === shortened) {
          id.innerHTML = thing;
        } else {
          id.innerHTML = shortened;
        }
      }
      function callback(ls) {
        var li = document.createElement("li");
        li.innerHTML = "<a href=\""+ls[1]+"\">" + ls[4] + "</a>: Made at <time onclick='expand(this, \"time\", \"" + ls[0] + "\");'>time</time> by <email>" + ls[2] + "</email> with <tags onclick='expand(this, \"tags\", \"" + ls[3] + "\");'>tags</tags>";
        document.getElementById("search-results").appendChild(li);
      }
    </script>
    <style>
      time{
          cursor: pointer;
          color: blue;
          font-weight:bold;
      }
      tags{
          cursor:pointer;
          color:green;
          font-weight:bold;
      }
      email{
          color:white;
      }
      body{
        background-color:#FF8800;
      }
    </style>
  </body>
</html>

I tried the HTML above, but the buttons didn't do anything.

1

There are 1 best solutions below

0
matpic On

If i understand rightly what you want to do. You want to get emails and tags from the user to write a list of these one in your google sheets file then use these one to make one folder by email ?

I'm not sure to understand what you want to do righly but if you want to connect your HTML to your JS in code.gs use the folowing code, it will pass in parameter "emails" and "tags" to search() in code.gs :

google.script.run
  .withSuccessHandler(function(returnData){
     console.log("Ssuccesfully executed search");
     google.script.host.close();
   })
   .search(emails, tags);

console.log("Test of search : close");

I hope i replied to your question.