Can Bootstrap.js be used in GAS (Google Apps Script)?

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!


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.

Tags:

Javascript

Twitter Bootstrap

Google Apps Script

Recent Posts