GASで表示したhtmlのフォーム内のボタンから処理を行う方法

実現したいこと

GASで表示したhtml内のボタンを押下した際にGAS内のfunctionを実行したい

前提

・スプレッドシート内のメニューバーにメニューを追加
・メニューを選択した際にhtmlのフォームを表示
・ボタン押下時にGASの処理を実行したい　←　ここで失敗

発生している問題・エラーメッセージ

GASの「実行数」からエラーを見ようとしていますがエラーが確認できませんでした。
ただし、function名、実行時間（0秒）、ステータス（失敗しました）は記録されていました。
「該当のソースコード」で記載したもので実行すると、失敗した際に実行される

html
1    function Failure(){
2      alert("失敗です");
3    }

の部分が実行され、「失敗です」のアラートが表示されます。

該当のソースコード

※呼出し後の処理は実際のものを記載することができないため、仮のものですがこれでも同じ動作でした

GAS：html呼出部
1function setDefaultValuesFunction() {
2  const html = HtmlService.createTemplateFromFile("index");
3  SpreadsheetApp
4    .getUi()
5    .showModelessDialog(html.evaluate(), "フォーム");
6}

GAS：ボタンから呼び出し部
1function tempFunction() {
2  const ui = SpreadsheetApp.getUi();
3  ui.alert("できた！", ui.ButtonSet.OK);
4}

html
1<!DOCTYPE html>
2<html>
3
4<head>
5  <base target="_top">
6  　
7  <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
8  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
9  <script type="text/javascript">
10    function addBtn(){
11      google.script.run
12      .withSuccessHandler( Success )
13      .withFailureHandler( Failure )
14     .tempFunction();
15    }
16
17    function Failure(){
18      alert("失敗です");
19    }
20
21    function Success(){
22      alert("成功です");
23    }
24  </script>
25</head>
26
27<body>
28  <form method="post" action=<?=getScriptUrl();?>>
29    <div class="item_box">
30      <label>始業時間<label>
31      <div>
32        <input class="time_input_text" type="text" id="st" placeholder="デフォルトの終業時間を入力してください。"> 
33      </div>
34    </div>
35    <div class="item_box">
36      <label>終業時間<label>
37      <div>
38        <input class="time_input_text" type="text" id="et" placeholder="デフォルトの終業時間を入力してください。">
39      </div>
40    </div>
41    <div class="item_box">
42      <label>休憩時間<label>
43      <div>
44        <input class="time_input_text" type="text" id="rt" placeholder="デフォルトの休憩時間を入力してください。">
45      </div>
46    </div>
47    <input type="button" id="setting_btn" value="設定" onclick="addBtn()">
48    <input type="button" id="cancel_btn" value="キャンセル" onclick="google.script.host.close()">
49  </form>
50</body>
51</html>

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

回答2件

次のコードで、メニューの「カスタムmenu」→「実行」で、
正常に「できた！」が表示されましたよ。(ただし「成功です」も「失敗です」も表示されません)

何か間違えているんじゃないでしょうかね

コード.gs

function setDefaultValuesFunction() {
  const html = HtmlService.createTemplateFromFile("index");
  SpreadsheetApp
    .getUi()
    .showModelessDialog(html.evaluate(), "フォーム");
}

function tempFunction() {
  const ui = SpreadsheetApp.getUi();
  ui.alert("できた！", ui.ButtonSet.OK);
}
function onOpen() {
  var ui = SpreadsheetApp.getUi();  
  var menu = ui.createMenu('カスタムmenu');
  menu.addItem('実行', 'setDefaultValuesFunction');   
  menu.addToUi();               
}

function getScriptUrl() {

var url = ScriptApp.getService().getUrl();
return url;

}

index.html

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  　
  <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript">
    function addBtn(){
      google.script.run
      .withSuccessHandler( Success )
      .withFailureHandler( Failure )
     .tempFunction();
    }

    function Failure(){
      alert("失敗です");
    }

    function Success(){
      alert("成功です");
    }
  </script>
</head>

<body>
  <form method="post" action=<?=getScriptUrl();?>>
    <div class="item_box">
      <label>始業時間<label>
      <div>
        <input class="time_input_text" type="text" id="st" placeholder="デフォルトの終業時間を入力してください。"> 
      </div>
    </div>
    <div class="item_box">
      <label>終業時間<label>
      <div>
        <input class="time_input_text" type="text" id="et" placeholder="デフォルトの終業時間を入力してください。">
      </div>
    </div>
    <div class="item_box">
      <label>休憩時間<label>
      <div>
        <input class="time_input_text" type="text" id="rt" placeholder="デフォルトの休憩時間を入力してください。">
      </div>
    </div>
    <input type="button" id="setting_btn" value="設定" onclick="addBtn()">
    <input type="button" id="cancel_btn" value="キャンセル" onclick="google.script.host.close()">
  </form>
</body>
</html>

投稿2023/04/25 12:28

編集2023/04/25 21:27