フォームのフィールドを検証する

入力フィールドを必須に設定する

ユーザーが必ず値を入力する必要がある場合、そのフィールドは必須になります。フィールドを必須に設定するには、ウィジェットを選択し、［Properties］ペインでMandatoryプロパティを［True］に設定します。［Mandatory］フィールドがあるのは、InputウィジェットやButtonGroupウィジェットのように、一般的なユースケースにおいて必要な場合です。

フォームフィールドのデータ型を設定する

ユーザーが入力した値が有効であるかどうかを自動的にチェックするには、期待される値をアプリが識別できるようにしておく必要があります。ウィジェットのプロパティの［Input Type］リストでデータ型を選択します。Integer、Currency、Date、Time、Emailなどの複数のデータ型の中から選択できます。

ビルトイン検証を有効化または無効化する

クライアント側のビルトイン検証を有効にするには、データを送信するイベントのBuilt-In Validationsプロパティを［Yes］に設定します。たとえば、クライアントアクションを呼び出すButtonウィジェットやLinkウィジェットのOn Clickイベントなどがあります。

クライアントアクションでデータを検証する

ビルトイン検証を有効にすると、フォームを送信するクライアントアクションでFormウィジェットのBoolean型のValidプロパティにアクセスできます。たとえば、ReorderItemFormフォームでユーザーが正しいデータを送信した場合、ReorderItemForm.Validの値はTrueになります。いずれかのフィールドにエラーがある場合、ReorderItemForm.Validの値はFalseになります。

この例では、IfノードのConditionにReorderItemForm.Validが設定されています。Validの値がFalseの場合は検証が失敗し、IfフローのFalseブランチが実行されます。

デフォルトの検証メッセージを編集する

モジュールレベルでデフォルトの検証メッセージを編集することができます。Service Studioのいずれかのメインタブ（［Process］、［Interface］、［Logic］、［Data］）でモジュール名（1）をクリックして、モジュールのプロパティに移動します。次に、［Validation Messages］セクション（2）でメッセージを編集します。

プログラムに従ってフィールドの検証メッセージを変更する

アプリの実行中にフィールドの検証メッセージを変更することができます。これを行うには、ウィジェットのValidationMessageにテキスト値を割り当てます。なお、メッセージが表示されるのは検証が失敗してField.Validの値がFalseとなった後のみです。

データ型が事前定義されたフォームフィールドの自動作成

ローコードアクセラレータを使用してフォームにフィールドを挿入します。これにより、エンティティをデータソースとして使用する場合の作業を効率化できます。以下の手順を実行します。

1. 画面にFormウィジェットをドラッグします。
2. Formウィジェットにエンティティをドラッグします。フォームのフィールドに自動的に読み込まれます。
3. 各フィールドに移動し、オプションではないすべてのフィールドのMandatoryを［Yes］に設定します。
4. ［Save］ボタンを選択します。ボタンのプロパティの［Events］セクションで、［On Click］リストから［New Client Action］を選択します。デフォルトの検証ロジックを含む新しいアクションが開きます。
5. Form.ValidがTrueまたはFalseのときの異なるロジックを追加します。

エンティティをフォームにドラッグすることで、この画面のようにフォーム、フィールド、［Save］ボタンを作成できます。

手順の例

Service Studioでは検証の初期ロジックが自動的に作成されるため、作業時間を大幅に短縮することができます。検証ロジックを作成する手順の例を以下に示します。ユーザーが以下の情報を入力した後に項目を並べ替えることができるアプリの画面があります。

• 名前 — 文字列、オプション
• メール — メールアドレス、必須
• 数量 — 整数、必須

UIと基本ロジックを作成する手順は、以下のとおりです。

1. 新しいアプリを作成し、画面を追加します。画面に「ReorderItemScreen」という名前を付けます。

2. ローカル変数を3つ作成し、プロパティを以下のように設定します。

   名前	データ型
   EmployeeName	Text
   EmployeeEmail	Email
   Quantity	Integer

   ローカル変数（1）は以下のようになり、Name（2）プロパティとData Type（3）プロパティが入力されます。

   

3. 画面にFormウィジェットをドラッグし、「ReorderItemForm」という名前を付けます。

4. 「ReorderItemForm」にInputウィジェットを3つドラッグし、プロパティを以下のように設定します。

   名前	変数	必須
   Input_EmployeeName	EmployeeName	No
   Input_EmployeeEmail	EmployeeEmail	Yes
   Input_Quantity	Quantity	Yes

   Input Typeプロパティは、変数のデータ型に合わせて自動的に変更されます。

5. フォームの入力フィールドの下にButtonウィジェットをドラッグします。ボタンのラベルを「Reorder」に設定します。この手順が終わると、以下のようになっています。

   

   フォーム（1）と、その中に入力フィールド（2）があり、プロパティ（3）が設定されています。ボタン（4）がフォーム内にある必要があります。

   Inputウィジェットの上にLabelウィジェットをドラッグして、入力フィールドの上にラベルを追加します。

6. ボタンを選択してプロパティに移動し、［Event］セクションとその中にある［On Click］を探します。［On Click］リストを開き、［New Client Action］を選択します。新しいアクションによって、初期検証フローを含むクライアントアクションを作成するアクセラレータがトリガーされます。

   

   画面に戻ると、作成された「ReorderOnClick」クライアントアクション（1）が表示されています。［Reorder］ボタン（2）を選択し、［Events］セクションのBuilt-In Validationプロパティの値が［Yes］（3）であることを確認します。

   

7. 最後に、ユーザーが無効なデータを入力した場合はエラーメッセージを表示し、データが有効な場合は成功メッセージを表示するようにフローを編集します。ReorderOnClickを開くと、以下のようになっています。

   

   MessageノードをツールボックスからIfノードのFalseブランチにドラッグします。MessageノードのMessageプロパティに「"Check if all fields have the correct information and then retry."」と入力し、［Type］リストで［Error］を選択します（1）。ツールボックスからMessageノードをもう1つドラッグし、今度はTrueブランチにドラッグします。「""Item reordered!""」と入力し、［Type］リストで［Success］を選択します（2）。

   

8. アプリをパブリッシュして実行します。有効なデータを入力すると、成功メッセージが表示されます。

   

   一方、サポートされていない形式のメールを入力した場合や整数ではなく浮動小数を入力した場合は、エラーメッセージが表示されます。

   

   なお、名前フィールドはオプションです。

カスタム検証の例

この例では、フォームに出荷日を入力するフィールドが含まれています。検証ロジックで日付が過去のものであるかどうかを確認し（1）、過去のものである場合はInput_Date.Valid=Falseを設定することで無効なフィールドとしてマークします（2）。ユーザーエクスペリエンスを向上するため、Input_Date.ValidationMessageにカスタムメッセージを設定し、過去の日付は使用できないことをユーザーに知らせます（2）。

日付フィールドを無効にするとフォーム全体が無効になり（3）、フィールドの横にカスタムメッセージが表示されます。また、フローが終了する前には、画面の上に別のフィードバックメッセージが表示されます（4）。検証ロジックが正常に成功した場合は、アプリによってサーバーアクションが呼び出され、ユーザーによるリクエストを完了します（5）。

以下の図では、ブラウザで実行されているアプリでカスタム検証メッセージが表示され（1）、フォームの検証が失敗した後にフィードバックメッセージが表示されています。