このブログを検索

2012年9月25日火曜日

テキスト入力フォーム自作(FormPanelなしver)(2)

■それっぽくなってきました

   昨日に引き続き、今日もFormPanelを使わずにフォームを自作します。
   今日は、以下のような一連の動きをするスクリプトに改良していきます。

      ① フォーム入力 : TextBox&TextArea
           ↓
      ② 「登録」ボタン押下
           ↓
      ③ スプレッドシートに保存
           ↓
      ④ フォーム入力画面にダイアログボックス表示
           ↓
      ⑤ ダイアログボックス内「続けて書く」ボタン押下
           ↓
      ⑥ フォームリフレッシュ
           ↓
      ⑦ ダイアログボックス内「戻る」ボタン押下
           ↓
      ⑧ 元のサイトに戻る


   ①~③までは昨日までで一旦作成しているので、今日は④~⑧です。


■参照元

   上記のように書くと、なんだか大変な作業をするように読めますが、
   新しいことは全くなしです。
   下記の過去記事にある内容と、昨日作ったフォームとを合体させるイメージです。

     ・【GUIビルダー】ボタン・ダイアログボックス・リンク表示


■スクリプト全体像

   今回は、先に完成版のスクリプト全体像を載せちゃいます。
   細かいコード解説は過去記事を参照して頂くとして、ざ~っくりどんなスクリプトになったか
   書きたいと思います。


   (ブログ上に、どのような形でスクリプト&説明を載せたらより分かりやすいか模索中。
    文字が小さかったり、コピペ出来ないのが難・・・・・。皆さまはどうしてるんだろう。)


■手順

   スクリプトは上記でOKなので、今度はGUIビルダーを開きます。
   端折りますが、以下のようにダイアログボックスにあたる部分を作成します。



    (ポイント)

      ☆Panel内に自由に部品を配置したい場合は、「Absolute Panel」を使用

      ☆【名前】【ID】【テキスト】を任意のものに修正

      ☆リンクさせたい場合は、「Button」に「Anchor」をぴったり重ねて、
       「Anchor」のプロパティ内「リンク」にURLを書き込む
    

   尚、フォームに続けて入力したい場合、入力後に単純にダイアログボックスを閉じるだけ
   では、エラーが出てしまうようです。
   ですので、私は「続けて書く」というボタンを押すとフォームのURLへリンクするように
   して、ページをリフレッシュする仕組みにしました。
   

■動作テスト

   まずは、自作フォームのURLへアクセス。
   「タイトル」と「本文」を入力して、「登録」ボタンを押下!



   すると、ダイアログボックスが表示されました。


   一旦画面を移って、スプレッドシートを開くと、ちゃんと入力値が書き込まれてます♪


   で、また元のフォームの画面に戻り、ダイアログボックスの「続けて書く」ボタンを押下。
   ページを再読み込みして、ブランクのフォーム画面になります。


   ダイアログボックスの「戻る」ボタンを押すと、今は下記のページにリンクするように
   しています。


    if文のところがまだ微妙な状態ではありますが、大分フォームっぽくなってきましたね~♪
 

■実際に試してみたい方へ

   こんな中途半端な状態ではありますが、一応皆様ご自由に使えるように、
   下記のページにURLを載せていますので、お試しくださいませ。

   https://sites.google.com/a/mypleis.com/gas_mypleis/GAS_ALL/12_form_no_formpanel


■予告編

   明日も、if文の箇所は放置したまま、今日のスクリプトを「フォームに入力された内容を
   Googleサイトに新規ページ追加」するというフォームに改良したいと思います。