Skip to main content

 

アプリケーションの開発

 

 

OutSystems

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

ユーザーがフォームにデータを入力して送信ボタンをクリックするときに、データが有効であるかどうかをすぐに確認することを推奨します。データが有効であれば、アプリを続行できます。データが有効でない場合は、エラーがあるフィールドとその修正方法をユーザーに知らせる必要があります。

たとえば、メールを入力する必要があるフィールドにユーザーが名前を入力した場合、その情報は有効ではありません。アプリのビルトイン機能を使用してエラーメッセージを表示し、ユーザーに再試行を求めることができます。

クライアント側の検証を使用すると、入力の有効性についてのフィードバックをすばやく提供できるため、ユーザーエクスペリエンスが向上します。ただし、必ずクライアント側からのデータを確認してからデータベースでコミットする必要があります。

アクセラレータを使用して初期検証フローを作成する

OutSystemsのローコードアプローチでは、サポートされているデータ型に対するクライアント側の自動フォーム検証がデフォルトで用意されています。このビルトイン検証を使用するには、以下の手順を実行する必要があります。

  1. フォームの値のデータ型を設定します。手動で設定するか、エンティティからフォームフィールドをスキャフォールディングすることができます。
  2. 必要に応じて、フィールドを必須に設定します。
  3. アクセラレータをトリガーして、初期検証フローを含む新しいクライアントアクションを作成します。ロジックを自動的に作成するには、フォーム内のデータを送信する要素のイベントリストで[New Client Action]を選択します。詳細については、Buttonの新しいアクションを作成するときの手順の例をご覧ください。

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

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

InputウィジェットのMandatoryプロパティ

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

ユーザーが入力した値が有効であるかどうかを自動的にチェックするには、期待される値をアプリが識別できるようにしておく必要があります。ウィジェットのプロパティの[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ノードのConditionReorderItemForm.Validが設定されています。Validの値がFalseの場合は検証が失敗し、IfフローのFalseブランチが実行されます。

IfノードでフォームのValidブーリアン値を評価する

必須に設定したフィールドのみが検証されます。必須に設定していないフィールドはオプションとみなされ、検証はスキップされます。

検証のエラーメッセージおよび警告メッセージをカスタマイズする

検証メッセージを編集するにはいくつかの方法があります。

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

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

デフォルト検証メッセージのリスト

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

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

フィールドの検証メッセージの編集

アクセラレータによるクライアント側の検証の例

このセクションでは、クライアント側の検証の例を2つ取り上げます。

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

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

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

この画面のフォーム、フィールド、[Save]ボタンは、エンティティをフォームにドラッグしたときに作成されています。

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

手順の例

検証の初期ロジックが自動的に作成されるため、作業時間を大幅に短縮することができます。ここでは、ユーザーが有効なデータを入力しなかった場合にエラーを表示するときの手順の例を示します。この例では、ユーザーが以下の情報を入力した後に項目を並べ替えることができる画面について説明します。

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

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]を選択します。これにより、初期検証フローを含むクライアントアクションを作成するアクセラレータがトリガーされます。

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

    すべての検証が成功した場合

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

    フィールドの検証が失敗した場合

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

カスタム検証ロジックを作成する

サポートされているデータ型については、期待されるデータ型に関する情報を入力すると自動的にビルトイン検証が機能します。

より複雑なシナリオで検証メカニズムを拡張する必要がある場合は、検証ロジックを作成してウィジェットのフィールドのValid変数を設定します。フォーム内のいずれかのフィールドを無効にすると、フォーム全体が無効になります(Form.Validの値がFalseになります)。

カスタム検証の例

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

カスタム日付検証ロジック

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

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

アプリ実行中のカスタム検証メッセージ

従来のWebでの検証

このセクションは、サーバー側で検証が実行される従来のWebアプリに適用されます。

フォームが送信される際に実行されるサーバーアクションを使用して、フォームの検証を実装します。すべての検証をアクションフローの最初に追加します。

  1. 各検証について、以下の手順を実行します。
    1. 入力値を検証するためのロジックを追加します。
    2. 検証に失敗した場合は、入力のランタイムプロパティを以下のように割り当てます。
      • Input.Valid = False
      • Input.ValidationMessage = "<エラーメッセージ>"
  2. すべての入力を検証した後、Form.Validの値を確認します。無効な入力が1つでもある場合、フォームも無効になります。
    1. If要素を以下の条件で追加します。Form.Valid
    2. Trueの場合は、アクションフローを継続します。
    3. Falseの場合は、アクションフローを終了します。無効な入力の横に検証メッセージが表示されます。

ビルトイン検証が1つでも失敗した場合、あるいはフォームの任意のフィールドのValidランタイムプロパティにFalseが割り当てられていた場合、フォームのValidプロパティには自動的にFalseが割り当てられます。この場合、無効なすべての対応する入力の横に検証メッセージが表示されます。