How to call a modal dialog (with HTML file) from a sidebar (also HTML) with google scripts
Question
I need a little light on how to make some buttons work.
I have a sidebar created on a HTML file that called from a button inside a spreadsheet on google apps. here's the function:
function Sidebar() {
var Form = HtmlService.createTemplateFromFile("Sidebar");
var ShowForm = Form.evaluate();
ShowForm.setTitle("Sidebar");
SpreadsheetApp.getUi().showSidebar(ShowForm);
}
And here's my Sidebar.html file:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize-icons.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<!--WELCOME CARD-->
<body style="background-color:#424242">
<div class="card grey darken-2" style="top:3px">
<div class="card-content white-text">
<span class="card-title" style="font-size:20px;font-weight:bold;color:#80cbc4">MANAGER</span>
<p style="font-size:14px">Welcome to the manager, choose an option below to start!</p>
</div>
</div>
<!--BUTTONS-->
<div class="fixed-action-btn" style="bottom: 45px; right: 10px;">
<a class="btn-floating btn-large teal">START</a>
<ul>
<li><a class="btn-floating waves-effect waves-light teal darken-3 tooltipped" id= "btn1" data-position="left" data-tooltip="Button 1"><i class="material-icons">format_list_numbered</i></a></li>
<li><a class="btn-floating waves-effect waves-light teal darken-3 tooltipped" id= "btn2" data-position="left" data-tooltip="Button 2"><i class="material-icons">assessment</i></a></li>
<li><a class="btn-floating waves-effect waves-light teal darken-3 tooltipped" id= "btn3" data-position="left" data-tooltip="Button 3"><i class="material-icons">search</i></a></li>
<li><a class="btn-floating waves-effect waves-light teal darken-3 tooltipped" id= "btn4" data-position="left" data-tooltip="Button 4"><i class="material-icons">add_box</i></a></li>
</ul>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
$('.tooltipped').tooltip();
$('.fixed-action-btn').floatingActionButton();
});
</script>
</body>
</html>
I have all the buttons created (it's a fixed action button that reveals 4 more actual button) and visually working, but i don't know how to make each one of them call a new html.file for a modal dialog.. I have written the functions for each button on my .gs file but can't make the actual buttons call those functions. That's my whole .gs file:
/** @OnlyCurrentDoc */
function Sidebar() {
var Form = HtmlService.createTemplateFromFile("Sidebar");
var ShowForm = Form.evaluate();
ShowForm.setTitle("Sidebar");
SpreadsheetApp.getUi().showSidebar(ShowForm);
}
function btn1(){
var Form = HtmlService.createTemplateFromFile("btn1");
var ShowForm = Form.evaluate();
ShowForm.setTitle("btn1").setHeight(400).setWidth(1000);
SpreadsheetApp.getUi().showModalDialog(ShowForm, "btn1");
}
function btn2(){
var Form = HtmlService.createTemplateFromFile("btn2");
var ShowForm = Form.evaluate();
ShowForm.setTitle("btn2").setHeight(400).setWidth(1000);
SpreadsheetApp.getUi().showModalDialog(ShowForm, "btn2");
}
function btn3(){
var Form = HtmlService.createTemplateFromFile("btn3");
var ShowForm = Form.evaluate();
ShowForm.setTitle("btn3").setHeight(400).setWidth(1000);
SpreadsheetApp.getUi().showModalDialog(ShowForm, "btn3");
}
function btn4(){
var Form = HtmlService.createTemplateFromFile("btn4");
var ShowForm = Form.evaluate();
ShowForm.setTitle("btn4").setHeight(400).setWidth(1000);
SpreadsheetApp.getUi().showModalDialog(ShowForm, "btn4");
}
If anyone could give some tip about how to do that, I'll be really thankfull.. thanks in advance!
- I'm using the Materialize CSS.
- My sidebar is summoned by a button on a spreadsheet.
- Some prints: Sidebar // Buttons unfolded
2 answers
solution1
0 2020-03-11 19:56:54
Try google.script.run.AnyServerSideFunctionName()
solution2
0 ACCPTED 2020-03-12 10:31:44
You can achieve this by using google.script.run function.
In the following example you can see it working for just one button, but it goes the same for all of them.
/* Code.gs */
function Sidebar() {
var Form = HtmlService.createTemplateFromFile("Sidebar");
var ShowForm = Form.evaluate();
ShowForm.setTitle("Sidebar");
SpreadsheetApp.getUi().showSidebar(ShowForm);
}
function btn1(){
// Display a modal dialog box with custom HtmlService content.
var htmlOutput = HtmlService
.createHtmlOutput('<p>My modal content here...</p>')
.setWidth(250)
.setHeight(300);
SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'Btn 1 modal title');
}
You want the function btn1 to be called when the icon of btn1 is clicked in the sidebar. To do this and still use the materialize icons, you can change the <input> tags for <button> and place the icon inside as follows:
<!-- Sidebar.html -->
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<!--WELCOME CARD-->
<body style="background-color:#424242">
<div class="card grey darken-2" style="top:3px">
<div class="card-content white-text">
<span class="card-title" style="font-size:20px;font-weight:bold;color:#80cbc4">MANAGER</span>
<p style="font-size:14px">Welcome to the manager, choose an option below to start!</p>
</div>
</div>
<!--BUTTONS-->
<div class="fixed-action-btn" style="bottom: 45px; right: 10px;">
<a class="btn-floating btn-large teal">START</a>
<ul>
<li>
<button id="btn1" data-position="left" data-tooltip="Button 1" class="btn-floating waves-effect waves-light teal darken-3 tooltipped" value="format_list_numbered" onclick="google.script.run.withUserObject(this).btn1()"><i class="material-icons">format_list_numbered</i></button>
</li>
</ul>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function() {
$('.tooltipped').tooltip();
$('.fixed-action-btn').floatingActionButton();
});
</script>
</body>
</html>
Notice the button's onclick attribute
onclick="google.script.run.withUserObject(this).btn1()"
You can use google.script.run to call functions in your .gs scripts from the client-side.
Note:
You can create the htmlOutput from file too. Change the code in the btn1 function accordingly.
function btn1(){
// Display a modal dialog box with custom HtmlService content.
var htmlOutput = HtmlService
.createHtmlOutputFromFile('btn1')
.setWidth(250)
.setHeight(300);
SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'Btn 1 modal title');
}
Here is an example of btn1.html
<p>This is HTML generated from file...</p>
See it in action:
Further reading:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.