Label HTML 服務復選框根據從 function 返回的值

Question

我已成功啟動 html 服務並顯示復選框本身。 我堅持的是讓文本在文本框旁邊顯示為 label 文本作為 function 在.gs 文件中的返回。

function 啟動 html 服務

function startHtml(){
//set up
  //can not define globally or script crashes
  var ui = SpreadsheetApp.getUi();

  //start html for selection
    var whichDevice = HtmlService.createHtmlOutputFromFile('start_html')          
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setWidth(400)
      .setHeight(200);
    //main window title
    ui.showModalDialog(whichDevice, 'Setup Criteria');
}

function 返回東西，值為 1

function randomFunc () {
  return "1";
}

html 代碼。 您可以看到我嘗試使用一個元素來獲得 randomFunc() 的返回以顯示復選框的 2 次嘗試。 我已經能夠獲得簡單的文本來顯示元素，但我需要基於 function。

<!DOCTYPE html>
<html>
  <head>    
    <input id="testing" type="checkbox" />
      <script>
        google.script.run.randomFunc();
      </script>
    
      <label for="testing">
        <script>
        google.script.run.randomFunc();
        </script>
      </label>
   </head>
</html>

Answer 1

當你的放映腳本被修改時，下面的修改怎么樣？

修改后的腳本：

<input id="testing" type="checkbox" />
<label for="testing" id="label1"></label>
<script>
  google.script.run.withSuccessHandler(e => {
    document.getElementById("label1").innerText = e;
  }).randomFunc();
</script>

在此修改中，當加載 HTML 時， randomFunc()由google.script.run運行，並且randomFunc()的返回值與document.getElementById("label1").innerText = e一起使用。

筆記：

作為另一種方法，如何使用 HTML 模板如下？ Ref在這種情況下，請進行如下修改。

HTML

 <input id="testing" type="checkbox" /> <label for="testing"><?= value?></label>

Google Apps 腳本

 function startHtml() { var ui = SpreadsheetApp.getUi(); var whichDevice = HtmlService.createTemplateFromFile('start_html'); whichDevice.value = randomFunc(); var html = whichDevice.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME).setWidth(400).setHeight(200); ui.showModalDialog(html, 'Setup Criteria'); }

Answer 2

嘗試這個：

function startHtml() {
  var ui = SpreadsheetApp.getUi();
  var html = HtmlService.createHtmlOutputFromFile('ah2').setWidth(400).setHeight(200);
  ui.showModelessDialog(html, 'Setup Criteria');
}
function getLabel() {
  return {label:'ChickenTown'};
}


    <!DOCTYPE html>
    <html>
      <head>
        <base target="_top">
      </head>
      <body>
       <input id="testing" type="checkbox" /><label for="testing" id="boo" />
        <script>
          window.onload = () => {
            document.getElementById("testing").addEventListener("click",() => {
              google.script.run
              .withSuccessHandler((obj)=>{
                document.getElementById("boo").innerHTML = obj.label;
              })
              .getLabel();
            })
          }
        </script>
      </body>
    </html>

Label HTML 服務復選框根據從 function 返回的值

問題描述

2 個解決方案

解決方案1
1 2022-09-20 00:10:32

修改后的腳本：

筆記：

解決方案2
-1 2022-09-20 00:17:53

Label HTML 服務復選框根據從 function 返回的值

問題描述

2 個解決方案

解決方案1 1 2022-09-20 00:10:32

修改后的腳本：

筆記：

解決方案2 -1 2022-09-20 00:17:53

解決方案1
1 2022-09-20 00:10:32

解決方案2
-1 2022-09-20 00:17:53