LANG SELRCT

コードを書く場所

2019年11月17日日曜日

スプレッドシートのurlとnameをHTMLServiceでセレクトボックスのオプションに保存したい


やりたいこと

HTMLService側で、スプレッドシートのurlとnameをselect optionに保存したい

こういう挙動を実現したい

  1. テキストボックスにスプレッドシートのURLを入力する
  2. saveボタンをクリックする
  3. .gs側でスプレッドシートのnameを取得する
  4. urlとnameを{url: name}の形でスクリプトのプロパティに保存する
  5. HTMLにJSONで返してselectのoptionのidにurlを、innerHTMLにnameを入れる
  6. open sheetのhrefにurlを入れる
  7. 別のスプレッドシートのURLを入れてsaveボタンをクリックする
  8. selectのoptionが増えてopen sheetのhrefも変わる
  9. 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">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>