Google Slidesのダイアログに配置したdatalistに、Spreadsheetの値を入れる機能を作ったときの備忘録です。
This is a memo for when I created a function to load values from a Spreadsheet into the options of a datalist placed in a dialog in Google Slides.
SpreadsheetのA1〜A3にそれぞれ以下の値を入れておきます。
Enter the following values into cells A1 to A3 of the spreadsheet.
Enter the following values into cells A1 to A3 of the spreadsheet.
A1: option 1
A2: option 2
A3: option 3
Google SlidesのApps Scriptに以下のCode.gsを書きます。
Write the following code in Code.gs in Google Slides Apps Script.
SPREADSHEET_IDは読み込ませたい値が入ったシートのIDに置き換えます。
Replace SPREADSHEET_ID with the ID of the sheet containing the values you want to load.
modalessTemplate() を実行すると、ダイアログに配置したデータリストにシートの値が読み込まれます。
Execute the modalessTemplate() to load those data into a data list placed in a dialog in Google Slides.
リストにない option 4 を入力してsubmitをクリックします。
Enter option 4, which is not in the list, and click submit.
シートに option 4 が追加されます。
Option 4 will be added to the sheet.
Option 4 will be added to the sheet.
ダイアログリストにも option 4 が追加されます。
The option 4 will also be added to the list in the dialog.
The option 4 will also be added to the list in the dialog.
Apps Script
Code.gs
const ssUrl = "https://docs.google.com/spreadsheets/d/SPREADSHEET_ID/edit#gid=0";
function modalessTemplate() {
const htmlOutput = HtmlService
.createTemplateFromFile("index")
.evaluate()
.setWidth(360)
.setHeight(240);
SlidesApp.getUi().showModelessDialog(htmlOutput, "MyGUI");
}
function returnList() {
const sheet = SpreadsheetApp.openByUrl(ssUrl).getSheets()[0];
const values = sheet.getDataRange().getValues();
const list = values.flat();
return list;
}
function setNewValue(newValue) {
const sheet = SpreadsheetApp.openByUrl(ssUrl).getSheets()[0];
const lastRow = sheet.getLastRow();
const data = sheet.getRange("A1:A" + lastRow).getValues();
for (let i = 0; i < data.length; i++) {
if (data[i][0] == newValue) {
return "failure: value already exists";
}
}
sheet.getRange("A" + (lastRow + 1)).setValue(newValue);
return "success";
}
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<input type="text" id="tb" list="sheetValues">
<button id="submit">submit</button>
<datalist id="sheetValues"></datalist>
<script>
function elem(id) {
return document.getElementById(id);
}
function onFailure(e) {
alert([e.message, e.stack]);
}
elem("submit").addEventListener("click", submitClicked);
getList();
function getList() {
google.script.run
.withFailureHandler(onFailure)
.withSuccessHandler(createDatalist)
.returnList();
}
function createDatalist(list) {
const datalist = elem("sheetValues");
console.log(list)
for(let i = 0; i < list.length; i++) {
const option = document.createElement("option");
option.textContent = list[i];
datalist.appendChild(option);
}
}
function submitClicked() {
const newValue = elem("tb").value;
google.script.run
.withFailureHandler(onFailure)
.withSuccessHandler(successSetNewValue)
.withUserObject(newValue)
.setNewValue(newValue);
}
function successSetNewValue(message, newValue) {
console.log(message);
if(message === "success") {
const datalist = elem("sheetValues");
const option = document.createElement("option");
option.textContent = newValue;
datalist.appendChild(option);
}
}
</script>
</body>
</html>
Reference
シートのデータをdatalistに読み込みたい
スプレッドシートのurlとnameをHTMLServiceでセレクトボックスのオプションに保存したい
