フォームの作成

フォームは、内部ツールの最も一般的な側面の1つであり、通常、エンドユーザーがデータを作成または編集する方法でもあります。このガイドでは、単純なフォームの作成方法、データベースへのデータの挿入方法、既存のデータを編集する機能の追加方法およびフォームの入力内容の検証方法について説明します。

📘

フォームとJSONスキーマ・フォーム

このページでは、フォーム・コンポーネントを使用したフォームの作成について説明します。JSONスキーマ・フォーム・コンポーネントを使用して、Retoolにフォームを作成することもできます。これらの2つのコンポーネントの機能は多少重なる点がありますが、それぞれの使用については長所と短所があります。どちらのフォーム・コンポーネントを使用すればよいか分からない場合は、フォーム・コンポーネントの選択を参照してください。

---

1. フォームの作成

最初に、右側のコンポーネント・ライブラリーからFormコンポーネントをキャンバスにドラッグします。

フォームが空であることが分かります。デフォルトでは、何も入力されていません。Retoolでは、SQLデータベースのスキーマに基づいてフィールドを自動的に生成することができます。

🚧

SQL以外のリソース用のフォームの作成

現在、フォーム・ジェネレーターは、テーブル・スキーマを容易に検出できるようにするため、SQLデータベースのサブセット(PostgreSQL、mySQL、MS SQL)でのみ機能します。異なるリソース・タイプ(API、NoSQLデータベースなど)を使用している場合、個々のフィールド(テキスト入力、ドロップダウン、複数選択など)をFormコンポーネントにドラッグし、フォーム送信時に実行する書き込みクエリーを作成する必要があります。異なるリソースの作成方法の詳細は、インテグレーションの概要を参照してください。

Form要素を選択して、右側のInspectorタブで Generate fields from a database リンクをクリックすると、モーダル・ウィンドウが表示されます。

このウィンドウで、ドロップダウン・メニューからSQLデータベース・リソースおよびテーブルを選択します。テーブルで使用可能な列のリスト、各列にマップするフォーム入力およびその入力で使用する検証タイプが表示されます。×記号を押してその列がフォームに表示されないようにしたり、行をドラッグして順序を並べ替えることもできます。

この例では、last_nameフィールドの前にfirst_nameフィールドを配置し、email列の検証タイプを変更します。

Generate formボタンをクリックすると、変更後のフィールドがFormコンテナーに表示されます。

2. データベースへの新規レコードの挿入

フォーム・ジェネレーターによって挿入クエリーが自動的に作成されたことが分かります。この場合、名前がform1_insert_into_customersになっています。このクエリーには、個々のフォーム入力がすべてデータベースの各列にマップされたchangesetがあります。

この時点で、フォームに入力し、submitボタンを押すと、新規レコードがデータベースに挿入されます。この例に変更を1つ加えてから、実行しましょう。

idフィールドをユーザーが入力しなくてもいいように、これを削除し、値が自動的に増えていくようにしましょう。(注意: SQLテーブルはIDが自動増分されるよう既に構成されている場合があります。)

フォーム内のtextinput1要素(id入力項目)を選択し、deleteを押してから、他の要素を再配置します。

画面の下部にあるクエリー・エディターのパネルで、form1_insert_into_customersクエリーを選択し、idのchangeset値を{{textinput1.value}}から{{ Math.max(…query1.data.id) + 1 }}に変更します。

id値で別のクエリーquery1を参照していることに注意してください。これは、テーブルのすべての行を選択する単純なSQLクエリーです。このフォームで新しい行を追加したときにidが自動増分されるようにするために、テーブルのすべてのIDを返すquery1.data.id値を使用しています。その配列内の最大値が検出され、その値に1が加算されます。

常にquery1からのIDのリストを最新にするには、query1を最初に実行するように、フォームのOn Form Submitプロパティを変更します。

次に、成功時にform1_insert_into_customersをトリガーするようにquery1を設定します。

フォームを使用してデータを送信してみましょう。

3. 送信時のフォームのクリア

