Google HtmlService 的 ToggleButton

本文介绍了Google HtmlService 的 ToggleButton的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

Google UiApp 过去能够创建一个简单的 ToggleButton，如下所示:

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

但 UiApp 已被弃用.请改用 HtmlService"

我试过了

然后我将它们改为纯文本，如
但是在没有看到对话框的情况下获得了执行完成.我怎样才能让它工作?
更新 2:
Ops，一段时间后出现了对话框.谢谢@MetaMan，我会在一个单独的问题中提出以下问题 --
还有一件事，@MetaMan，在
两个函数都是 Google Apps 脚本，所有 JavaScript 函数都嵌入在 html 字符串中.
如果您希望将图像转换为 dataURI:
```
function convImageUrl(url){var url=url ||默认网址"；var blob=UrlFetchApp.fetch(url).getBlob();var b64Url='data:' + blob.getContentType() + ';base64,' + Utilities.base64Encode(blob.getBytes());返回 b64Url;}函数 saveDataURIInFile(filename,datauri,type) {Logger.log('filename: %s\ndatauri: %s\ntype: %s\n',filename,datauri,type);如果(文件名 && 数据和类型){var folder=DriveApp.getFolderById(getGlobal('MediaFolderId'));var files=folder.getFilesByName(filename);而(文件.hasNext()){files.next().setTrashed(true);}var f=folder.createFile(filename,datauri,MimeType.PLAIN_TEXT);返回 {name:f.getName(),id:f.getId(),type:type,uri:DriveApp.getFileById(f.getId()).getBlob().getDataAsString()};}别的{throw('saveDataURIInFile 中的输入无效.');}}
```
What is the easiest way to get some kind of toggle switch for Google HtmlService?
Google UiApp used to be able to create a simple ToggleButton like the following:
var toggleButton = app.createToggleButton('ON', 'Off').setId('MySwitch');
But UiApp has been deprecated. "Please use HtmlService instead"
I've tried
- https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_radio_value
- https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_checkbox_value
But found I cannot make them a two-stage item. Then I tried
- I am trying to make a simple toggle button in javascript
and was able to get the HTML part working, but moving it to Google HtmlService, I cannot make it work no matter what.
Can someone give me a working Google HtmlService example that contains a two-stage item that I can use to control my output please.
UPDATE:
Thanks a lot @MetaMan for your excellent example, I tried hard to come up with the smallest example, but I'll never be able to get the level of your code, so compact and elegant!
Just one thing, I haven't been able to make it work yet. I'm getting ReferenceError: gobj is not defined.
I then changed them into plain text, as
But got Execution completed without seeing the dialog.How can I make it works?
UPDATE2:
Ops, dialog showed up after a while. Thanks @MetaMan, I'll ask the following in a separated question --
One more thing, @MetaMan, In the HTML demo code that I provided, I was able to make use of form.myButton.value, but the problem is when I try to use that to update my label from within Google App Code function, just as what the HTML demo code is doning, it always fails and I don't know why. Do you have a quick answer for that, or you'd rather me asking in a separated question?
thx
解决方案
Here's a toggle function that presents a dialog that has a button that turns a light on and off:
```
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");
}
```
The below function just opens up the files where I store the dataURI's of the lighton and lightoff images and it returns the dataURI's as strings for use in the webapp. Making it possible for me to serve the images off of my Google Drive.
```
function getMyDataURI(fileId) {
  const file=DriveApp.getFileById(fileId);
  return file.getBlob().getDataAsString();
}
```
Demo:
Both functions are Google Apps Script and all JavaScript functions are imbedded in the html string.
If you wish to convert an image to a 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.');
  }
}
```
这篇关于Google HtmlService 的 ToggleButton的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！