URL最後尾にパラメーターをつけてそれを利用してWEBページの表示を変更させたい。

前提・実現したいこと

GAS、HTML、Google スプレッドシートを用いてHTMLを作成しています。
スプレッドシートには
A列：受付番号
B列：所属
C列：氏名
が入力されており、htmlのWEBページの「受付番号から検索」のテキストボックスに受付番号を入力して
隣のボタンを押下するとjavascriptとGASを通してスプレッドシートを検索して該当行の所属と氏名を返すGASを作成しました。

実現したいのはテキストボックスに入力せず、URLのパラメータに受付番号をつけてWEBページを開いたときに
パラメータの受付番号で検索した状態を表示させたいのです。

該当のソースコード

GAS
1function doGet(e) {
2  const htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();
3  return htmlOutput;
4}
5
6  var id = "スプレッドシートのID";
7
8function readSS(num) {
9  var rowdata = [];
10  var datasheet = SpreadsheetApp.openById(id).getSheetByName("シート1");
11  const columnBVals = datasheet.getRange("A:A").getValues(); 
12  const LastRow = columnBVals.filter(String).length;
13  for (let i = 1; i <= LastRow; i++) {
14   if(datasheet.getRange(i, 1).getValue() == num){
15  rowdata = datasheet.getRange(i, 1, 1, 3).getValues();
16  return {data: rowdata};
17  break;
18   }
19  }
20}

html
1<html>
2<head>
3  <script>
4  // 【関数】受付番号から読み込む
5function readSS(num) {
6     const result = "スプレッドシートのID";
7     
8     var searchNum = document.getElementById("searchNum").value;
9     google.script.run.withSuccessHandler(function(result) {
10                document.getElementById('id1').value = result.data[0][ 0] ;
11                document.getElementById('id2').value = result.data[0][ 1] ;
12                document.getElementById('id3').value = result.data[0][ 2] ;
13            })
14            .readSS(searchNum);
15     }
16  </script>
17  </head>
18  <body>
19  <form name="sendForm">
20  <table cellspacing="0" cellpadding="0" border="0" >
21  <tr>
22    <td><input  type="text" id="searchNum" style="width:50%"> <input type="button" value="受付番号から検索" onclick="readSS(searchNum);"></td>
23    <td></td>
24  </tr>
25  <tr>
26    <td >　・受付番号(入力不可)</td>
27    <td><input type="text" id="id1" readonly="readonly" />　</td>
28  </tr>
29  <tr>
30    <td>　・所属</td>
31    <td><input type="text" id="id2">　</td>
32  </tr>
33  <tr>
34    <td>　・氏名</td>
35    <td><input type="text" id="id3">　</td>
36  </tr>
37  </table>
38  </form>
39  </body>
40</html>

試したこと

下記サイトを参考できないか試してみましたがうまく行きませんでした。
GASでURLを踏んでスクリプトを動作させたときにパラメータを渡す方法

m.ts10806

2020/09/01 02:48

タグにある内容をタイトルに含む必要はないですし(むしろタイトルが無駄に長くなる)、「初心者アイコン」を質問につけられるのでわざわざ書かなくても良いです。質問は編集できますので適宜調整してください。

Octoputh

2020/09/01 03:13

ご指摘ありがとうございます。質問内容を変更しました。

行動規範の内容に同意します

回答1件

ベストアンサー

質問のリンク先にあるように、e.parametersからクエリパラメータを取得できます。
HTML側に引き渡すには、HTMLTemplate.evaluate()を呼び出す前にパラメータを設定し、HTMLテンプレート側でそのパラメータを利用してアウトプットするHTMLを変更すればいいです。

JavaScript
1function doGet(e) {
2  const template = HtmlService.createTemplateFromFile("index");
3  template.id = "";
4  template.group = "";
5  template.name = "";
6
7  const id = e.parameters["id"]; //e.parameters.id でも可
8  if (id) {
9    const result = readSS(id);
10    template.id = id;
11    if (0 < result.data.length) {
12      template.group = result.data[0][1];
13      template.name = result.data[0][2];
14    }
15  }
16  return template.evaluate();
17}
18
19function readSS(num) {
20  /* 省略*/
21}

HTML
1    <script>
2      <? if(id) { ?>
3      window.addEventListener("DOMContentLoaded", () => {
4        document.getElementById("id1").value = <?= id ?>;
5        document.getElementById("id2").value = '<?= group ?>';
6        document.getElementById("id3").value = '<?= name ?>';
7      });
8      <? } ?>
9
10      // 【関数】受付番号から読み込む
11      function readSS(num) {
12        /* 省略 */
13      }
14    </script>
15