堆棧內存溢出
  簡體   English   中英

使用谷歌工作表腳本編輯器將數據提交到不同的標簽

[英]Submitting data to different tabs using google sheet script editor

 原文  2020-02-17 14:03:23  7   2    javascript/ google-apps-script/ google-sheets/ google-apps

問題描述

在我的電子表格腳本編輯器中，我有以下代碼：

代碼.gs

function doGet() {
    return HtmlService.createTemplateFromFile('checkForm.html')
}

function doPost1(e) {

  Logger.log(JSON.stringify(e))
  if (!e || !e.parameter) {
    return;
  }
  var lock = LockService.getScriptLock();
  lock.tryLock(10 * 1000);
  var scriptProp = PropertiesService.getScriptProperties();

  try {
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var checkForm = ss.getSheetByName("checkForm");
    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
    var nextRow = sheet.getLastRow() + 1;
    var newRow = headers.map(function(header) {
      return header === 'Timestamp' ? new Date() : e.parameter[header]
    });
    sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow]);

    var startTime = newRow[1];
    var endTime = newRow[2];
    var cal = CalendarApp.getCalendarById("ID");
    var allEvents = cal.getEvents(new Date(startTime), new Date(endTime));
    if (allEvents.length > 0) {
    return HtmlService.createTemplateFromFile('calendarAgenda.html')
    }else {
    return HtmlService.createTemplateFromFile('bookingForm.html')
    };

  }

  catch (e) {
    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  finally {
    lock.releaseLock()
  }
}

function doPost2(e) {

  Logger.log(JSON.stringify(e))
  if (!e || !e.parameter) {
    return;
  }
  var lock = LockService.getScriptLock();
  lock.tryLock(10 * 1000);
  var scriptProp = PropertiesService.getScriptProperties();

  try {
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var bookForm = ss.getSheetByName("bookForm");
    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
    var nextRow = sheet.getLastRow() + 1;
    var newRow = headers.map(function(header) {
      return header === 'Timestamp' ? new Date() : e.parameter[header]
    });
    sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow]);    

    return ContentService
    .createTextOutput(JSON.stringify('Successfully received. Thank you!'))
      .setMimeType(ContentService.MimeType.JSON)
  }

  catch (e) {
    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  finally {
    lock.releaseLock()
  }
}

checkForm.html

<!DOCTYPE html>
<body>
<form name="class1Check" id="class1Check" action="ScriptURL" target="_self" method="POST">
Start Date & Time
<input class="w3-input w3-border" type="datetime-local" required name="Start Date & Time">
<br><br>
End Date & Time
<input class="w3-input w3-border" type="datetime-local" required name="End Date & Time">
<button type="submit" onclick="google.script.run.doPost1(this.parentNode)">Check</button>
</form>
<script>
function postData(form) {
  google.script.run.withSuccessHandler(postData).doPost1(e);
}
</script>
</body>
</html>

預訂表格.html

<!DOCTYPE html>
<body>
<form name="class1Booking" id="class1Booking" action="ScriptURL" target="_self" method="POST">
<inputs> ..
<button type="submit" onclick="google.script.run.doPost1(this.parentNode)">Check</button>
</form>
<script>
function postData(form) {
  google.script.run.withSuccessHandler(postData).doPost2(e);
}
</script>
</body>
</html>

goGet 函數返回“checkForm.html”頁面，提交時應該運行 doPost1 函數將數據發送到電子表格中的選項卡“checkForm”，然后返回第二個頁面“bookingForm.html”，提交時應該運行 doPost2 函數將數據發送到選項卡“bookForm”，然后返回某個文本輸出

當我提交檢查表單時，我收到錯誤“找不到腳本函數：doPost”，我想我可能在 google.script.run 方面遇到了一些問題，我嘗試多次修改但沒有成功。 任何幫助和提前致謝

2 個解決方案

解決方案1
 0  2020-02-17 16:56:31

