[OutSystems]UI PatternのAdvanced Formatの使い方

OutSystemsの公式部品であるUI PatternのWidgetにはAdvancedFormatというプロパティがあります。

UI PatternはJavaScriptのライブラリをラップしてWidgetにしてあるようで、オリジナルのライブラリが持っている設定値のうち、Widgetのプロパティにない設定を行う事ができます。

OutSystemsのPatternのドキュメントには詳細が記述されていないので、調査・設定方法をまとめてみます。

以下、Mobile/Reactive用のPattern DatePickerを使って手順を確認していきます。

DatePickerの公式ドキュメント

調査方法

プロパティを確認

画面に配置したWidgetのプロパティを見て、AdvancedFormatがあることを確認する。
AdvancedFormatがないWidgetももちろんあります。

オリジナルのJavaScriptライブラリを特定

画面に配置したWidgetをダブルクリックするなどして、参照している部品を選択する。
Descriptionにオリジナルライブラリ (JavaScript) へのパスが書いてある。

AdvancedFormatプロパティがある場合は、大体このようにDescriptionにオリジナルライブラリへのパスが書いてあるようです。

For advanced options, read the official documentation:
https://github.com/dbushell/Pikaday

オリジナルライブラリのドキュメントから設定値を確認

Descriptionにあったパスを開いて設定値をチェックします。
optionsとかConfigurationという題のことが多いと思いますが、設定値のドキュメントで使えそうな項目を探します。

注意点として、WidgetにInputパラメータとして露出している設定項目は、あえてAdvancedFormatを利用する必要がありません。

例示ということで、以下２項目を設定することにします。

• yearSuffix：年表示にサフィックスを指定する
• showDaysInNextAndPreviousMonths：月カレンダーを表示するときに、前月の最後の方の日、あるいは翌月の最初の方の日を表示するか否か。Widgetではデフォルト値がtrueのようなのでfalseに

設定

設定方法

JSON形式で設定します。
JSONオブジェクトなので、まず全体を中括弧「{}」で囲む。
各設定項目の分だけ「設定項目名: 値」の組を並べ、半角カンマ「,」で区切る。
最後に、この値を「OutSystemsのText型」であるAdvancedFormatプロパティに設定するのでダブルクォーテーション「""」で囲みます。

例：
"{yearSuffix: '年', showDaysInNextAndPreviousMonths: false}"

設定例

設定前

設定後

その他の例

以前QiitaにCarouselの例を書きました。
OutSystemsのCarousel Widgetの使い方