我正在为我公司的设备构建一个调度工具。我在带有侧边栏的 Google 表格中运行一个脚本。我想让用户选择一个按钮(即进行预订)，该按钮会转到侧边栏中的另一个页面，我可以在其中接收用户输入。我不确定如何使用我现有的代码触发此事件。我有一个 HTML 代码文件和一个 Google 脚本文件。
有人可以根据下面的代码帮助我或引导我朝着正确的方向前进吗？
HTML/CSS 代码:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<!-- The CSS package above applies Google styling to buttons and other elements. -->
</head>
<body>
<center>
<div class = "sidebar header-logo">
<img alt="Add-on logo" class="logo" src="img.png" width="250" height="35.75">
</div>
</center>
<form>
<style>
.button1 {
position: absolute;
transition: .5s ease;
top: 50%;
left: 5%;
}
.button2 {
position: absolute;
top: 0%;
left: 115%;
}
.button3 {
position: absolute;
top: 115%;
left: 0%;
}
.button4 {
position: absolute;
top: 0%;
left: -100%;
}
.text {
position: absolute;
top: 150px;
color: #000000;
font-size:12pt;
}
</style>
<div class = "text" align = "center">
<center>
<b>What would you like to do today?</b>
</center>
</div>
<div class="button1" id="button-bar">
<form action="http://google.com">
<button class="blue" id="run-translation">Make a Reservation</button>
<div class="button2" id="button-bar">
<form action="http://google.com">
<button class="blue" id="run-translation">Cancel Reservation</button>
<div class="button3" id="button-bar">
<form action="http://google.com">
<button class="blue" id="run-translation">Request Maintenance</button>
<div class="button4" id="button-bar">
<form action="http://google.com">
<button class="blue" id="run-translation">Report Site Bug</button>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
window.writeData = function() {
var formObj = document.getElementById('myForm');
google.script.run.myServerFunctionName(formObj);
};
$(function() {
$('#run-translation').click(runTranslation);
$('#insert-text').click(insertText);
google.script.run.withSuccessHandler(loadPreferences)
.withFailureHandler(showError).getPreferences();
});
function runTranslation() {
var win = window.open("http://google.com", '_blank');
win.focus();
}
</script>
</body>
</html>
Google Apps 脚本代码:
function onOpen(){
//
var ui = SpreadsheetApp.getUi();
ui.createMenu('Scheduling Controls')
.addItem('Show sidebar', 'showSidebar')
.addToUi();
}
function showSidebar() {
doGet();
var html = HtmlService.createHtmlOutputFromFile('Sidebar')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setTitle('Scheduling Tool')
.setWidth(300);
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.showSidebar(html);
}
function doGet() {
return HtmlService
.createTemplateFromFile('Sidebar')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
最佳答案
好的，首先，我假设此应用程序是一个插件，因为它在您的电子表格中。这意味着您不需要那个讨厌的 doGet()。 doGet 仅在独立脚本上是必需的。
幸运的是，您想要实现的目标在 GAS 附加组件中非常容易。您需要做的就是对您的 .gs 调用 .run() 函数来处理它。因此，您的 HTML 应如下所示。
<button onclick='doMyStuff()'>button</button>
<script>
function doMyStuff() {
google.script.run.setUpNewSidebar();
}
</script>
那么，现在在 .gs:
function setUpNewSidebar() {
var ui = HtmlService.createHtmlOutputFromFile('newSidebar')
.setTitle('Report Builder')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
SpreadsheetApp.getUi().showSidebar(ui);
}
如果这是一个独立的脚本，请认真考虑将其更改为一个附加组件。它们更易于使用，而且很可能会更好地工作。
关于javascript - 谷歌表格中的边栏功能 : clicking a button to open a new 'page' within the sidebar，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38249481/