In GAS, I want to place HTML content inside tabs like what is described here.
I built a working prototype in this jsFiddle. (Since the code is HTML, it does not rende
Finally had time to fiddle with your code, after some time in the page you get a error from the server stating that the file "bootstrap.min" was denied. So I created a file "bootstrap.html", copied all of its content to this file, surrounded with script tags, included it in the HTML and voilá, it's working.
The list of changes:
in any code.gs
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.getContent();
}
in the mainPage.html
<?!= include('bootstrap'); ?>
The doGet now must use createTemplateFromFile
and evaluate()
function doGet(e) {
return HtmlService.createTemplateFromFile('mainPage').evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
And an file with all bootstrap surrounded by script
tags.
You don't need to copy the bootstrap JS into a GAS HTML file, it works if you change the URLs you were using to pull in Bootstrap with mainPage.HTML:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<!-- Reference: http://getbootstrap.com/javascript/#tabs -->
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a role="tab" data-toggle="tab" aria-controls="home" href="#home">Home</a>
</li>
<li role="presentation"><a role="tab" data-toggle="tab" aria-controls="profile" href="#profile">Profile</a>
</li>
<li role="presentation"><a role="tab" data-toggle="tab" aria-controls="messages" href="#messages">Messages</a>
</li>
<li role="presentation"><a role="tab" data-toggle="tab" aria-controls="settings" href="#settings">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">Lorem ipsum dolor sit amet</div>
<div role="tabpanel" class="tab-pane" id="profile">consectetur adipiscing elit,</div>
<div role="tabpanel" class="tab-pane" id="messages">sed do eiusmod tempor incididun</div>
<div role="tabpanel" class="tab-pane" id="settings">ut labore et dolore magna aliqua</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
and in your code.gs
function doGet(e) {
return HtmlService
.createHtmlOutputFromFile('mainPage')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
Here's the app, and here's the script.
P.S. Thanks for the original POST I've now got a nice pretty web app!