Can Bootstrap.js be used in GAS (Google Apps Script)?
In GAS, I want to place HTML content inside tabs like the one described here .
I have built a working prototype at this jsFiddle . (Since the code is HTML, it does not display correctly in this question, otherwise I would include it. So just go to the jsFiddle to view it. It is also in the index.html file in the GAS project .)
However, when I migrated jsFiddle to my GAS project here , it stops working. (Again, see the index.html file in the GAS.)
You can see the GAS projects released by clicking here . Please note that tabs no longer work the way they do in the jsFiddle version.
The problem is that the resource at line 47 of the index.html file is not loading.
While checking the Chrome developer tools, notice the console error:
Uncaught In strict mode code, functions can only be declared at top level or immediately within another function.
Note the other console errors:
GET https://static-focus-opensocial.googleusercontent.com/gadgets/proxy?contain…DqEcDcnD&url=https%3A%2F%2Fgetbootstrap.com%2Fdist%2Fjs%2Fbootstrap.min.js
504 (Gateway Timeout)
Uncaught Error: not loaded
So there you have it. Is there a way to think about how to load bootstrap.js resource correctly (line 47)? Or should we resort to "hacks" as described here?
source to share
You don't need to copy the bootstrap JS to the GAS HTML file, it works if you change the urls you used to pull 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 .
PS Thanks for the original POST. I now have a nice website app!
source to share
Finally, had time to play with your code, after a while on the page you will receive an error message from the server stating that the file "bootstrap.min" was rejected. So I created a file "bootstrap.html", copied all its content to that file, surrounded by script tags, included it in HTML and voilá, it works, here works a working link with thesis:
https://docs.google.com/spreadsheets/d/1Q7hqZt5hTXlh49esjnMf61XTqgDha3-QLn8LvZUJIfY/edit?usp=sharing
And the changelog:
in any .gs code
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.getContent();
}
in mainPage.html
<?!= include('bootstrap'); ?>
Now doGet should use createTemplateFromFile
andevaluate()
function doGet(e) {
return HtmlService.createTemplateFromFile('mainPage').evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
And a file with all the download surrounded by tags script
.
source to share