有什么方法可以簡化 google.script.run.withSuccessHandler 中來自 code.gs 的各種函數調用嗎？ Google Apps 腳本

Question

我在我的谷歌工作表中創建了一個模態對話框，您可以在其中查看從工作表獲得的數據。 這種模態只是為了以有序的方式讀取工作表的數據，並且比谷歌工作表的工作表中的單元格更美觀。

模態工作正常，但我有 1 個問題，如下：

我的 coge.gs 中有幾個函數可以從我的谷歌表中獲取數據。 同時，我必須使用google.script.run.withSuccessHandler在我的 html 文件中調用這些函數，以便能夠在我的模板中獲取數據。

有什么方法可以簡化單個google.script.run.withSuccessHandler中函數調用的過程？

這是我的代碼 html：

google.script.run.withSuccessHandler(function (value) {document.getElementById('nombreclientePE').textContent = value;} ).clientePedidoPE();
google.script.run.withSuccessHandler(function (value) {document.getElementById('numeropedidoPE').textContent = value;} ).numeroPedidoPE();
google.script.run.withSuccessHandler(function (value) {document.getElementById('fechapedidoPE').textContent = value;} ).fechaPedidoPE();
google.script.run.withSuccessHandler(function (value) {document.getElementById('estadopedidoPE').textContent = value;} ).estadoPedidoPE();
google.script.run.withSuccessHandler(function (value) {document.getElementById('logometodopagopedidoPE').src = value;} ).logoMetodoPagoPE();
google.script.run.withSuccessHandler(function (value) {document.getElementById('metodopagopedidoPE').textContent = value;} ).metodoPagoPE();
google.script.run.withSuccessHandler(function (value) {document.getElementById('gastosenviopedidoPE').textContent = value;} ).gastosEnvioPE();
google.script.run.withSuccessHandler(function (value) {document.getElementById('metodoenviopedidoPE').textContent = value;} ).metodoEnvioPE();
google.script.run.withSuccessHandler(function (value) {document.getElementById('subtotalpedidoPE').textContent = value;} ).subtotalPedidoPE();
google.script.run.withSuccessHandler(function (value) {document.getElementById('decuentocantidad%pedidoPE').textContent = value;} ).descuentoCantidadPorcentajePedidoPE();
google.script.run.withSuccessHandler(function (value) {document.getElementById('decuentocantidad€pedidoPE').textContent = value;} ).descuentoCantidadEurosPedidoPE();
google.script.run.withSuccessHandler(function (value) {document.getElementById('decuentototalpedidoPE').textContent = value;} ).descuentoTotalPedidoPE();
google.script.run.withSuccessHandler(function (value) {document.getElementById('totalpedidoPE').textContent = value;} ).totalPedidoPE();
google.script.run.withSuccessHandler(function (value) {document.getElementById('direccionpedidoPE').textContent = value;} ).direccionEnvioPE();

鏈接到帶有現場演示的 google sheet 文檔。 要打開模式窗口，活動單元格必須位於任何客戶行的任何單元格中。 然后，單擊“查看訂單”按鈕。

谷歌表格演示現場

Answer 1

代碼.gs

const o = {
  'nombreclientePE': () => clientePedidoPE(),
  'numeropedidoPE': () => numeroPedidoPE(),
  'fechapedidoPE': () => fechaPedidoPE(),
  'estadopedidoPE': () => estadoPedidoPE(),
  'logometodopagopedidoPE': () => logoMetodoPagoPE(),
  'metodopagopedidoPE': () => metodoPagoPE(),
  'gastosenviopedidoPE': () => gastosEnvioPE(),
  'metodoenviopedidoPE': () => metodoEnvioPE(),
  'subtotalpedidoPE': () => subtotalPedidoPE(),
  'decuentocantidad%pedidoPE': () => descuentoCantidadPorcentajePedidoPE(),
  'decuentocantidad€pedidoPE': () => descuentoCantidadEurosPedidoPE(),
  'decuentototalpedidoPE': () => descuentoTotalPedidoPE(),
  'totalpedidoPE': () => totalPedidoPE(),
  'direccionpedidoPE': () => direccionEnvioPE()
};

