I wrote code to input values from a dialog into a table in Google Slides.
今回使うスライドの例
An example of the slide used for this demonstration.
4行1列の表を配置しておきます。
Place a table with 4 rows and 1 column in Google Slides.
Code.gs
function modalessTemplate() {
const htmlOutput = HtmlService
.createTemplateFromFile("index")
.evaluate()
.setWidth(360)
.setHeight(240);
SlidesApp.getUi().showModelessDialog(htmlOutput, "MyGUI");
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function setValuesForTables(records) {
const table = getPageTables()[0];
setValuesInTable(table, records);
}
function getPageTables() {
const presentation = SlidesApp.getActivePresentation();
const slide = presentation.getSelection().getCurrentPage();
const tables = slide.getTables();
return tables;
}
function setValuesInTable(table, values) {
const col = 0;
for (var row = 0; row < values.length; row++) {
table.getCell(row, col).getText().setText(values[row]);
}
}
index.html
<!DOCTYPE html>
<html>
<head>
<?!= include("css"); ?>
</head>
<body>
<textarea id="input"></textarea>
<br>
<button id="submit">submit</button>
<?!= include("JavaScript"); ?>
</body>
</html>
css.html
<style>
#input {
font-size: 15px;
width: 95vw;
height: 60vh;
}
</style>
JavaScript.html
<script>
function elem(id) {
return document.getElementById(id);
}
elem("submit").onclick = submitClicked;
function submitClicked() {
const records = elem("input").value.split("\n");
google.script.run.setValuesForTables(records);
}
</script>
modalessTemplate() を実行するとダイアログが表示されます。
Running modalessTemplate() will display a dialog.
ダイアログに
1
2
3
4
のように改行区切りで値を入力してsubmitボタンをクリックします。
Enter the values in the dialog, separated by newlines, and click the Submit button.
テーブルに値が入力されます。
The values are inserted into the table.
Reference
Google SlidesでDialogを表示したい
Google Slidesの表をApps Scriptで取得したい - Get tables in Slides
Google Slidesの表に値を入れたい Insert values into the specific table
