Add array values to HTML sidebar from Google Sheet (Google Apps Script)
Question
So I have a spreadsheet that contains a list of hotel names. The hotel names are listed in cells D25-D57 (excluding D37-38, 44-45, 51-52).
I've written a script to generate a sidebar and the idea is that the sidebar will list all the hotels listed in the spreadsheet. Here is my HTML template:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<style>
.sortableItem {
height: 50px;
width: 300px;
border: 1px solid rgba(0, 0, 0, 0.1);
padding-top: 10px;
text-align: center;
font-weight: bold;
border-radius: 0 10px 10px 0;
background-color: #e7f0fe;
color: gray;
margin: 3px;
}
.sortableItem:hover {
cursor: pointer;
}
#sortable {
float: left;
}
#times {
float: left;
}
.day {
background-color: #4285f4;
color: white;
}
</style>
<script>
$(function() {
$("#sortable").sortable();
});
$(".sortable").sortable({
cancel: ".disable-sort-item"
});
</script>
</head>
<body>
<div id="sortable">
<div class="sortableItem day">Monday</div>
<div class="sortableItem" id="result1"></div>
<div class="sortableItem" id="result2"></div>
<div class="sortableItem" id="result3"></div>
<div class="sortableItem" id="result4"></div>
<div class="sortableItem" id="result5"></div>
<div class="sortableItem day">Tuesday</div>
<div class="sortableItem" id="result6"></div>
<div class="sortableItem" id="result7"></div>
<div class="sortableItem" id="result8"></div>
<div class="sortableItem" id="result9"></div>
<div class="sortableItem" id="result10"></div>
<div class="sortableItem day">Wednesday</div>
<div class="sortableItem" id="result11"></div>
<div class="sortableItem" id="result12">Hotel 2</div>
<div class="sortableItem" id="result13">Hotel 3</div>
<div class="sortableItem" id="result14">Hotel 4</div>
<div class="sortableItem" id="result15">Hotel 5</div>
<div class="sortableItem day">Thursday</div>
<div class="sortableItem" id="result16"></div>
<div class="sortableItem" id="result17"></div>
<div class="sortableItem" id="result18"></div>
<div class="sortableItem" id="result19"></div>
<div class="sortableItem" id="result20"></div>
<div class="sortableItem day">Friday</div>
<div class="sortableItem" id="result21"></div>
<div class="sortableItem" id="result22"></div>
<div class="sortableItem" id="result23"></div>
<div class="sortableItem" id="result24"></div>
<div class="sortableItem" id="result25"></div>
</div>
</body>
</html>
The hotel names should go into the divs with id "result1, 2" etc.
In my GS file I have the following:
var ss = SpreadsheetApp.getActive();
var sheet = ss.getActiveSheet();
function onOpen() {
SpreadsheetApp.getUi()
.createMenu('Menu')
.addItem('Sort meeting order', 'openSortableSidebar')
.addToUi();
}
function openSortableSidebar(data) {
var html = HtmlService.createTemplateFromFile('sortable');
var sidebar_html = html.evaluate();
SpreadsheetApp.getUi().showSidebar(sidebar_html);
}
var hotelName = "";
var targetCells = [
"D25",
"D26",
"D27",
"D28",
"D29",
"D32",
"D33",
"D34",
"D35",
"D36",
"D39",
"D40",
"D41",
"D42",
"D43",
"D46",
"D47",
"D48",
"D49",
"D50",
"D51",
"D52",
"D53",
"D54",
"D55"
];
function findHotel() {
var hotelNames = [];
for (var i = 0; i < targetCells.length; i++) {
hotelName = sheet.getRange(targetCells[i]).getValue();
hotelNames.push(hotelName);
return hotelNames;
}
}
So I have the target cells (ie those containing the hotel names in my spreadsheet) as an array and my for loop is working successfully in that it is pushing all the hotel names in those cells through to the array. My problem is with communicating this server side.
So in my HTML file I had worked out how to push one value into the first 'result' div and managed to write a for loop pushing the same value through to all the divs. But I cannot seem to push the array through successfully. This is what I have tried:
<script>
var idArray = ["result1", "result2", "result3"]
function addHotel(hotelNames){
for(var i=0; i<idArray.length +1; i++){
$('#result' + i).text(hotelNames[i]);
}
};
google.script.run.withSuccessHandler(addHotel).findHotel();
</script>
I know it's clearly not that simple but I am stuck on this. If anyone can help it would be greatly appreciated :)
PS: my id array would obviously be longer and go up to 25 usually...
1 answers
solution1
0 ACCPTED 2018-07-05 23:23:14
How about this modification?
Modification points :
- For GAS, modified
var targetCells = ["D25", "D26",,,]to "D25:D55". - For Javascript, modified
var idArray = ["result1", "result2", "result3"]tovar idArray = 25.
Modified script
GAS : var ss = SpreadsheetApp.getActive(); var sheet = ss.getActiveSheet(); function onOpen() { SpreadsheetApp.getUi() .createMenu('Menu') .addItem('Sort meeting order', 'openSortableSidebar') .addToUi(); } function openSortableSidebar(data) { var html = HtmlService.createTemplateFromFile('sortable'); var sidebar_html = html.evaluate(); SpreadsheetApp.getUi().showSidebar(sidebar_html); } // This function was modified function findHotel() { var rangeData = ["D25:D29", "D32:D36", "D39:D43", "D46:D51", "D53:D57"]; var ranges = sheet.getRangeList(rangeData).getRanges(); var values = ranges.map(function(e){return e.getValues().map(function(e){return e[0]})}); return Array.prototype.concat.apply([], values); }
Javascript :
<script> var idArray = 25; // Modified function addHotel(hotelNames){ for(var i=0; i<idArray; i++){ // Modified $('#result' + (i + 1)).text(hotelNames[i]); // Modified } }; google.script.run.withSuccessHandler(addHotel).findHotel(); </script>
Note :
- HTML is not modified.
- In this modified script, please set the ranges you want as follows.
-
var rangeData = ["D25:D29", "D32:D36", "D39:D43", "D46:D51", "D53:D57"];.
-
If this was not what you want, please tell me. I would like to modify it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.