やりたいこと
HTMLService側で、スプレッドシートのurlとnameをselect optionに保存したい
こういう挙動を実現したい
- テキストボックスにスプレッドシートのURLを入力する
- saveボタンをクリックする
- .gs側でスプレッドシートのnameを取得する
- urlとnameを{url: name}の形でスクリプトのプロパティに保存する
- HTMLにJSONで返してselectのoptionのidにurlを、innerHTMLにnameを入れる
- open sheetのhrefにurlを入れる
- 別のスプレッドシートのURLを入れてsaveボタンをクリックする
- selectのoptionが増えてopen sheetのhrefも変わる
- optionを変更するとopen sheetのhrefも変わる
イメージ
コード.gs
function doGet() {
return HtmlService.createTemplateFromFile('index').evaluate().setTitle("save ID and NAME ");
}
function saveSpreadsheetURL(new_ss_url) {
var ss = SpreadsheetApp.openByUrl(new_ss_url);
var ss_name = ss.getName();
var ss_urls = getProp("ss_urls");
if(ss_urls === null) {
var obj = {}// nullならオブジェクトを作る（初回のみ）
} else {
var obj = JSON.parse(ss_urls);
}
obj[new_ss_url] = ss_name;
var json = JSON.stringify(obj);
setProp("ss_urls", json);
return json;
}
function getProp(key) {
return PropertiesService.getScriptProperties().getProperty(key);
}
function setProp(key, value) {
PropertiesService.getScriptProperties().setProperty(key, value);
}
|
index.html
<!DOCTYPE html>
<html>
<body>
<select id="ss_select">
</select>
<input type="text" id="new_ss_url">
<button id="save">save</button>
<a id="open_sheet" target="_blank" href="">open sheet</a>
<script>
google.script.run.withSuccessHandler(ssLoaded).getProp("ss_urls");
elem("save").onclick = saveClicked;
elem("ss_select").onchange = selectChanged;
function elem(id) {
return document.getElementById(id);
}
function ssLoaded(ssListJSON) {
if(ssListJSON) {
createSSList(ssListJSON);
selectChanged();
}
}
function saveClicked() {
var new_ss_url = elem("new_ss_url").value.split("#gid=")[0]// + "#gid=0";
google.script.run
.withFailureHandler(onFailure)
.withSuccessHandler(ssSaved)
.saveSpreadsheetURL(new_ss_url);
}
function ssSaved(ssListJSON) {
createSSList(ssListJSON);
}
function createSSList(ssListJSON) {
var parentId = "ss_select";
removeChilds(parentId);
var obj = JSON.parse(ssListJSON);
var keys = Object.keys(obj);
var ss_select = elem(parentId);
for(var i = 0; i < keys.length; i++) {
var option = document.createElement("option");
option.id = keys[i];
option.name = obj[keys[i]];
option.innerHTML = obj[keys[i]];
ss_select.appendChild(option);
}
}
function selectChanged() {
var select = elem("ss_select");
var index = select.selectedIndex;
var ssUrl = select[index].id;
elem("new_ss_url").value = ssUrl;
elem("open_sheet").href = ssUrl;
}
function removeChilds(id) {
var target = elem(id);
for (var i = target.childNodes.length - 1; i >= 0; i--) {
target.removeChild(target.childNodes[i]);
}
}
function onFailure(e) {
alert([e.message, e.stack]);
}
</script>
</body>
</html>
|
