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

Make web app from google spreadsheet with GS

我有一个 google 电子表格,其中包含一些 google 脚本 (code.gs) 和带有 html 按钮 (index.html) 的边栏,使用脚本。 如果可能,请向我解释如何从所有这些中制作网络应用程序? 我想在 HTML.

上制作一个更简单的界面的网络应用程序

code.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>

您实际上不需要创建新的独立脚本文件,您可以使用绑定到您的传播的脚本文件sheet。 您需要 两个 主要更改,第一个是通过 ID 访问您的点差sheet,因为 sheet 不会是 "active"不再,第二个是用一个名为 doGet().

的新函数替换你的函数 showSidebar()

这个doGet函数实际上是所有webapps的常规'entry point',告诉服务器启动的函数。

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

结尾
SpreadsheetApp.getUi().showSidebar(html);

它变得简单

return html;

因为名为 html 的变量实际上是 html 文件的渲染。

然后(这将是最后一件事)您必须保存脚本的一个版本并将其部署为 Web 应用程序。 (详见this post