4D Qodly Proのシリーズでは、データテーブルを使ってデータを表示する方法をご紹介してきました。今日は次のステップとして、レコードの追加、編集、削除の方法を学びます。これらの操作は、ダイナミックでインタラクティブなアプリケーションを作成するために不可欠です。
これらの機能を実証するために、パフォーマンス・レビュー管理アプリケーションを引き続き使用します。目標は、ユーザーが従業員情報を追加したり変更したりできる画面を設計することです。このプロジェクトは GitHub で公開されているので、参考にしてください。
作成ボタンと編集ボタンの追加
データテーブルの横に、2つのボタンを追加します：作成と 編集です。
データ入力フォームの表示には2つの選択肢があります：
- インライン・フォーム表示：インラインフォーム表示: ユーザーが “作成” または “編集” ボタンをクリックすると、データテーブルの横に入力フォームを表示します。フォームの表示/非表示は、ステートを使用して切り替えることができます。条件付きまたは非条件付きのステートは柔軟性を提供します。今のところ、ステートについて学びたいのであれば、このステートの概要ドキュメントと、このページ・ステートを使った動的なユーザーインターフェイスのブログを参照してください。
- モーダルダイアログの表示ユーザーが “Create” または “Edit” ボタンをクリックすると、モーダルダイアログでフォームを開きます。このチュートリアルでは、この方法を選択しました。
ダイアログの作成
ダイアログを作成するには、トップバーのダイアログボタンをクリックします。
ダイアログをカスタマイズするために、いくつかのプロパティが用意されています：
- オーバーレイtrueに設定すると、スクリーンオーバーレイが有効になります。
- ドラッグ可能：ユーザーによる再配置を可能にします。移動アイコンをカスタマイズできます。
- クローズ可能：ボタンまたはダイアログの外側をクリックすることで閉じることができます。
- アニメーション視覚的に強調するために、オープニングフリッカー効果を実装します。
詳細はダイアログのドキュメントを参照してください。
データ入力フォームの作成
従業員情報を収集するためのデータ入力フォームを作成します。このフォームにより、ユーザはデータベースエントリを作成または更新することができます。
フォームをデータソースにリンクする
前回のブログで、employees データソースにリンクされたデータテーブルを作成し、selected 要素を “theEmployee” データソースに接続しました。この “theEmployee” データソースが入力フォームに入力されます。
入力フィールドの追加
firstname、lastname、email、job などの基本的なフィールドには、Text Inputコンポーネントを使用します。
例Firstname フィールドの設定
- Text Inputコンポーネントをフォームにドラッグします。
- Qodlyのソースプロパティを “theEmployee.Firstname “に設定します。
theEmployee “の適切な属性にリンクすることで、他のフィールドについてもこのプロセスを繰り返します。
長いテキストフィールドの設定
descriptionのような長いテキストフィールドには、Text Inputコンポーネントを使いますが、テキストエリアとして構成します：
- テキスト入力コンポーネントをフォームにドラッグします。
- Type プロパティをText Area に変更します。
- Qodlyソースを “theEmployee.Description “に設定します。
部署とマネージャーのドロップダウンメニュー
部署やマネージャーフィールドのようなフィールドには、ユーザーが定義済みの値を選択できるセレクトボックスコンポーネントを使用します。
- データ・ソースを作成します： エンティティ・タイプの “department “データ・ソースを作成します、
- セレクト・ボックス・コンポーネントをドラッグする、
- Qodlyソースとして “theEmployee.Departement “を設定し、選択された要素として “department “を設定します。
- テキスト “department “でプレースホルダプロパティを定義します、
- セレクトボックス内にテキスト入力コンポーネントをドラッグします、
- テキスト入力をソース “$This.Name” にリンクします。
スイッチルックのチェックボックス
isActive “のようなブーリアンフィールドには、チェックボックスコンポーネントを使用します。モダンな外観にするために、Switchルックを使用します。
- チェックボックスコンポーネントをフォームにドラッグします、
- VariantプロパティをSwitchに変更する、
- Qodlyソースを “theEmployee.isActive “に設定する。
アクションの管理
4D Qodly Proは、4Dと同様のビルトイン標準アクションを提供することで、レコードの作成、保存、削除を簡素化します。
例保存アクション
- ボタンを追加し、Saveとラベルを付けます。
- EventパネルのOn Clickアクションの下にあるAdd Standard Actionをクリックします。
- データソース（この場合、Employee）を入力し、Saveアクションを選択します。
- Provide Feedback］チェックボックスを有効にして、予期しないエラーメッセージの処理をカスタマイズし、エンドユーザーに表示する内容を決定します。
ビジネスロジックのカスタム関数
標準のアクションに加えて、レコードの作成、削除、保存などの操作のためにカスタム関数を呼び出すことができます。例えば
- 保存前にデータを検証する。
- 追加フィールドにデータを入力するために計算を実行する。
このアプリケーションでは、標準アクションに依存することで物事をシンプルに保っていますが、Qodlyドキュメントで標準アクションのすべての可能性を調べることができます。
更新後のデータテーブルのリフレッシュ
レコードを追加または編集した後、変更を反映するためにデータテーブルをリフレッシュすることが重要です。これは、Reload アクションで簡単に実現できます。
保存後にデータテーブルをリフレッシュするには
- データテーブルにリンクされている employees データソースに Reload アクションを追加します。
- このアクションを、[保存] アクションと一緒に [保存] ボタンに割り当てます。
モーダル ダイアログの開閉
ユーザ インタラクションを向上させるために、適切なダイアログ アクションをモーダル ダイアログに関連付けます：
- 編集] ボタンと [作成] ボタンに、[ダイアログを開く] アクションを追加します。
- ダイアログ内の 保存 ボタンと キャンセル ボタンに、ダイアログを閉じる アクションを追加します。
次のステップ
おめでとうございます！これで、データを追加、編集、削除するための完全に機能するシステムが完成しました。Qodlyページを構築するために利用可能な幅広いコンポーネントをさらに調べるには、Qodlyコンポーネントに関する包括的なドキュメントをご覧ください。
あなたの感想を4Dフォーラムで聞かせてください。次回のブログでは、UIを動的にコントロールするステートについて説明します。