GAS カスタムダイアログサンプル

メニューをやったら次はダイアログだろう。と。
こちらのサイトが参考になりました。
そのうち、ある程度簡単なやり方はこれよ、ってのを書いておきます。
スプレットシート側からGASに入った人はHTMLとかは「？」の場合が多いので最初は簡単なところから手をつけましょう。

1.非同期なので細かいことやるとハマる

上記サイトにもある通り、GASとダイアログの間は非同期通信なので、気をつけないと見た目ぎょっとする動きをします。（GASの反応が遅い、というのも原因）
ダイアログの設計の段階でやることを絞って置くのがはまらなくていいかも。

2.HTMLを準備

スクリプトエディター側でファイル→New→HTMLでHTMLを作成します
Claspを使ってる場合は、ローカルで作成してpushでも可。

3.HTMLの中でGASからデータをとる

HTML側でGASのデータを呼ぶ場合は、以下の非同期なメソッドをつかいます

      function init(){
        google.script.run.withSuccessHandler(result).getSomethingFromGAS();
        function result(data){
            document.getElementById('test').value = data;
        }        
      }

getSomethingFromGAS（GAS側の関数）
この実行が成功すると
result（HTML内に自分でつくった関数）
が呼ばれます。
データの受け渡しは、
getSomethingFromGASの戻り値　＝　resultの引数（この場合data）
です。

この処理も非同期なため、一旦この処理がされる前のHTMLが表示され、処理終了後書き換えられます

4.ダイアログのOKボタンからGASを呼び出す

HTML上のJavascriptでOKボタンが押されたときのハンドラ関数を用意し、その中でGAS関数を呼び出します。
以下はフォームのデータをGAS側に引き渡すときのサンプルです。

this.parentNodeがformに相当します
HTMLの部分は以下

    <Form>
      <input name="hiddenValue" type="hidden">
      <input name="XXXName"><BR>
      <button onclick="onOK(this.parentNode)">作成</button>
      <button onclick="onCancel(this.parentNode)">キャンセル</button>
    </Form>

Javascriptは以下

      function onOK(form){
        var result = {
          hiddenValue : 0,
          strName : form.XXXName.value
        }
        google.script.run.withSuccessHandler(function(){
            google.script.host.close();
        }).OnOKDialog(result);
      }

GAS側

function OnOKDialog(result)
{
  console.log(result.strName);
}

上２つはHTMLファイルの一部、下はGAS内のメソッドとして用意します

5.注意点

これはグローバル変数などを使っちゃってるとハマるかもだけど、GAS的には上のサンプルのOnOKDialogは、ダイアログを出した時のセッションとは別セッションのようです。
ログが別々にでますし、グローバル変数（があれば）は初期化されてます

あと、HTMLとか久しぶりに書いたので動的に埋め込むやり方とかすっかり忘れてた（笑