フォームの送信が成功したときに、入力されたデータがフォームに残っています。送信が成功したときに、営業担当者が他の顧客を入力できるように、フォームをクリアする必要があります。これを行うには、フォームのプロパティで Clear after submission トグルを有効にします。

4. フォームの事前入力およびレコードの更新

今、作業しているフォームは、ユーザーが既存のすべての顧客を表示することができれば、さらに便利になります。新規顧客を正常に追加できたかどうかを確認したり、既存の顧客データを変更できるようになります。

このように機能させるには、既存のフォームに少し変更を加えます。テーブル・コンポーネントをドラッグして、顧客テーブルのすべての行を選択する新規クエリーにこれを関連付けます。

次の手順では、テーブルの選択済みの行を使用して、フォームのデータを入力します。フォームの各入力項目を選択し、右側のInspectorタブでDefault valueプロパティを{{table1.selectedRow.data}}オブジェクトの対応するエントリーに設定します。選択した行のデータが存在するときにのみデータを渡すことができます。

例として、first_nameに対して{{table1.selectedRow.data ? table1.selectedRow.data.first_name : null}}を入力します。

フォームには、テーブル内の現在選択している行から値が自動的に入力されます。ただし、この状態でフォームを送信すると、新しいレコードが挿入され、既存の選択済みの行は更新されません。これを修正するには、別のアクション・タイプBulk upsert via primary keyの新規クエリーを作成します。

このクエリーは、主キー列としてidを使用します。idが既存の行と一致する場合、その行のデータが更新されます。idが一致しない場合、新規顧客レコードが追加されます。

前に行ったように変更セットを手動で作成するのではなく、一括クエリーを使用して、{{ [form1.data] }} (フォームのデータをすべて含む配列)を渡すことができます。しかし、入力名(例: textinput2)がデータベースの列名と一致していません。データベースの列と一致するように、フォーム内の個々の入力の名前を変更します。

次に、{{ [form1.data] }}値をクエリーのArray of records to updateプロパティに再入力すると、評価が以下のように表示されます。

次に、この新規クエリーを使用するように、フォーム・コンポーネントのOn Form Submitプロパティを変更します。

このクエリーを実行する前に、必要な設定がもう1つあります。フォームの送信時にidを自動増分する処理を前に作成したことを思い出してください。ユーザーが新規顧客を追加しようとするのか、既存の顧客を変更しようとするのかに応じて、選択したテーブル行のidを渡すか、新規idを自動増分するか、いずれかを行う必要があります。

フォーム・スキーマにid入力項目を組み入れ、エンドユーザーに表示されないようにHide when trueプロパティを{{ true}}に設定します。

次に、id入力項目をフィールドに追加して、テーブル内に選択した行があるかどうかDefault valueを確認します。選択した行がある場合、その行のidを使用して、項目に入力します。選択した行がない場合、非表示のidフィールドに増分式を移入します。

まだ、いくつかの作業があります。ユーザーが新規顧客を入力するときに行の選択を解除してフォームをクリアできるように、Tableコンポーネントの Clear selection トグルを有効にします。書き込みクエリーが終了した後に、query3を再度実行するように設定する必要があります。これにより、テーブルが更新され、フォームの送信後に最新データが表示されます。

これで、既存の顧客を編集する操作と新しい顧客を追加する操作を試すことができるようになりました。

5. 検証

最後に、重要な作業があります。フォームで基本的な検証を有効にする方法を確認しましょう。最初にフォームを生成したとき、emailフィールドの検証タイプを設定しました。間違った電子メール・アドレスを入力したときに、フィールドから検証エラーがスローされます。

データベースが不完全な顧客レコードにならないように、このフォーム内のすべてのフィールドを必須にする必要があります。

これを行うには、フォームの各フィールドをクリックして、Required fieldプロパティを切り替えて、FormコンテナーのValidate form on submitプロパティがオンになっていることを再確認する必要があります。

これで終了です。データベース内の行の追加と更新を行うための作業フォームができました。