Retoolでは、システムに新しいデータを追加する方法が2つ用意されています。テーブル・コンポーネントを使用する方法と、フォームを使用する方法です。行を追加する方法は、使用しているデータ・ソースによって異なります。最初にPostgreSQLの場合について説明し、後で他のソースについて説明します。

テーブルを介した行の追加

テーブルにデータを読み込んであるものとして説明を始めます。ここでは、以下のような設定を使用します。usersテーブルからユーザーを取得するgetUsersクエリーがあり、{{ getUsers.data }}を介してそのデータをテーブル・コンポーネントに取得してあります。

Retoolでテーブルを介して新しい行を追加するには、on row add クエリーと bulk update クエリーという2つのクエリーを結び付ける必要があります。まずは on row add について説明します。

on row addクエリーの作成

最初に、コンポーネントの Inspector タブ(右側のサイドバー)を下にスクロールし、on row add ドロップダウンを見つけます。この設定では、基になるデータベースに行を追加するためにテーブルによって使用されるクエリーを、選択(または作成)できます。このためのクエリーはまだ設定していないため、create a new query オプションを選択します。

クエリー・エディター(下部のパネル)に、table1onRowAddedTriggerという新しいクエリーが表示されます。

そのクエリーをaddRowという、より簡単な名前に変更します。クエリーの名前を変更したら、必ずテーブル設定内の on row add ドロップダウンで新しいクエリー名を選択して更新します。

クエリーを on row add プロパティに関連付けたらテーブル・コンポーネントの右下に小さい+アイコンが表示されたことにお気付きでしょうか。これを使用することで、addRowクエリーの設定後に実際に新しい行を追加できます。

このクエリーを作成できるようにするために最後に行う必要があるのは、テーブルの列を編集可能にすることです。テーブルをクリックし、右側のコンポーネントの Inspector タブに移動して、各列の make editable 設定をオンにします。

作業が終わったら、テーブルの下部にある+アイコンをクリックしてみましょう。これは、新しい行を追加したいときに使用するUIです。

新しいデータを記述し変更内容を保存しましたが、まだ完成ではありません。addRowクエリーを設定する必要があります。

🚧

SQL記述GUIとその他のリソースとの比較

SQLデータベースの場合、Retoolでは記述用のGUIが用意されています。ここではそれを使用します。別のリソース(MongoDBやREST APIなど)を使用している場合は、このクエリーを異なる内容で設定する必要があります(例えば、Mongoの場合はupdateOne、REST APIの場合はPUT / POST)。

まず、データベース・テーブル名(users)と、実行する操作( Insert a record )を選択します。UIが更新され、changeset というフォーム・フィールド・セットが表示されます。ここに、挿入する新規データを配置します。

注意: changeset フィールドが表示されない場合は、リソースの横にあるドロップダウンで、SQLモードではなくGUI Modeを選択してあることを確認してください。

テーブルを介して行を追加するときには、{{ table1.newRow.* }}を介して新規データを参照します。例えば、email列の新規行UIに入力した新しい値を参照したい場合は、{{ table1.newRow.email }}を使用します。changesetに、それらすべての値を入力しましょう。このテーブルには多数の列があるため、いくらか手作業が必要になります。

また、テーブルの名前をusersTableに変更して、もう少し状況を分かりやすくしました。

コンポーネントの Inspector タブで列をクリックすると、列の種類を変更できることを覚えておいてください(テキスト、ドロップダウン、モーダルなど)。そのような変更は新規行UIに反映されるため、is_active列にブール値を使用する必要がある場合はUIにチェックボックスが表示されます。

📘

デフォルト値

この例では新規行のすべての値をテーブルに直接入力しましたが、その必要はありません。{{ }}内はすべてJavascriptとして評価されます。そのため、create_dateの値を現在の時間に設定したい場合は、{{ usersTable.newRow.create_date }}を取得するのではなく、{{ moment() }}を使用して現在のタイムスタンプを取得できます。

bulk updateクエリーの作成

この作業を行うために最後に必要なのは、bulk updateクエリーの設定です。これにより、セルを直接更新できるようになります。Retoolでは、テーブルを介して新しい行を追加するにはこのクエリーと前述のクエリーが両方とも必要になります。

前と同様に、テーブルをクリックし、コンポーネントのInspectorタブに移動します。on row add フィールドの上に bulk update action ドロップダウンが表示されます。ここで create a new query を選択します。

