Question

我有一个带有一些google脚本（code.gs）的google电子表格和带有html按钮（index.html）的侧边栏，使用脚本。请解释我是否有可能从这一切创建一个Web应用程序？我想创建一个Web应用程序，只是为了更简单的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>

Answer 1

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

这个doGet()函数实际上是所有webapps的传统“入口点”，这个函数将告诉服务器开始。

此函数中的代码应基本上与您在doGet中使用的代码相同，而不是以

结尾

showSidebar()

它变得简单

SpreadsheetApp.getUi().showSidebar(html);

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

然后（这将是最后一件事）您必须保存脚本版本并将其部署为webapp。（有关详细信息，请参阅this post）

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

1 个答案: