アプリケーションを開発していると、入力フォームや検索条件の設定など、様々な箇所で“日付”の入力欄が必要になります。そんな時は、OutSystems UIで提供されている「Date Picker」を使用することで、簡単にカレンダーから日付を選べるインターフェースを実装することが可能です。
また、この「Date Picker」を活用すれば、カレンダーで選択できる日付を会社の営業日だけに絞ることなども実現できます。

そこで本ブログ記事では、実際に「Date Picker」を使用して営業日カレンダーを作成しながら、標準の部品ライブラリのカスタマイズ性について解説します。

OutSystemsのカレンダー部品とは？

OutSystemsには、日付を入力するための部品が3種類用意されています。
最も基本的な「Inputウィジェット（入力をDate型に設定したもの）」、
今回の対象である「Date Picker」、
そしてDate Pickerの派生部品として日付の範囲指定が可能な「Date Picker Range」の3つです。

それぞれの部品は、次図のようなUIの違いがあります。

Date型に設定した「Inputウィジェット」と比べ、「Date Picker」と「Date Picker Range」は部品として日時の選択に特化しており、いくつかの設定可能なプロパティが用意されています。
日時の表示形式を変更する「DateFormat」や「TimeFormat」、すぐに今日の日付を選択できる「Todayボタンの表示有無」などをこのプロパティから設定することができます。
また、任意の「Initialized」イベントと必須の「OnSelected」イベントがあらかじめ用意されており、それぞれ「Date Picker」の初期表示時/日付選択時にActionを実行することができます。

OutSystemsのカレンダー部品の設定方法とは？

ではここから、実際に「Date Picker」を使用して営業日カレンダーを作成していきます。
前章でご紹介した範囲では、営業日カレンダーの作成に必要となる休日の情報を設定できるようなプロパティはなく、十分とは言えません。そこで、詳細な設定をする方法がないか探してみたところ、OutSystems UIの「DatePickers」のフォルダに格納された複数の「Client Action」を発見しました。

試しに、その中から「DatePickerSetLanguage」を使用してみました。
画面上に配置した「Initialized」イベントのHandlerとしてActionを作成して、そのActionのフローに「DatePickerSetLanguage」を配置しました。
Handlerの作成時は、そのDate PickerのWidgetIdがInput Parameterとして自動的に渡されるので、「DatePickerSetLanguage」のWidgetIdにはそれを設定すれば正常に動作します。

これにより、先ほどまで英語表示だった「Date Picker」が日本語表示に変化しました！

「Date Picker」そのもののプロパティは限られていますが、これらの「Client Action」を利用することで、さらに細かいカスタマイズが可能となります。
＊「Client Action」の中には、「Flatpickr」の名を冠しているものがありました。実は、「Date Picker」の部品は、ベースに「Flatpickr」というライブラリを採用しています。どうやら、これらの「Client Action」も、「Flatpickr」をカスタマイズするJavaScriptをActionの内部で呼び出している模様です。

ここまでで、営業日カレンダーを作るには、これらの「Client Action」から、「DatePickerDisableDays」や「DatePickerDisableWeekDays」などを使えば実装できそうなことが分かりました。
次章では、これらの「Client Action」を使用して営業日カレンダーを実装していきます。

OutSystemsのカレンダー部品のカスタマイズ方法とは？

営業日カレンダーの実装には、まずは会社の営業日を知る、裏を返せば会社の休日を知る必要があります。具体的には、会社の休日の情報を保持するデータソースを明らかにし、最終的にOutSystemsのDate List型で休日を扱えるようにデータ取得ロジックを検討します。今回はOutSystemsからデータベース接続を定義できるところに休日情報があったと仮定して、「GetHolidays」というActionを用意しました。

言語設定をした時と同様、「OnInitialized」イベントのHandlerアクション内で、「GetHolidays」と「DatePickerDisableDays」を呼び出します。「DatePickerDisalbeDays」のActionパラメーターは下図の通り、設定したい「Date Picker」のWidgetIdと、「GetHolidays」で取得した「Date List」を設定しました。

