Google HtmlService 的切换按钮答案

【问题标题】：ToggleButton for Google HtmlServiceGoogle HtmlService 的切换按钮
【发布时间】：2021-07-19 10:30:53
【问题描述】：

为 Google HtmlService 获取某种切换开关的最简单方法是什么？

Google UiApp 曾经能够创建一个简单的 ToggleButton，如下所示：

var toggleButton = app.createToggleButton('ON', 'Off').setId('MySwitch');

但 UiApp 已被弃用。 “请改用 HtmlService”

我试过了

但发现我无法将它们设为两阶段项目。然后我尝试了

I am trying to make a simple toggle button in javascript

并且可以get the HTML part working，但是将其移至Google HtmlService，无论如何我都无法使其工作。

谁能给我一个有效的 Google HtmlService 示例，其中包含我可以用来控制我的输出的两阶段项目。

更新：

非常感谢@MetaMan 提供的出色示例，我努力想出最小的示例，但我永远无法达到您的代码水平，如此紧凑和优雅！

只有一件事，我还不能让它工作。我收到了ReferenceError: gobj is not defined。

然后我将它们更改为纯文本，如

但是在没有看到对话框的情况下得到了Execution completed。我怎样才能让它工作？

更新 2：

Ops，对话框在一段时间后出现。谢谢@MetaMan，我将在一个单独的问题中提出以下问题--

还有一件事，@MetaMan，在我提供的HTML demo code 中，我能够使用form.myButton.value，但问题是当我尝试使用它从 Google App Code 函数中更新我的标签时，就像HTML demo code 所做的一样，它总是失败，我不知道为什么。您对此有一个快速的答案，还是希望我单独提出一个问题？

谢谢

【问题讨论】：

请按照How to Ask 中的建议显示您尝试过的内容。
可能重复stackoverflow.com/q/35755947/1595451
也许显示您的代码到目前为止，以便我们可以看到方法并指导您找到答案？

标签： javascript html google-apps-script web-applications

【解决方案1】：

这是一个切换函数，它显示了一个对话框，其中有一个可以打开和关闭灯的按钮：

function launchLightToggleDialog() {
  let html='';
  html += '<html><head></head><body>';
  html += '<br /><img id="light" src="" />';
  html += '<br /><input type="button" id="btn" value="Toggle" onclick="toggle()" />&nbsp;&nbsp;<label id="lbl" for="btn"></label>';
  html += '<script>';
  html += 'var light="on";'  
  html += 'var lighton = <?= getMyDataURI(gobj.globals.lightonid) ?>;\n';
  html += 'var lightoff = <?= getMyDataURI(gobj.globals.lightoffid) ?>;\n';
  html += 'window.onload=function(){document.getElementById("light").src=(light=="on")?lighton:lightoff;document.getElementById("lbl").innerHTML=light;}\n';

  html += 'function toggle(){light = (light=="on")?"off":"on";document.getElementById("light").src=(light=="on")?lighton:lightoff;document.getElementById("lbl").innerHTML=light;}\n';
  html += 'console.log("mycode");\n'
  html += '</script>';
  html += '</body></html>';
  let t=HtmlService.createTemplate(html);
  let o=t.evaluate();//The dataURI's get loaded here
  SpreadsheetApp.getUi().showModelessDialog(o,"Light Toggle");
}

下面的函数只是打开了我存储 lighton 和 lightoff 图像的 dataURI 的文件，并将 dataURI 作为字符串返回以在 webapp 中使用。让我可以从我的 Google 云端硬盘中提供图片。

function getMyDataURI(fileId) {
  const file=DriveApp.getFileById(fileId);
  return file.getBlob().getDataAsString();
}

演示：

这两个函数都是 Google Apps 脚本，所有 JavaScript 函数都嵌入在 html 字符串中。

如果您希望将图像转换为 dataURI：

function convImageUrl(url){
  var url=url || "default url";
  var blob=UrlFetchApp.fetch(url).getBlob();
  var b64Url='data:' + blob.getContentType() + ';base64,' + Utilities.base64Encode(blob.getBytes());
  return b64Url;
}

function saveDataURIInFile(filename,datauri,type) {
  Logger.log('filename: %s\ndatauri: %s\ntype: %s\n',filename,datauri,type);
  if(filename && datauri && type) {
    var folder=DriveApp.getFolderById(getGlobal('MediaFolderId'));
    var files=folder.getFilesByName(filename);
    while(files.hasNext()) {
      files.next().setTrashed(true);
    }
    var f=folder.createFile(filename,datauri,MimeType.PLAIN_TEXT);
    return {name:f.getName(),id:f.getId(),type:type,uri:DriveApp.getFileById(f.getId()).getBlob().getDataAsString()};
  }else{
    throw('Invalid input in saveDataURIInFile.');
  }
}

【讨论】：

请问globals.lightonid如何定义？
这只是您存储数据URI的文件的ID
我的意思是，如果我想让我的第一个屏幕截图中的脚本工作，我应该在哪里放置/定义这两个全局变量？我确实尝试在“gobj.globals”的 KW 上进行搜索，但前两个热门 stackoverflow.com/questions/65150194、stackoverflow.com/questions/11168623 仍然没有给我太多线索。但是，我不会再拖延了，我会给你所有你应得的功劳，但只是让你知道还有一件我无法解决的问题。再次感谢。
如果我是你并且我不知道如何使用全局变量，那么我只会用它们的值替换它们。
我将全局变量存储在称为全局变量的工作表中，并将其中一些存储在 PropertiesService 中。每次我在服务器上运行一个函数时，我都会使用一种称为延迟加载的技术来加载它们。这不是我在生产环境中要做的事情，但对于为 SO 编写独立脚本来说，它工作得很好，并且让我不必对最终脚本进行大量编辑。