function PE(input) {
  const output = [];
  for (const id of input) {
    const value = o[id]();
    output.push([id, value]);
  }
  return output;
}

function formVerPedido2(numPedido) {
  var hoja = SpreadsheetApp.getActiveSheet();
  var fila = hoja.getCurrentCell().getRow();
  var numPedido = hoja.getRange(fila,3,1,1).getValue();
  var template = HtmlService.createTemplateFromFile('PedidosIndex');
  template.input = Object.keys(o);
  var pedidoContendido = template.evaluate()
    .setWidth(800)
    .setHeight(1300);


  //var logoMetodoPago = logoMetodoPagoPE();
  //htmlOutput = logoMetodoPago;

 SpreadsheetApp.getUi().showModalDialog(pedidoContendido, 'Pedido #' + numPedido + '');
}

索引.html

    <script>const input = <?!= JSON.stringify(input) ?>;</script>
    <?!= include('PedidosJavaScript'); ?> <!-- See PedidosJavaScript.html file -->

js.html

google.script.run.withSuccessHandler(onSuccess).PE(input);
function onSuccess(output) {
  for (const [id, value] of output) {
    document.getElementById(id).textContent = value;
  }
}

Answer 2

如果信息來自表單：代碼 html

  function formSubmit() {
    var data = document.forms[0]
    var tab = []
    for (var i=0;i<data.length;i++){
      if (data[i].type != "button"){
        tab.push(data[i].value)
      }
    }
    google.script.run.addData(tab);
    document.forms[0].reset()
  }

代碼 gs

function addData(tab) {
  mySheet.getRange(getLastDataRow(bdd) + 1,1,1,tab.length).setValues([tab])
}

Answer 3

我的建議是：將所有函數替換為 numeroPedidoPE(), fechaPedidoPE() ... 僅一個（假設數據在同一行）

function transferPedidoData() {
  var hoja = SpreadsheetApp.getActiveSheet();
  var fila = hoja.getCurrentCell().getRow();
  var pedidoData = hoja.getRange('B'+fila+':S'+fila).getValues();
  return pedidoData;
}

然后，在html文件中，添加這個腳本

<script>
  <? 
    var pedido = transferPedidoData();
  ?>
</script>

最后，在您的 PedidosHTML.html 文件中調用不同的數據，如下所示，x 根據需要

<?= pedido[0][x] ?>

• 這里的小演示（我添加了 2 個文件，因為我不想修改你的腳本） https://docs.google.com/spreadsheets/d/1QNMs99gOhH5WfrutYWo08o4jGOztFIBFQGbjpaYfSjQ/edit?usp=sharing
• 編輯 = 我也嘗試在您的電子表格中實現此方法，希望這有助於您理解（因此只有一次調用 GSheet） https://docs.google.com/spreadsheets/d/1CtZJNYEVJLkexB1PCiy0c4liJT72iOxWQhS1W93khT8/edit?usp=sharing
• 要從“客戶端”傳輸數據，請保留function direccionEnvioPE()原樣，在 html 中添加var direccionEnvio = direccionEnvioPE(); 並使用如下地址<?= direccionEnvio ?>

Answer 4

這絕對需要簡化。 在客戶端，您需要這樣的東西：

function gscriptRun(fnName) {
  google.script.run
    .withSuccessHandler(function (value) {
      document.getElementById(fnName).textContent = value;
    })
    .runFunc(fnName);
}

const fnsToRun = ['clientePedidoPE', 'numeroPedidoPE'];
fnsToRun.forEach(fn => gscriptRun(fn));

我們將所有google.script.run調用包裝在一個函數中。 然后我們創建一個我們想要在服務器端調用的函數名稱數組，並使用Array.prototype.forEach()調用它們。

在服務器端你需要有這個功能：

function runFunc(fnName) {
  return globalThis[fnName]();
}

它只會按名稱執行函數。