前と同様に、クエリー名を変更し(bulkUpdate)、bulk update action ドロップダウンから新しいクエリー名を選択して、テーブル(users)を選択します。今回は、Action type ドロップダウンから、insert a new record ではなく bulk update via primary key を選択します。

このクエリーはaddRowクエリーよりも設定が少し簡単です。必要なのは、テーブルから主キーを選択し、{{ usersTable.recordUpdates }}を Array of records to update に追加するだけです。.recordUpdatesプロパティは、テーブル内の更新後の新しい値の配列に評価されます。前に行ったのと同様に、列を編集可能に設定すると、その列内の任意のセルをクリックしてその値を更新できるようになります。save changes をクリックすると、bulk updateクエリーが実行され、新しい値がデータベースに書き込まれます。

これで、bulk updateクエリーとon row addクエリーの設定が完了し、テーブル・コンポーネントを介してデータベースに新しい行を追加したり行を編集したりすることができるようになりました。

フォームを介した行の追加

テーブルを使用していない場合や、より複雑なニーズがある場合は、フォームを介して行(またはデータ)を追加できます。Retoolでは、現在、次の2種類のフォーム・コンポーネントがサポートされています。

1. Formコンポーネント: 入力内容を追加する送信ボタンやドロップダウンなどがあるコンテナー
2. JSON Schema Formコンポーネント:( English ) 自分のスキーマに基づいて自動生成できるJSONを介して編集する完全な形式

JSON Schema Formコンポーネントは標準的なフォームにより適しています。一方で、Formコンポーネントでは、レイアウトと入力タイプをより柔軟に選ぶことができます。どちらを選んだ場合も、データベースまたはAPIにデータを追加するプロセスは同じです。ここでは、分かりやすくするためにFormコンポーネントを使用します。

📘

ビデオ・ウォークスルー

JSON Schema Formにより行を追加する方法を説明する短い動画を用意しました(こちら)( English )。

まず、Formコンポーネントをキャンバスにドラッグし、それをaddRowFormという名前にします。また、フォームにemailInputというText Inputコンポーネントを追加し、そのラベルを「email」に変更しました。

必要な入力要素をどれでもフォームに追加できます(テキスト入力、ドロップダウン、複数選択など)。テーブルに行を追加するのに必要な要素をさらにいくつか追加しました。

Text Inputコンポーネントには入力タイプを指定できることを覚えておいてください。これらのいくつかについて(credits usedなど)、numberタイプを指定しました。

これで、フォームの設定が完了しました。フォーム・データを取得しusersテーブルに挿入するクエリーに、そのフォームを関連付けましょう。また、そのフォームをフォーム・コンポーネント内の「submit」ボタンに結び付けます。

まず、「addRow」という新しいクエリーを作成します(前述のセクションに沿って進めている場合は、それを「addRowFromForm」など別の名前にしてもかまいません)。ドロップダウンから目的のテーブルを選択し、次に「insert a record」アクションを選択します。

changesetに、フォーム内のすべてのフィールドへの参照を移入しましょう。波括弧内の.valueプロパティで入力の値を参照します。このように多くの入力を扱う場合は、後で簡単に参照できるようにそれらに適切な名前を付けることが重要となります。

changesetにデータベース内の各行の値を含めたら、クエリーを保存します。最後の手順は、このクエリーをフォームに結び付けることです。Formコンポーネントをクリックし、「On Form Submit」ドロップダウン設定からaddRowクエリーを選択します。

Formコンポーネントには、送信時の入力内容のクリア、ロード・インジケーターの表示、スクロールの有効化、およびその他多くの便利な機能を設定することもできます。

クエリーを正しく設定したら、準備は完了です。エディター・モードを使用している場合は、「Submit」ボタンをダブルクリックして確認します。解決が必要なデータ型エラーが多少発生する可能性があります。

その他のデータ・ソースでのデータの追加

PostgreSQL以外のソースを使用している場合は、このチュートリアルで扱っている特定のクエリーに変更が必要になります。例えば、MongoDBを使用している場合、on row add クエリーではupdateOne操作を使用します。ユーザーをFirebaseに追加している場合は、create a user アクションを使用します。問題が発生した場合は、いつものように、コミュニティに投稿( English )するか(私たちが参加しています)、Retool.com( English )のIntercomウィジェットを使用してサポートに連絡してください。