Google HtmlService 的 ToggleButton

如何解决Google HtmlService 的 ToggleButton

为 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 所做的一样，它总是失败，我不知道为什么。你有一个快速的答案，还是你更愿意我在一个单独的问题中提问？

谢谢

解决方法

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

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 作为字符串用于 web 应用程序。让我可以从我的 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,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,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.');
  }
}

Google HtmlService 的 ToggleButton

如何解决Google HtmlService 的 ToggleButton

解决方法

相关推荐