应用脚本提示对"输入"做出反应，或 HTML 确认

Question

我想弄清楚如何在使用Apps脚本的电子表格中获得提示，其中OK是蓝色的，您可以按Enter(和esc)。取消)。

我试着玩HTML的确认与HTML服务，这将工作得很好，但到目前为止，我似乎不能得到它的工作没有一个额外的UI弹出排序。另外，我不知道如何注册用户选择的内容(OK或CANCEL)，因为这需要确定Apps Script接下来要做什么。是否有一种方法来转移一个变量从HTML文件要在脚本中使用?

注。我之所以需要这个而不是原生的Alert或Prompt，是因为它需要两次Tab点击才能到达OK按钮，或者你只需要使用鼠标。这是一个非常重复的任务，它最终是大量的额外点击。

任何想法吗?

Answer 1

不确定这是否会让您满意，但是使用侧边栏面板来显示"OK/Cancel"按钮可以做到这一点。您可以通过toast消息显示任务/问题(这样您就不会失去浏览器对侧边栏按钮的关注，就像使用模态框时那样)。然后，由于侧边栏一直显示，您只需按回车键或tab键，然后选择先前聚焦的"确定"或"取消"。

我不完全确定如何连接主功能，toast消息和OK/Cancel面板，但我想存储一些数据，例如在表本身可以完成这项工作。

例如:你有"D5"单元格坐标存储在工作表的某个地方，你运行函数。Toast询问您是否要修改D5(使用存储的坐标)。如果选择yes，则运行一个函数，获取坐标并继续。

这很复杂，可能效率极低，但如果你的工作确实是重复的，它可能会节省一些时间。

下面是一个示例表(HTML代码取自我的一些旧脚本)，GS和HTML的代码也在下面。

Code.gs

function onOpen() {
  var html = HtmlService.createHtmlOutputFromFile('sidebar')
  .setTitle('a test');
  SpreadsheetApp.getUi()
  .showSidebar(html)
  .createMenu('——MENU')
  .addItem('Test toast', 'openDialog')
  .addToUi();
}
// ok/cancel functions
function func_ok(){
   SpreadsheetApp.getActiveSpreadsheet().toast('ok');
  // do something
}
function func_cancel(){
  SpreadsheetApp.getActiveSpreadsheet().toast('cancel');
  // do something
}
// toast function
function openDialog() {
  SpreadsheetApp.getActiveSpreadsheet().toast('you can display some information here and confirm in via the panel');
}

sidebar.html

<div style='font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;background: linear-gradient(to bottom, #323232 0%,#ffffff 100%);padding-bottom:100%'>
<section style='background:#FFE599'>
<button onclick="google.script.run.func_ok();">OK</button>
<button onclick="google.script.run.func_cancel();">Cancel</button>
</section>
</div>

<!-- stylesheet -->
<style>
h4 {
margin:auto auto 10px auto;
border-bottom: 1px solid rgba(44, 44, 44, 0.3);
padding:3px 10px;
background: rgba(44, 44, 44, 0.1);
text-align:center
}
button {
background: #E5E5E5;
border:none;
border-bottom:2px solid #ccc;
border-radius:2px;
padding:3px 4px;
margin:4px 10%;
width:80%
}
button:hover {
background:#efefef;
cursor:pointer
}
section {
padding-bottom:5%;
margin: 0 2% 5% 2%;
border-radius: 2px;
box-shadow:0 1px 2px 1px #111111;
}
</style>