使用 GS 从谷歌电子表格制作网络应用程序

Question

我有一个 google 电子表格，其中包含一些 google 脚本 (code.gs) 和带有 html 按钮 (index.html) 的侧边栏，与脚本一起使用。 如果可能的话，请解释我如何从这一切中制作一个网络应用程序？ 我想制作一个 Web 应用程序，只是为了在 HTML 上实现更简单的界面。

代码.gs

   function goalmod (){
  var ss = SpreadsheetApp.getActiveSheet();
  var formattedDate = Utilities.formatDate(new Date(),"GMT+5", "dd.MM.YY HH:mm");
  var row = ss.getActiveCell().getRow();
  var r = ss.getRange(row, 7, 1, 3);
  var rValues = r.getValues();
  r.setValues([["", formattedDate, rValues[0][2] +" / "+rValues[0][0]+" "+rValues[0][1]]]);
  ss.setActiveRange(ss.getRange(row, 7));
}


function technologi (){
var ss = SpreadsheetApp.getActiveSheet();
  var row = ss.getActiveCell().getRow();
  var cell = ss.getRange(row, 7);
  cell.setValue('Technologist');
}


function economists (){
var ss = SpreadsheetApp.getActiveSheet();
  var row = ss.getActiveCell().getRow();
  var cell = ss.getRange(row, 7);
  cell.setValue('Economists');
}


function countnum (){
var ss = SpreadsheetApp.getActiveSheet();
  var row = ss.getActiveCell().getRow();
  var cell = ss.getRange(row, 7);
  var nomerscheta = ss.getRange(row, 13).getValue();
  cell.setValue('Count'+" "+nomerscheta);
}


function ZPutechnologov (){
var ss = SpreadsheetApp.getActiveSheet();
  var row = ss.getActiveCell().getRow();
  var cell = ss.getRange(row, 7);
  var ZPnum = ss.getRange(row, 12).getValue();
  cell.setValue('ZP'+" "+ZPnum+'gave to technologist');
}


function goal1 ()
{
goalmod();
technologi();
}


function goal2 ()
{
goalmod();
economists();
}


function goal3 ()
{
goalmod();
countnum();
}


function goal0 ()
{
goalmod();
ZPutechnologov();
}

function newzakaz() {
   var sheet = SpreadsheetApp.getActiveSheet();
 var lastRow = sheet.getLastRow();
 var lastDateCell = sheet.getRange(lastRow+1, 10);
 var rangeToCopy = sheet.getRange(lastRow, 10);
 rangeToCopy.copyTo(lastDateCell);

  var city = sheet.getRange(lastRow+1, 4);
 var rangeToCopy = sheet.getRange(lastRow, 4);
 rangeToCopy.copyTo(city);

  var tel = sheet.getRange(lastRow+1, 5);
 var rangeToCopy = sheet.getRange(lastRow, 5);
 rangeToCopy.copyTo(tel);

  var mail = sheet.getRange(lastRow+1, 6);
 var rangeToCopy = sheet.getRange(lastRow, 6);
 rangeToCopy.copyTo(mail);

  var formattedDate = Utilities.formatDate(new Date(),"GMT+5", "dd.MM.YY HH:mm");
  var DateCell = sheet.getRange(lastRow+1, 8);
  DateCell.setValue(formattedDate);
  var CreateDate = sheet.getRange(lastRow+1, 18);
   CreateDate.setValue(formattedDate);


 var lastNumberCell = sheet.getRange(lastRow+1, 1);
  var nextnumber = sheet.getRange("B2").getValue();
  lastNumberCell.setValue(nextnumber);

  var FirstCell = sheet.getRange(lastRow+1, 2);
  sheet.setActiveRange(FirstCell);
}

function showSidebar() {

  var html = HtmlService.createHtmlOutputFromFile('index')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setTitle('My custom sidebar')
      .setWidth(50);
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .showSidebar(html);
}

index.html

    <style>
.but {
  color: black;
  border: 0px;
  position: relative;
  top: -8px;
  width: 284px;
  padding-top: 8px;
  padding-bottom: 8px;
     -webkit-transition: 0.8s ease-in-out;
} 

button:hover {
  cursor: pointer;
    background-color: rgb(106, 178, 242);
}

.goal0 {
  background-color: #FCE5CD;
}
.goal1 {
  background-color: #F9CB9C;
}
.goal2 {
  background-color: #FFE599;
}
.goal3 {
  background-color: #D9EAD3;
}
.goalmod {
  background-color: #93C47D;
}

.newzakaz {
  background-color: #87D37C;
    margin-bottom: 15.5px;
}



</style>
 <button type="button" class="but newzakaz" onclick="google.script.run.newzakaz()">Новый заказ</button>
  <button type="button" class="but goal0"  onclick="google.script.run.goal0()">ЗП у технологов</button>
    <button type="button" class="but goal1" onclick="google.script.run.goal1()">Технологи</button>
      <button type="button" class="but goal2" onclick="google.script.run.goal2()">Экономисты</button>
        <button type="button" class="but goal3" onclick="google.script.run.goal3()">Счет</button>
          <button type="button" class="but goalmod" onclick="google.script.run.goalmod()">В историю</button>

Answer 1

您实际上不需要创建新的独立脚本文件，您可以使用绑定到电子表格的脚本文件。 您将需要 两个 主要更改，第一个是通过其 ID 访问您的电子表格，因为工作表将不再“活动”，第二个是将您的函数 showSidebar() 替换为一个叫doGet()的新的。

doGet 函数实际上是所有 web 应用程序的常规“入口点”，该函数将告诉服务器开始。

此函数中的代码应与您在showSidebar() 中使用的代码基本相同，但不应以

结尾

SpreadsheetApp.getUi().showSidebar(html);

它变得简单

return html;

因为你的名为 html 的变量实际上是你的 html 文件的呈现。

然后（这将是最后一件事）您必须保存脚本版本并将其部署为 web 应用程序。 （详见this post）