来自 Google 电子表格中存储的数据的 HTML 列表，用于 Apps 脚本网站/webapp - 模板化 HTML

Question

我正在尝试制作的我的 Google Apps 脚本网络应用程序有一个按钮，用户可以单击该按钮并将其名称添加到其中。我正在尝试将这些信息保存为网站上的列表，这样如果我刷新页面，它仍然存在，并且如果其他人正在访问该网站，它仍然存在。

这是添加按钮 - https://snag.gy/EOgx5T.jpg
这些是从按钮添加的示例名称 - https://snag.gy/8GtX3Y.jpg

我不想将其保存为本地存储。有没有办法将信息保存到 Google 电子表格并将该电子表格用作数据库或其他东西？

索引.html

<div id="artistTabs">
   <ul id="artistList">
     <li><a onClick="addArtist(); return false;" href="">+</a></li>
  </ul>
</div>

js.html

function addArtist()
{
   console.log("add artist here");
   var artistName = prompt("enter artist whole first name and initial of last name");
    if (artistName === "") //user pressed 'ok' but input field was empty
    {
        return;
    }
    else if (artistName != "" && artistName !== null) //user inputs something and hits 'ok'
    {
         var ul = document.getElementById("artistList");
         var li = document.createElement("li");
         var a = document.createElement("a");
         a.setAttribute("href", "#");
         a.textContent = artistName;
         li.appendChild(a);
         ul.appendChild(li);   
         li.onclick = function()
         {
            test(); return false;
         };
   }
   else //user hits 'cancel' or 'x' 
   {
        return;
   }
}

function test()
{
    console.log("test");
}

我是否需要在 Google Apps 脚本“xxx.gs”或“xxx.js”文件中添加某些内容以保存信息/访问数据库/某些内容？

编辑

我更新了一些代码。我可以将艺术家写入电子表格，然后我可以从电子表格中取回艺术家姓名。我仍然对如何将列表中的新项目显示为模板化 html 感到困惑。

索引.html

<div id="artistTabs">
    <ul id="artistList">
        <li><a onClick="addArtist(); return false;" href="">+</a></li>
    </ul>
</div>

js.html

function addArtist()
{
  var artistName = prompt("enter artist whole first name and initial of last name");

  if (artistName === "") //user pressed 'ok' but input field was empty
  {
    return;
  }
  else if (artistName != "" && artistName !== null) //user inputs something and hits 'ok'
  {
    google.script.run
      .withSuccessHandler(writeSuccess(artistName))
      .withFailureHandler(writeFailure)
      .writeArtistName(artistName);
  }
  else //user hits 'cancel' or 'x'
  {
    return;
  }
}

function writeSuccess(artistName)
{
  console.log("write success: " + artistName);
}

function writeFailure()
{
  console.log("write failure - email myself why it failed and the time it failed");
} 

代码.gs

var ss = SpreadsheetApp.openById('id');
var sheet = ss.getSheets()[0];

function doGet()
{
  return HtmlService.createTemplateFromFile('index').evaluate();
}

function getContent(filename)
{
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function writeArtistName(artistName)
{
  var lastRow = sheet.getLastRow() + 1; //gets next unused row
  var column = 1; //first column
  var lastCell = sheet.getRange(lastRow, column);

  lastCell.setValue(artistName); //sets next blank row as artistName
}

function getArtistName()
{
  var lastRow = sheet.getLastRow(); //gets last row with content
  var column = 1;

  var lastArtist = sheet.getRange(lastRow, column).getValue(); //gets last row with artistName

  Logger.log(lastArtist);

  var x = '<li><a onClick="test(); return false;" href="#">';
  var y = lastArtist;
  var z = '</a></li>';

  var xyz = x + y + z;

  Logger.log(xyz);
}

如何调用code.gs文件中的getArtistName()函数，将艺术家姓名设置为我的无序列表中的列表项，并在网站上显示为html模板？我不能在 .gs 文件中调用 document.getElementById，因为它说的是 ReferenceError: "document" is not defined。

即使我重新加载页面，我也需要将列表保留在网站上，并且任何人都可以从任何地方访问它

Answer 1

您需要在服务器上构建 HTML。所以把你的 HTML 改成这样：

<div id="artistTabs">
   <ul id="artistList">
      <?!= createTheList(); ?>
  </ul>
</div>

服务器代码

function createTheList() {
  var artists,howManyRows,howManyColumns,i,L,newList,ss,sh,startingRow,startingColumn,
    thisArtist,templateHTML,thisRow;

  ss = SpreadsheetApp.openById('file ID goes here'); //Get spreadsheet
  sh = ss.getSheetByName('sheet tab name');

  startingRow = 2;
  startingColumn = 1;
  howManyRows = sh.getLastRow() - 1;
  howManyColumns = 1;

  artists = sh.getRange(startingRow,startingColumn,howManyRows,howManyColumns)
    .getValues();//Get all artist names
  L = artists.length; //How many artist in the list

  artists = artists.toString().split(",");//Flatten 2D array to 1D

  //template of blank row of HTML with a merge string of "z_z_z_z_z"
  templateHTML = "<li><a onClick="addArtist(); return false;" href="">z_z_z_z_z</a></li>";

  newList = "";//Initialize

  for (i=0;i<L;i+=1) {
    thisRow = "";//reset on every loop
    thisArtist = artists[i];

    thisRow = templateHTML.replace("z_z_z_z_z",thisArtist);//Inject artist name
    newList = newList + thisRow;//Keep adding to the list
  };

  return newList;
};

您可以将数据发送到 Google 电子表格。在您的情况下，收集的值的变量名称为artistName。因此，您可以像这样在 .gs 文件中调用 Apps 脚本函数：

GS 文件：

function writeToSpreadsheet(data) {
  var ss, sh;

  //Save data to a spreadsheet
  ss = SpreadsheetApp.openById('file ID goes here'); //Get spreadsheet
  sh = ss.getSheetByName('sheet tab name');
  sh.appendRow([data]);//Append data to end of sheet tab data
};

客户端代码：

<script>
  function someFunctionName(artistName) {//Either pass data to function
    //Or get the data
    var artistName = code to get the value;

    google.script.run
      .withSuccessHandler(serverCodeCompleted)
     .writeToSpreadsheet(artistName);
  };

  function serverCodeCompleted() {
    //Show message to the user
    some code here
  };
</script>

要让数据显示在您的页面中，您应该使用模板化的 HTML。

Apps Script documentation