Я пытался настроить панель инструментов с данными из моей электронной таблицы Google, используя службу HTML. Мой код состоит из 4 разных файлов;
- Main.gs (состоит из doGet и getSsData)
- Index.html (getContent из CSS и JS)
- Таблица стилей.html
- JavaScript.html
Когда я выполняю свой код и запускаю его в веб-приложении, он не дает мне панель инструментов, а показывает мой необработанный код в качестве вывода. (JS и CSS необработанные)
Я искал разные решения, такие как это и это, но я не мог заставить его работать, несмотря на приведенные там решения.
Это часть моего кода
main.gs
function doGet() {
var HTML = HtmlService.createTemplateFromFile("Index");
return HTML
.evaluate()
.setTitle('Dashboard demo')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function getSpreadsheetData () {
var sheetId = ""
var data = SpreadsheetApp.openById(sheetId).getSheetByName("Leadverwerking").getDataRange().getValues();
Logger.log(data);
return (data.length > 1) ? data : null;
}
индекс
<html>
<head>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<script src ="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript" src="https://www.google.com/jsapi" ></script>
<?= HtmlService.createHtmlOutputFromFile("Stylesheet").getContent(); ?>
</head>
<body>
<div>
**content here**
</div>
<?= HtmlService.createHtmlOutputFromFile("JavaScript").getContent(); ?>
</body>
</html>
Поэтому я думаю, что это как-то связано с функцией getContent и размещением этой строки кода, но я не могу точно понять, что я делаю неправильно. Любые идеи, почему это не работает? Заранее спасибо!
ИЗМЕНИТЬ
я заменил свой
<?= HtmlService.createHtmlOutputFromFile("Stylesheet").getContent(); ?>
<?= HtmlService.createHtmlOutputFromFile("JavaScript").getContent(); ?>
с участием
<?!= include('Stylesheet'); ?>
<?!= include('JavaScript'); ?>
И добавил функцию в мой main.gs
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
Теперь веб-приложение вообще ничего не показывает ... но я предполагаю, что код анализируется? По-прежнему нет решения для пустого вывода.
Включен JS
<script>
// Load the Visualization API and desired package
google.load("visualization", "1.0", {"packages":["controls"]});
$(function() {
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(sendQuery);
});
function sendQuery() {
google.script.run
.withSuccesHandler(drawDashboard)
.withFailureHandler(function(msg) {
// Respond to failure conditions here.
$('#main-heading').text(msg);
$('#main-heading').addClass("error");
$('#error-message').show();
})
.getSpreadsheetData();
}
// Callback function to generate visualization using data in response parameter
function drawDashboard(response) {
$('#main-heading').addClass("hidden");
if(response == null) {
alert("Error: Invalid source data")
return;
}
else {
var data = google.visualization.arrayToDataTable(response,false);
var dashboard = new google.visualization.Dashboard(document.getElementsById("dashboard-div"));
var pieChart = new google.visualization.ChartWrapper ({
"chartType": "Piechart",
"containerId": "piechart-div",
// The pie chart will use the columns 'toelichting 1' and 'Beller'
// out of all the available ones.
'view" : { "columns": [1, 8]}
});
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table-div'
});
var tlSlider = new google.visualization.ControlWrapper({
"controlType" : "NumberRangeFilter",
"containerId" : "slider-div",
"options": {
"filterColumnLabel": "Toelichting"
}
});
var beller = new google.visualization.ControlWrapper({
"controlType": "CategoryFilter",
"containerId": "selector-div",
"options": {
"filterColumnLabel": "Beller"
}
});
// afhankelijkheden opzetten tussen charts en controls
dashboard.bind(tlSlider, [pieChart,table]);
dashboard.bind(beller, [pieChart,table]);
// draw alle visualizations in het dashboard
dashboard.draw(data);
}
}
</script>
Включенный CSS
<!DOCTYPE html>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<style>
.result-display {
margin-left: 15 px;
font-size: 125%;
}
.error {
color: #FF0000;
}
.hidden {
display: none;
}
.google-visualization-controls-label {
margin-left: 20px;
}
#dashboard-div {
width: 800px;
}
#control-div {
margin: 70px;
}
#charts-div {
margin: 10px;
}
#slider-div {
float:left;
}
#selector-div {
}
#piechart-div {
width: 50%;
height: 250px;
float:left;
}
#table-div {
width: 50%;
float:right;
}
</style>
force-printing: developers.google.com/apps- script/guides/html/ Обычные теги скриптлета не будут выводиться. - person tehhowch schedule 03.04.2018doGet()работает. HTML без включения пользовательской таблицы стилей и javascript работает (поскольку у меня нет файлов, бесполезно включать их). Попробуйте исключить один, а затем другой, чтобы увидеть, какой из них вызывает ошибку, а затем поделитесь этим файлом. Если это файл javascript, вы также можете продолжить отладку, просмотрев консоль javascript в своем браузере при посещении своей страницы. - person Diego schedule 03.04.2018doGet(),include()и HTML. Из HTML я удалил обе строки<?=...?>. Затем опубликовал веб-приложение, и я вижу **контент здесь**. - person Diego schedule 03.04.2018