More than 3 years have passed since last update.

OutSystemsのReactive Web App更新処理のバリデーション

Posted at 2020-05-21

ある日、Reactive Web Appでは、更新処理におけるバリデーションをどうすべきか？　という話をチーム内でしたのですが、2020/5時点では、この部分のドキュメントがまだ日本語になっていないようなので記録しておきます。

ドキュメント（英語）：
Validate the fields of a form

サンプル

Reactive Web Appの場合、以下の方針で作るのが、実装コストが低く、アーキテクチャ設計ルールにも適合するのではないかと思います。

型チェック・必須チェックはInput Widgetが自動で行うものに委せる（Form Widgetを使ってUIやロジックの自動生成を利用する）
EntityとEntityを操作するServer Actionは別のモジュールに分離する（EntityはPublic=YesかつExpose Read Only=Yesとし、画面側から行う操作に対応するActionをPublic=Yesで作成する）
サーバ側で行う更新処理は1 Actionにまとめ、型・必須以外のチェックはこのActionで行う
サーバ側のチェック結果はOutput Parameterで返し、Screen Actionで表示する

データの整合性を保つためにも、サーバ側のチェックは必須です。クライアント側は省く余地がありますが、型チェックと必須チェックだけであれば自動生成なのでわざわざ省く必要もないでしょう。

画面にForm Widgetを配置
Entity型の変数をドラッグ＆ドロップしてInput/Button Widgetを自動作成する
必要に応じてUIを修正する
ButtonのOn Clickの(New Client Action)を選択してActionを作成。Built-in ValidationsはYesのままにしておく
Server側実装で作成するServer Actionを呼ぶ
Server Actionの結果をUIに反映する

Mandatoryプロパティは、その項目への入力が必須かどうかを設定します。Save Buttonをクリックしたときに該当項目が未入力だと、Input Widgetの下に必須項目であることを示すメッセージを表示します。

Input Typeプロパティは入力方式を規定します。Numberなら数値のみ入力可能になります。Numberにした場合、整数の他に小数も入力可能。ただし、Variableプロパティで指定した変数の型がIntegerであれば、小数を入力するとエラーになります。これが、自動生成される型チェック。

Formに配置されたButton WidgetのEvents>On Click>Built-in Validations=Yesにしておくと、Buttonをクリックしたときに、上で設定したMandatoryとData Typeによるチェックがききます。

下の例でいうと、Text AttributeがMandatoryのチェック違反、Integer AttributeがData Typeによる型チェックの例です。

上のように自動生成される必須・型チェックに失敗していると、対応するInput WidgetのValid=Falseとなり、ValidationMessageにはInput Widgetの下に赤字で表示するテキストが表示されます。

サーバ側で何らかのバリデーションを行い、発生したエラーをServer ActionのOutput Parameterとして返し、Client Actionでエラーを表示する処理を書きます。

特定の列に完全に紐付けられるエラーであれば、組み込みのバリデーションと同じようにInput Widgetの下に表示するのがいいでしょう。

Input WidgetのValidプロパティにFalse、ValidationMessageに表示したいエラーメッセージを設定してください。

こういうときは、通常のエラー表示と同じようにするしかないです。
Messageを使うか、Alert Widgetを使うといいのではないかと思います。