How to use Bootstrap and jQuery without using external source?

R

Ruders822020-06-12 08:25:46

Google Apps Script

Ruders82, 2020-06-12 08:25:46

How to use Bootstrap and jQuery without using external source?
I'm trying to use a sidebar in a table. The code connects Bootstrap and jQuery by url.

// Подключаем Bootstrap
    var sidebarHTML = '<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">';
    // Подключаем jQuery
    sidebarHTML += '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>';

The sidebar takes over a minute to load. Bad connection. How to correctly load Bootstrap and jQuery into the project and use the internal call of these libraries. Please explain in more detail, since I'm still a beginner. And what parts are required to work with the sidebar.

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

A

Alexander Ivanov, 2020-06-12
@Ruders82

HTML Service: Best Practices Create tools.gs
on the server side

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

bs.html

<style>
  Тут код вашего BS
</style>

jq.html

<script>
  Тут код вашей JQ
</script>

For the client, create
client.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('bs'); ?>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>Please enjoy this helpful script.</p>
    <?!= include('jq'); ?>
  </body>
</html>

Creating a sidebar

function showSidebar() { 
  var htmlTemplate = HtmlService
    .createTemplateFromFile('client');
  SpreadsheetApp.getUi().showSidebar(htmlTemplate.evaluate()
    .setTitle('Цвет текста в ячейке поменялся'));
}

Based on the comments, I still don't understand why I "should" provide an example, and the sufferers of knowledge will not do anything, even an example that obviously should be.
Usage example https://script.google.com/d/1VpI6PRVsIQ08W6gIHs2y1...
Snippet https://github.com/contributorpw/google-apps-script...

V

Vladimir Zuev, 2020-06-12
@vladd56

Did so. Mistake

// Подключаем Bootstrap
     var sidebarHTML = '<?!= include('bs'); ?>';
    //var sidebarHTML = '<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">';
    // Подключаем jQuery
    sidebarHTML += '<?!= include('jq'); ?>'
    //sidebarHTML += '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>';