vrijdag 29 november 2019

My first WebApp: a html-dropdown-menu populated with values from a Google Spreadsheet

Finally I discovered how to get data from a Google Spreadsheet into a GAS WebApp.

A very very very basic dropdown menu populated with names of cases which names are used as anchor for almost everything at my work so they must be accessible 24/7.


The script and the html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
function doGet(){
return HtmlService.createHtmlOutputFromFile('Html');
}

function ssCaseNames(){
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName("Zaken");
  var caseNames = sheet.getRange("C2:C").getValues().map(function(cel){return cel[0]});
  return caseNames;
}



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function dropDown(caseNames) {
for(var c=0;c<caseNames.length;c++){
var option = document.createElement("option");
option.text = caseNames[c];
option.setAttribute("value", option.text);
document.getElementById("element").appendChild(option);
}
}
google.script.run.withSuccessHandler(dropDown).ssCaseNames();
</script>
</head>
<body>

<input list="element">
<datalist id="element">
</datalist>

</body>
</html>

Geen opmerkingen:

Een reactie posten