I'm build a scheduling tool for equipment in my pany. I am running a script in Google sheets that has a sidebar. I would like to have the user select a button (i.e., Make Reservation) which leads to another page in the sidebar where I can take in user input. I am not sure how to trigger this event with the current code I have. I have one HTML code file and one Google scripts file.
Can someone help me or lead me in the right direction here based on the code below?
HTML/CSS Code:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href=".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="">
<button class="blue" id="run-translation">Make a Reservation</button>
<div class="button2" id="button-bar">
<form action="">
<button class="blue" id="run-translation">Cancel Reservation</button>
<div class="button3" id="button-bar">
<form action="">
<button class="blue" id="run-translation">Request Maintenance</button>
<div class="button4" id="button-bar">
<form action="">
<button class="blue" id="run-translation">Report Site Bug</button>
</form>
<script src="//ajax.googleapis/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("", '_blank');
win.focus();
}
</script>
</body>
</html>
Google Apps Script Code:
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);
}
I'm build a scheduling tool for equipment in my pany. I am running a script in Google sheets that has a sidebar. I would like to have the user select a button (i.e., Make Reservation) which leads to another page in the sidebar where I can take in user input. I am not sure how to trigger this event with the current code I have. I have one HTML code file and one Google scripts file.
Can someone help me or lead me in the right direction here based on the code below?
HTML/CSS Code:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic./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.">
<button class="blue" id="run-translation">Make a Reservation</button>
<div class="button2" id="button-bar">
<form action="http://google.">
<button class="blue" id="run-translation">Cancel Reservation</button>
<div class="button3" id="button-bar">
<form action="http://google.">
<button class="blue" id="run-translation">Request Maintenance</button>
<div class="button4" id="button-bar">
<form action="http://google.">
<button class="blue" id="run-translation">Report Site Bug</button>
</form>
<script src="//ajax.googleapis./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.", '_blank');
win.focus();
}
</script>
</body>
</html>
Google Apps Script Code:
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);
}
- Your code lacks of many closing tags. – lorond Commented Jul 7, 2016 at 15:46
- It seems that you want to hide and show content. You will need to learn how to structure HTML, identify different HTML elements, and show and hide them. Here is some documentation on how to hide an HTML element: Documentation - style.display none – Alan Wells Commented Jul 7, 2016 at 16:34
- I will take care of the closing tags. Thank you. Not sure if hiding / showing content is what I am looking for , since the buttons/text would still be in the same position and place which would pose issues. – Issab0bissa Commented Jul 7, 2016 at 16:55
1 Answer
Reset to default 4Alright, first of all, I'm assuming that this application is an add-on, since it's in your spreadsheet. That means you don't need that pesky doGet(). The doGet is only necessary on standalone script.
Luckily, what you are trying to achieve is very easy in a GAS add-on. All you need to do is call a .run() function to your .gs to handle it. So, your HTML should look like this.
<button onclick='doMyStuff()'>button</button>
<script>
function doMyStuff() {
google.script.run.setUpNewSidebar();
}
</script>
So, now at .gs:
function setUpNewSidebar() {
var ui = HtmlService.createHtmlOutputFromFile('newSidebar')
.setTitle('Report Builder')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
SpreadsheetApp.getUi().showSidebar(ui);
}
If this IS a standalone script, heavily consider changing this to be an add-on. They are much easier to use and they will most likely work better.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745661835a4638882.html
评论列表（0条）