Apps Script公式リファレンス: Apps Script Reference |障害・課題追跡: IssueTracker |Google Workspace: Status Dashboard

2024年5月14日火曜日

Google Slidesのダイアログから表に値を入力したい - Input values from dialog to table


Google Slidesでダイアログから表に値を入力したくて書いたコードです。
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) {
for (var row = 0; row < values.length; row++) {
for (var col = 0; col < values[row].length; col++) {
if (row < table.getNumRows() && col < table.getNumColumns()) {
table.getCell(row, col).getText().setText(values[row][col]);
}
}
}
}


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

Latest post

Google Slidesで現在選択している表に値を入れたい3 - Insert values into the active table3

Google Slidesで現在選択している表に値を入れたい2 - Insert values into the active table2 上記のリンク先では、値の数に応じて行を追加しました。 In the linked article above, rows were add...