bs.html
<style>
Тут код вашего BS
</style>
jq.html
<script>
Тут код вашей JQ и
</script>
Для клиента создаете
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>
tools.gs
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
function showSidebar() {
var htmlTemplate = HtmlService
.createTemplateFromFile('client');
SpreadsheetApp.getUi().showSidebar(htmlTemplate.evaluate()
.setTitle('Цвет текста в ячейке поменялся'));
}
// Подключаем 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>';
function onOpen()
function showSidebar() {
var htmlTemplate = HtmlService
.createTemplateFromFile('client');
SpreadsheetApp.getUi().showSidebar(htmlTemplate.evaluate()
.setTitle('Цвет текста в ячейке поменялся'));
}
tools.gs
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
bs.html
<style>
Тут код вашего BS
</style>
jq.html
<script>
Тут код вашей JQ
</script>
<!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>
function showSidebar() {
var htmlTemplate = HtmlService
.createTemplateFromFile('client');
SpreadsheetApp.getUi().showSidebar(htmlTemplate.evaluate()
.setTitle('Цвет текста в ячейке поменялся'));
}
// Открытие сайдбара
function showSidebar() {
var htmlOutput = HtmlService
.createHtmlOutput('<p>A change of speed, a change of style...</p>')
.setTitle('Цвет текста в ячейке поменялся');
SpreadsheetApp.getUi().showSidebar(htmlOutput);
}
//*****************************************************************************************************************
function showSidebar() {
// Подключаем 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>';
sidebarHTML += '<form style="padding: 20px;text-align:center;">\
<div class="form-group">\
<label for="profit_ratio">Коэффициет прибыли</label>\
<input type="text" class="form-control" id="profit_ratio" name="profit_ratio" value="">\
</div>\
<div class="form-group">\
<label for="manager_ratio">Коэффициет менеджера</label>\
<input type="text" class="form-control" id="manager_ratio" name="manager_ratio" value="">\
</div>\
<div class="form-group">\
<label for="ad_ratio">Коэффициет рекламы</label>\
<input type="text" class="form-control" id="ad_ratio" name="ad_ratio" value="">\
</div>\
<button type="submit" class="btn btn-primary">Записать данные в таблицу</button>\
<br><br><br>\
<button type="button" id="sidebarClose" class="btn btn-danger">Закрыть сайдбар</button>\
</form>';
// Создаём форму
// Добавляем скрипты
// При сабмите формы вызываем функцию writeStrInTable() и передаём ей введённые данные
// https://developers.google.com/apps-script/guides/html/reference/run
// При клике на кнопку 'Закрыть сайдбар' закрываем его
// https://developers.google.com/apps-script/guides/html/reference/host#close()
//**********************************************************************************************************************************************
sidebarHTML += "<script>\
$(document).on('submit', 'form', function () { \
google.script.run \
.withSuccessHandler(function (resultMsg) { \
alert(resultMsg);\
})\
.writeStrInTable(\
{ profit_ratio: $('#profit_ratio').val(), manager_ratio: $('#manager_ratio').val() }\
);\
return false;\
});\
\
$('#sidebarClose').on('click', function() {\
google.script.host.close();\
});\
</script>";
var htmlOutput = HtmlService
.createHtmlOutput(sidebarHTML)
.setTitle('Цвет текста в ячейке поменялся');
SpreadsheetApp.getUi().showSidebar(htmlOutput);
}