【OutSystems】DatePickerを部品化する

OutSystemsUI（OutSystems11）のDatePickerだがアップデートが実施されてからClientActionが追加されたりと大きく利用方法が変わっている（選択した日付を初期化するときは専用のクライアントアクションを呼んだりなど）必要なユースケースのアクションを一つにWebBlockへまとめて部品化したほうが良いと考えサンプルを作成した。

1.DatePciker部品のイメージ

利用側と部品側の関係は以下のイメージで作成する。

WebBlock側のDatePickerで持っているInputFiledへの値の反映や初期化を部品として実装させることで利用画面（親画面側）は必要なパラメータのみをWebブロックに渡して利用できるイメージとなります。

2.WebBlock側の実装

2-1.ウィジェット構成

各部品とウィジェットツリーの配置は以下のイメージです。

・部品構成としてラベル、日付フィールド、カレンダー、初期化（×）ボタンで構成する
・カレンダーアイコンクリック時はカレンダーを表示するイベントを呼び出す
・初期化（×）アイコンクリック時は選択したデータをクリアするイベントを呼び出す
・値のセット状況によってカレンダーアイコンと（×）ボタンの表示を切り替える
・ラベル名とエラー時のスタイルは親画面からの呼び出しパラメータで値を反映させる

2-2.変数・クライアントアクション定義

クライアントアクション・変数の定義は以下を作成します。

<変数>
InLblName：親画面からのパラメータでラベル名を表示
InDefaultDate：親画面からのパラメータで特定日付を初期表示させたい時に指定
IsError：親画面からのパラメータでエラー時のスタイル表示フラグ
PickedDate：WebBlock側で保持している選択した日付(InputDateフィールドにバインドする)

<クライアントアクション>
CalendarOnClick：カレンダーアイコンクリック時にDatePickerを表示させる
DateEmptyOnClick：初期化（×）ボタンクリック時の初期化処理（日付クリア）を定義
DatePickerInitialized：DatePickerのInitialize処理を定義（パラメータの受渡や言語設定）
DatePickerOnSelected：カレンダーで日付を選択し時の処理（日付セット）を定義
DateReturn：WebBlock側で定義したイベント処理（日付クリアとセット時に発生させる）

2-3.クライアントアクション呼出しタイミング

DatePickerのinitializeとOnSelected時にDatePickerInitialized, DatePickerOnSelectedを呼出します。

カレンダーアイコンクリック時にCalendarOnClickを呼出します

（×）ボタンクリック時にDateEmptyOnClickを呼出します

2-4.クライアントアクション実装詳細

CalendarOnClick
カレンダークリック時にDatePickerを開くアクションを定義します。

DatePickerOnSelected
選択した日付を画面に反映するアクションを定義します。
また選択した日付を親画面に返すためのイベントを起動します。

DateEmptyOnClick
（×）ボタンをクリックした際に日付を初期化するアクションを定義します。
選択した日付（この場合は初期化した日付）を親画面に返すためのイベントを起動します。

DatePickerInitialized
WebBlockの呼出し時の初期処理としてパラメータの受渡処理と言語設定を実施します。
受け取ったパラメータは一旦日付を選択したものとみなして前述のをDatePickerOnSelected呼出します。

DateReturn
イベント処理を定義します。
このイベントはカレンダーで日付を選択（または初期化）した際に起動して、親画面に選択した日付を返します。
前述で記載したようにDatePickerOnSelectedとDateEmptyOnClickでイベントをキックします。

3.呼び出し側（親画面）実装

3-1.親画面の実装

親画面側でWebBlockを組み込み呼び出してあげます。
あらかじめパラメータとしてセットされている
ラベル名、初期日付（現在日）、エラーフラグ
をセットします。
またWebBolck側で定義したイベント（DateReturn）をトリガーとして起動するクライアントアクション（QMDateFieldDateReturn）をセットします。

QMDateFieldDateReturn側は以下の実装となり、WebBlock側のイベント処理で渡ってきたパラメータ（選択した日付）を受け取り親画面側の変数にセットします。

3-2.動作確認

実際に起動すると日付の初期化やカレンダー選択時の値反映が動作していますね。
・初期表示画面（今日の日付をセット）

・カレンダーで×ボタンクリック直後

・カレンダーで日付選択直後

日付の入力などは色々な機能で共通的に必要となるのでWebBlockで部品化して利用する方が使い勝手はよさそうですね。
他にも部品側で持たせた方がいいような共通処理はありそうだけどあまり汎用的に作りこみ過ぎると利用者側はかえって混乱する可能性もあるからいったんこんなもんだろうか。