複雑なフォームの作成
目次
組織は、優れたレイアウトやスタイル 機能、条件付き表示や段階的な公開の構成、フォームの検証 などを使用して、複雑なフォームを開発できます。こうした機能によって以下のようなものを開発しています。
- 広範な紙ベースのフォームのレプリカ
- 医療、保険、法務関連の膨大なデータ入力用の、多数のフィールドを備えたインターフェイス
複雑なビジネスロジックに基づいた精密な検証ルールと表示ルール
レイアウトとスタイル
複雑なフォームを複数のセクションに分割し、一貫性のある入力サイズと完璧な配置を実現するのは簡単な作業ではありません。OutSystemsは、これらすべてを以下のような機能によって簡素化します。
- ビルトインのグリッドシステム: 要素を簡単にページに配置し、バランスよくサイズ調整することができます。
- 優れた構成要素を備えた完全なUIフレームワーク: このフレームワークにより、構造、内容、データ、コントロールを簡単に作成でき、ページを3列以上に分割するといった難しいタスクも容易になります。デザイン性の高いパネル、折り畳み可能なセクション、洗練されたアラートボックス、情報ウィンドウ、タッチ式コントロールを使用して、どのデバイスでも表示可能な複雑なフォームを作成することができます。
- CSSエディタ: このエディタにより、ページやコントロールのスタイル設定を自由自在に変更することができます。
- IDEのビジュアルスタイルエディタパネル: このエディタパネルにより、CSSの一般的なプロパティに変更を加えることができます。
OutSystemsで作成した複雑なフォームの例を以下の図に示します。
条件付きの表示と段階的な公開
複雑なフォームの中には、ユーザーの入力内容に応じて新たなセクションが表示されるものがあります。また、ユーザーの特定のロールごとに表示されるセクションやフィールドが異なるものもあります。OutSystemsでは、こうしたフォームを構築するという課題にも、以下のような機能によって対応できます。
- ロールベースのセキュリティとシンプルな構成: UIまたはビジネスロジックレベルでユーザーのロールを確認できます。
- UI要素のプロパティの可視化: これにより、レンダリングの管理が可能になります。
- Ifノードの可視化: これにより、ブーリアン型表現の評価時の真偽分岐を表示します。
- ビルトインのAjax機能: ページ全体を再度読み込むことなく、フォームの再読み込み、更新、削除ができます。
- UIコントロールイベントを有効にする構成:: たとえば、コンボボックスの値が選択された場合やチェックボックスが選択された場合、入力文字列が変更された場合にアクションをトリガーすることができます。
条件に応じてページの一部を表示する方法を以下の例に示します。
フォームの検証
OutSystemsでは、クライアント側とサーバー側でのフォームデータの検証が可能です。
クライアント側の検証
クライアント側では、入力必須フィールドとデータ型不一致の検証をコードの記述なしで有効にできます。
パスワードの複雑さを確認するウィジェットやSSN（社会保障番号）の検証など、より複雑なクライアント側の検証も、簡単なJavaScriptスニペットを使用して実現できます。スニペットは、JavaScriptエディタを使用して、UIコントロールに簡単に組み込んで統合することができます。
サーバー側の検証
最近のブラウザでは、ページのHTMLコードやJavaScriptが簡単に改ざんされてしまいます。フォームのデータがバックエンドのシステムに到達する前に、不正な改ざんを受けていないかどうかを検証するには、サーバー側での検証が不可欠です。
OutSystemsの構成要素を活用することで、データの検証、操作、保存などを行うことができます。フォームのデータ検証によく使用される構成要素としてはクエリ、Webサービスの呼び出し、文字列操作関数、数学関数、データのフォーマット設定および変換などが挙げられますが、OutSystemsではほかにも多くの要素を備えています。
コントロールには、ビルトインのエラーメッセージプロパティがあり、検証メッセージを自動的に画面表示する際に使用できます。
以下に、画面に表示されるエラーメッセージの例を示します。
以下に、フォーム検証のロジックの例を示します。
