I am using Google Apps Scripts from a DOC. The function test3 calls the HTML function MultiSelect. I am trying to use the 'role' from the MultiSelect to call the function getItems(role). In the HTML I successfully parse the parameters from 'data' and displaying them using an 'alert'. I am failing miserably in trying how to use the parsed parameter 'role' to make the call to getItems from HTML. I have tried: role, $role, {{role}}, ${{role}}, ${role}, {{$role}}. Any help would be appreciated!!
function test3() {
var role = "EventProducer";
var row = 2;
var col = 3;
var html = HtmlService.createHtmlOutputFromFile('MultiSelect')
.setTitle('Select the Team Members for this Event')
.setWidth(300);
var data = { role: role, row: row, col: col };
var idData = "SelectMember_htmlservice";
var strAppend = "<div id='" + idData + "' style='display:none;'>" + Utilities.base64Encode(JSON.stringify(data)) + "</div>";
html.append(strAppend);
DocumentApp.getUi().showSidebar(html);
}
function getItems(role) {
var items = getDropdownOptions(role);
return items;
}
function writeToPEO(selectedItems) {
var sheet = DocumentApp.getActiveSpreadsheet().getActiveSheet();
var cell = sheet.getActiveCell();
cell.setValue(selectedItems.join(", ")); // Join array items with comma and space
}
The HTML is:
<!DOCTYPE html>
<script>
function getDataFromHtml(idData) {
if (!idData)
idData = "SelectMember_htmlservice";
var dataEncoded = document.getElementById(idData).innerHTML;
var data = JSON.parse(atob(dataEncoded));
//alert("1=>"+data.role+" "+data.row+" "+data.col);
return data;
}
function initialize() {
var data = getDataFromHtml();
//alert("2=>"+data.role+" "+data.row+" "+data.col);
document.getElementById('role').innerText = data.role;
document.getElementById('row').innerText = data.row;
document.getElementById('col').innerText = data.col;
//alert("In initialize: "+'role'+"::"+'row'+"::"+'col');
}
window.onload = initialize;
</script>
<html>
<head>
<base target="_top">
</head>
<body>
<H2 id="role"></H2>
<H2 id="row"></H2>
<H2 id="col"></H2>
<div id="checkboxes"></div>
<br>
<button onclick="submit()">Submit}</button>
<script>
// Load items from the server-side function getItems
google.script.run.withSuccessHandler(function(items) {
var container = document.getElementById('checkboxes');
items.forEach(function(item) {
var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.id = item;
checkbox.value = item;
var label = document.createElement('label');
label.htmlFor = item;
label.appendChild(document.createTextNode(item));
container.appendChild(checkbox);
container.appendChild(label);
container.appendChild(document.createElement('br'));
});
}).getItems().'role';//<== This is where I want to pass the value contained in 'role'
function submit() {
var selectedItems = [];
var checkboxes = document.getElementById('checkboxes').querySelectorAll('input[type=checkbox]:checked');
checkboxes.forEach(function(checkbox) {
selectedItems.push(checkbox.value);
});
// Write the selected items back to the document
//google.script.run.writeToSheet(selectedItems);
// Optionally close the sidebar
google.script.host.close();
}
</script>
</body>
</html>
I am using Google Apps Scripts from a DOC. The function test3 calls the HTML function MultiSelect. I am trying to use the 'role' from the MultiSelect to call the function getItems(role). In the HTML I successfully parse the parameters from 'data' and displaying them using an 'alert'. I am failing miserably in trying how to use the parsed parameter 'role' to make the call to getItems from HTML. I have tried: role, $role, {{role}}, ${{role}}, ${role}, {{$role}}. Any help would be appreciated!!
function test3() {
var role = "EventProducer";
var row = 2;
var col = 3;
var html = HtmlService.createHtmlOutputFromFile('MultiSelect')
.setTitle('Select the Team Members for this Event')
.setWidth(300);
var data = { role: role, row: row, col: col };
var idData = "SelectMember_htmlservice";
var strAppend = "<div id='" + idData + "' style='display:none;'>" + Utilities.base64Encode(JSON.stringify(data)) + "</div>";
html.append(strAppend);
DocumentApp.getUi().showSidebar(html);
}
function getItems(role) {
var items = getDropdownOptions(role);
return items;
}
function writeToPEO(selectedItems) {
var sheet = DocumentApp.getActiveSpreadsheet().getActiveSheet();
var cell = sheet.getActiveCell();
cell.setValue(selectedItems.join(", ")); // Join array items with comma and space
}
The HTML is:
<!DOCTYPE html>
<script>
function getDataFromHtml(idData) {
if (!idData)
idData = "SelectMember_htmlservice";
var dataEncoded = document.getElementById(idData).innerHTML;
var data = JSON.parse(atob(dataEncoded));
//alert("1=>"+data.role+" "+data.row+" "+data.col);
return data;
}
function initialize() {
var data = getDataFromHtml();
//alert("2=>"+data.role+" "+data.row+" "+data.col);
document.getElementById('role').innerText = data.role;
document.getElementById('row').innerText = data.row;
document.getElementById('col').innerText = data.col;
//alert("In initialize: "+'role'+"::"+'row'+"::"+'col');
}
window.onload = initialize;
</script>
<html>
<head>
<base target="_top">
</head>
<body>
<H2 id="role"></H2>
<H2 id="row"></H2>
<H2 id="col"></H2>
<div id="checkboxes"></div>
<br>
<button onclick="submit()">Submit}</button>
<script>
// Load items from the server-side function getItems
google.script.run.withSuccessHandler(function(items) {
var container = document.getElementById('checkboxes');
items.forEach(function(item) {
var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.id = item;
checkbox.value = item;
var label = document.createElement('label');
label.htmlFor = item;
label.appendChild(document.createTextNode(item));
container.appendChild(checkbox);
container.appendChild(label);
container.appendChild(document.createElement('br'));
});
}).getItems().'role';//<== This is where I want to pass the value contained in 'role'
function submit() {
var selectedItems = [];
var checkboxes = document.getElementById('checkboxes').querySelectorAll('input[type=checkbox]:checked');
checkboxes.forEach(function(checkbox) {
selectedItems.push(checkbox.value);
});
// Write the selected items back to the document
//google.script.run.writeToSheet(selectedItems);
// Optionally close the sidebar
google.script.host.close();
}
</script>
</body>
</html>
Share
Improve this question
edited 2 days ago
Wicket
38.3k9 gold badges77 silver badges192 bronze badges
asked Feb 17 at 17:25
Ira KirschnerIra Kirschner
514 bronze badges
10
|
Show 5 more comments
1 Answer
Reset to default 1Just move the server call to the initialize
function and pass it directly:
function initialize() {
const data = getDataFromHtml();
//....
//....
google.script.run.withSuccessHandler(/*the full handler function...*/).getItems(data.role);
}
SelectMember_htmlservice
so we could check what data your're sending? – Lime Husky Commented Feb 17 at 17:36.evaluate()
method in your HTML? – Lime Husky Commented Feb 17 at 17:43