画面表示は下図のようになります。「GetHolidays」で6月23日と26日が取得された結果、該当する日付の文字色が薄くなり、マウスオーバーすると禁止マークのカーソルに変化するようになりました。

曜日単位での設定はもっと簡単に設定できます。例えば、土日休みの場合は、「DatePickerDisableWeekDays」というActionを使用し、「DisableSaturdays」と「DisableSundays」をTrueにします。これだけで、日付ごとに設定したときと同様の見た目で、土日の日付を無効化することができました。

また、祝日を反映したい場合は、例えば、「国民の祝日API」のようなAPIから祝日の情報を取得し、前述の「GetHolidays」と同様に「DatePickerDisableDays」のActionパラメーターを設定すれば、祝日を無効化できます。
もちろん、「DatePickerDisableWeekDays」と「DatePickerDisableDays」は併用可能なため、これにより土日と祝日を無効化することができます。

ここまで、土日/祝日や会社休日を無効化した営業日カレンダーを作成して参りました。
ここからさらなるカスタマイズ（例えば、土曜日を青色に、日曜日と会社休日を赤色にする など）も可能ですが、JavaScriptやflatpickrの知識も必要となりますので、本記事では割愛します。

では最後に、この一連の設定を他のモジュールでも簡単に利用できるようにしましょう。
方法はいたって簡単です。「OnInitialized」イベントのHandler内で呼び出していた4つのAction（GetHolidays / DatePickerDisableDays / DatePickerDisableWeekDays / DatePickerSetLanguage）をすべて選択して、「Extract to Action」を選択します。
これを行うと、選択した4つのActionを1つのアクションにまとめてくれます。また、その際にActionで必要なパラメーター（DatePickerWidgetId）もInput Parameterとして自動作成してくれます。

作成したActionの名前を分かりやすいものに変更し、「Public」をYesに設定します。この状態でパブリッシュすることで、他のモジュールからもこのActionを参照して使えるようになりました。

この機能を利用したいモジュール側は、Actionへの参照を追加し、適用したい「Date Picker」の「OnInitialized」イベントのHandlerで同様に呼び出すだけです。

OutSystemsで開発する数多くのアプリケーションの中でも、営業日カレンダーを使いたいアプリケーションは少なくないはずです。上記の方法を開発者同士で共有し、アプリケーションごとにカレンダーを実装することもできますが、「Public」で共有する方が画面表示や仕様の細かいズレをなくせるうえ、ソースコードも一元化できて改修が容易になるため、オススメです。

まとめ

今回は、OutSystems UIで提供されている「Date Picker」を用いて営業日カレンダーを作成する方法を解説して参りました。

このようにOutSystemsで提供されている画面部品は簡単にカスタマイズすることが可能であり、カスタマイズした部品を開発者間で共有することで全体の効率化を図ることができますが、実際の運用では部品を公開して終わりではありません。他に公開する部品などを合わせて一つのモジュールに集約したり、他の開発者から誤って実装を変更されないようアプリケーションの編集権限を制御したりする必要があります。
そういった運用面までカバーしながら、OutSystemsの活用を安心・安全かつ効率的に推進する方法として、弊社はCoEチームの組成を推奨しております。CoEチームの有用性や組成方法についてご興味のある方は、是非、弊社までお気軽にお声掛けください。

弊社電通総研は、ローコード開発プラットフォーム：OutSystemsの導入/活用を支援する様々なサービスメニューをご用意しております。
ローコード開発のはじめの一歩を、電通総研と一緒に踏み出してみませんか？

電通総研のOutSystems関連サービスページ：https://itsol.dentsusoken.com/outsystems/service/

本ブログは、2023年7月1日時点の情報をもとに作成しています。
OutSystemsに関する詳しいお問い合わせは、弊社Webサイトからお問い合わせください。
https://itsol.dentsusoken.com/outsystems/inquiry/