LANG SELRCT

Google Apps Scriptのコードを書く場所  (新規作成: スプレッドシート | スクリプトエディタ

2021年2月18日木曜日

Googleドライブの親フォルダ内の子フォルダのファイルを取得してHtmlServiceのselectに入れたい


先に書いた
Googleドライブの特定フォルダ内のフォルダをHtmlServiceでselectのoptionに追加したい
ではselect要素にoption要素を追加しました。

今回は
optionの選択を変更した時に反応する処理を作ります。

ここでは
Googleドライブの親フォルダ内の子フォルダのファイルを取得して
2つ目のselectにoptionを追加します。


Googleドライブ内のフォルダとファイル

親フォルダ
└TEST3
└TEST2
└TEST1
    └サンプル2
    └サンプル1



HtmlServiceで、2つのselectのoptionの値を操作したい。



コード.gs
function doGet(e) {
  return HtmlService.createHtmlOutputFromFile("index");
}

/************************************
getFoldersInFolder
************************************/
function getFoldersInFolder() {
  const folderId = "親フォルダのID";
  const parentFolder = DriveApp.getFolderById(folderId);
  const folders = parentFolder.getFolders();
  let objs = [];
  while(folders.hasNext()) {
    const folder = folders.next();
    var obj = {};
    obj["name"] = folder.getName();
    obj["id"] = folder.getId();
    objs.push(obj);
  }
  return objs;
}

/************************************
getFilesInFolder
************************************/
function getFilesInFolder(folderId) {
  const parentFolder = DriveApp.getFolderById(folderId);
  const files = parentFolder.getFiles();
  let objs = [];
  while(files.hasNext()) {
    const file = files.next();
    var obj = {};
    obj["name"] = file.getName();
    obj["id"] = file.getId();
    objs.push(obj);
  }
  return objs;
}



index.html
<!DOCTYPE html>
<html>
<body>
<div id="main">
  <select id="folders_select"></select>
  <br>
  <select id="files_select"></select>
</div>
<script>

elem("folders_select").onchange = selectChanged;

get_data();

/************************************
get_data()
************************************/
function get_data() {
  google.script.run
  .withFailureHandler(onFailure)
  .withSuccessHandler(onSuccess)
  .getFoldersInFolder();
}

/************************************
onSuccess(result)
************************************/
function onSuccess(folders) {
  const select = elem("folders_select");
  for(let i = 0; i < folders.length; i++) {
    const name = folders[i]["name"];
    const id = folders[i]["id"];
    console.log(name, id)
    createSelectOptions(select, name, id);
  }
}

/************************************
createSelectOptions
************************************/
function createSelectOptions(select, name, id) {
  const option = document.createElement("option");
  option.textContent = name;
  option.setAttribute("id", id);
  select.appendChild(option);
}

/************************************
selectChanged
************************************/
function selectChanged() {
  const select = elem("folders_select");
  const index = select.selectedIndex;
  const id = select[index].id;
  
  google.script.run
  .withFailureHandler(onFailure)
  .withSuccessHandler(onSuccessChanged)
  .getFilesInFolder(id);
}

/************************************
onSuccessChanged
************************************/
function onSuccessChanged(files) {
  const select = elem("files_select");
  for(let i = 0; i < files.length; i++) {
    const name = files[i]["name"];
    const id = files[i]["id"];
    console.log(name, id)
    createSelectOptions(select, name, id);
  }
}

/************************************
onFailure(e)
************************************/
function onFailure(e) {
  alert([e.message, e.stack]);
}

/************************************
elem(id)
************************************/
function elem(id) {
  return document.getElementById(id);
}

</script>
</body>
</html>




最新の投稿

選択したテキストを配列に入れてテキストエリアに出力したい

今回やりたいこと アプリケーションの中で 選択したテキストを取得する。 選択したテキストを テキストエリアに入れる。 選択したテキストを 配列に追加していく。 STEP1 「テキストを」を選択するとテキストエリアに「テキストを」が入る。 STEP2 その後、「追加して」を選択する...