然而，這看起來不是一個很好的方法，因為有太多的 API 調用。 您可能希望重新編寫代碼，以便只需一次調用即可提取所有數據。

Answer 5

如果您想從電子表格中的不同位置獲取值，您可以遵循這種類型的結構。 就我個人而言，我會將它們排成一行並使用 getValues() 而不是分別獲取每個值。

GS：

function getMyData(tA) {
  const ss = SpreadsheetApp.getActive();
  const sh = ss.getSheetByName("Sheet0");
  const rgObj = {'nombreclientePE':'A1','numeropedidoPE':'A2','fechapedidoPE':'A3','estadopedidoPE':'A4','logometodopagopedidoPE':'A5','metodopagopedidoPE':'A6','gastosenviopedidoPE':'A7','metodoenviopedidoPE':'A8','subtotalpedidoPE':'A9','decuentocantidad%pedidoPE':'A10','decuentocantidad€pedidoPE':'A11','decuentototalpedidoPE':'A12','totalpedidoPE':'A13','direccionpedidoPE':'A14'}
  let obj = {pA:[]}
  tA.forEach(p => {
    obj.pA.push(p);
    obj[p] = sh.getRange(rgObj[p]).getValue();
  });
  return obj;
}

html：

<!DOCTYPE html>
 <html>
   <head>
     <title>My Title</title>
   </head>
   <body>
     <!-- You provide the body -->
     <script>
       window.onload = getData()
       function getData() {
         const tA = ['nombreclientePE','numeropedidoPE','fechapedidoPE','estadopedidoPE','logometodopagopedidoPE','metodopagopedidoPE','gastosenviopedidoPE','metodoenviopedidoPE','subtotalpedidoPE','decuentocantidad%pedidoPE','decuentocantidad€pedidoPE','decuentototalpedidoPE','totalpedidoPE','direccionpedidoPE'];
         google.script.run
         .withSuccessHandler((obj) => {
           obj.pA.forEach(p => {
             document.getElementById(e).textContent = obj[p];
           })
         })
         .getMyData(tA) 
       }
     </script>
   </body>
 </html>

Answer 6

我認為最簡單的方法是使用單個google.script.run調用包裝函數，該函數返回所有數據，然后在 JavaScript 中設置值。

在數組中列出您的元素，然后在 Success 上循環遍歷它們，而不是對每個元素使用google.script.run調用：

const elements = [
      'nombreclientePE',
      'numeropedidoPE',
      'fechapedidoPE',
      'estadopedidoPE',
      'metodopagopedidoPE',
      'gastosenviopedidoPE',
      'metodoenviopedidoPE',
      'subtotalpedidoPE',
      'decuentocantidad%pedidoPE',
      'decuentocantidad€pedidoPE',
      'decuentototalpedidoPE',
      'totalpedidoPE',
      'direccionpedidoPE',
    ]
    
    const logoId = 'logometodopagopedidoPE'
    
    function callGasFn() {
      google.script.run.withSuccessHandler(setData).getAllValues()
    }
    
    function setData(data) {
      elements.forEach((x, i) => document.getElementById(x).textContent = data[0][i])
      document.getElementById(logoId) = data[1]
    }
   
    callGasFn()

然后在 Apps Script 你有你的getAllValues()函數：

function getAllValues() {
  return [
    [
      clientePedidoPE(),
      numeroPedidoPE(),
      fechaPedidoPE(),
      estadoPedidoPE(),
      metodoPagoPE(),
      gastosEnvioPE(),
      metodoEnvioPE(),
      subtotalPedidoPE(),
      descuentoCantidadPorcentajePedidoPE(),
      descuentoCantidadEurosPedidoPE(),
      descuentoTotalPedidoPE(),
      totalPedidoPE(),
      direccionEnvioPE(),
    ],
    logoMetodoPagoPE()
  ]
}

我將徽標從主數組中分離出來，因為它設置了src而不是textContent 。

在您提供的工作表中，客戶工作表中缺少Maria del Campo - 我不知道這是否有意，但它確實導致direccionEnvioPE()失敗，因為工作表中沒有她的數據。