忘記 doPost()。 嘗試這樣的事情。

HTML：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>#msg{display:none;}</style>
  </head>
  <body>
    <form>
      <!--><inputs type="text" name="name1">--> 
      <button type="button"  value="Submit" onclick="processForm(this.parentNode);" />
      </form>
 <div id="msg"></div>
 <script>
   $(function(){
     //You can get stuff from the server after the dom has loaded.  I know it takes some time but it's a simple way to intialize.  Personally for my own sutff Id rather do this that use templated html
   });

  function processFormC(form) {
    //input validation
    google.script.run
    .withSuccessHandler(function(obj){
      $('#msg').css("display","block");
      $('#msg').html(obj.msg);
    })
    .processFormS(form);
  }
</script>
  </body>
</html>

GS：

function processFormS(obj) {
  //obj.name1...
  return {msg:'Got it.'}
}

function doGet() {
    return HtmlService.createHtmlOutputFromFile('whatever file name')
}

我個人更喜歡將所有的 javascript 和 css 放在同一個文件中，因為以后更容易找到。 是的，我知道它會變大，但同樣是我的選擇，它不一定是您的選擇。

解決方案2
 0 已采納  2020-02-18 10:20:52

您沒有正確使用google.script.run函數，正如文檔中所述，您只能返回以下類型的值：

數字、布爾值、字符串或空值，以及由基元、對象和數組組成的 JavaScript 對象和數組。

在您的情況下，您試圖返回一個不允許的 textOutput對象，此類用於Web Apps函數（doGet(e) 或 doPost(e)）。

在有關 [客戶端到服務器通信] ( https://developers.google.com/apps-script/guides/html/communication ) 的文檔中，解釋了如何使用 google.script.run。 這是一個適用於您的案例的示例，以便您可以更好地了解它的工作原理：

checkForm.html

<!DOCTYPE html>
<body>
<form name="class1Check" id="class1Check" target="_self" method="POST">
Start Date & Time
<input class="w3-input w3-border" type="datetime-local" required name="Start Date & Time">
<br><br>
End Date & Time
<input class="w3-input w3-border" type="datetime-local" required name="End Date & Time">
<button onclick="postData(this.parentNode)">Check</button>
</form>
<script>
//It’s run when form button is clicked 
function postData(form) {
   //Calls doSomething function in code.gs with form parameter
  google.script.run.withSuccessHandler(handlerFunction).doSomething(form);
}

//Handles the response from doSomething function
function handlerFunction(responseData) {
  //Logs ‘It worked!’ in developer console
  console.log(responseData);
}
</script>
</body>
</html>

代碼.gs

//Web App function
function doGet() {
    return HtmlService.createTemplateFromFile('checkForm.html')
}

//Apps script function to receive form object and return response
function doSomething(form) {
//Do something
  return ‘It worked!’;
}

Apps Script 的 Web 應用程序被設計為單頁應用程序（一個 HTML 頁面）而不是多頁應用程序，盡管您可以參考不同的解決方法示例來實現多頁行為：

[1] 在 Google Apps 腳本中鏈接到另一個 HTML 頁面

[2] https://sites.google.com/corp/view/googlappsscript/recent-scripts/multiple-page-webapp-example

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使用腳本編輯器在谷歌工作表中選擇整行並以不同顏色突出顯示？ 調試下的 Google 工作表和腳本編輯器返回不同的結果 使用 let 在 Google 工作表腳本編輯器上聲明變量 使用谷歌應用腳本將谷歌工作表中的數據拆分到另一張工作表 使用GAS在Google表格標簽之間添加數據 將一張工作表中的原始數據排序到Google App腳本中新工作表中的單獨標簽中 Javascript HideRows（Google表格腳本編輯器） Google Sheet Script Editor - 數組的 setValues 在 Google Sheet Script Editor 中計算日期差異 做多個SUMIFS-Google表格腳本編輯器
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM