テーブル
テーブルは、アクションの実行結果を画面に表示するためのコンポーネントです。 「詳細テーブル」が1つのデータを表示するためのコンポーネントであるのに対して、「テーブル」は複数のデータを一覧表示するためのコンポーネントです。 管理画面で言うところの一覧画面や検索画面を作成するために利用できます。
アクション設定
実行結果を表示したいアクションの設定です。実行方法には2種類あります。
- コンポーネントの表示時に実行
- フォームで実行
コンポーネントの表示時に実行
ビューを開いてコンポーネントが表示されるときに、選択したアクションが自動的に実行され、その結果が表示されます。
選択できないアクション
以下の条件に該当するアクションは選択できません。
- ファイルパラメーターを持つ
- 非推奨の「システム値」パラメーターを持つ
- データソースが削除されている
- ジョブキューが設定されている（⚠️限定公開の機能です）
パラメーターの値
パラメーターを持つアクションを選択すると、アクションのパラメーターの値を入力できます。 入力された値はアクションを実行するときに使用されます。
入力方法
パラメーターの値は、アクション実行画面と同じフォームでの入力が可能です。利用できるフォームについては、各種パラメーターのドキュメントをご覧ください。
また、「値を式で設定する」を有効にすると、JavaScriptを使って柔軟に値を設定できます。詳細については「式」をご覧ください。
なお、式では以下の値が使用できます。値の詳しい説明についてはドキュメントの各セクションをご覧ください。
フォームで実行
「フォーム」コンポーネントで設定したアクションの結果を表示するオプションです。 アクションは自動ではなく、ビューでの画面操作によって実行されます。
このオプションを利用する場合はフォームコンポーネントを選択する必要があります。 ビューからフォームを操作してアクションを実行すると、その実行結果が表示されます。
アクションの実行結果の扱い
アクションの種類によっては実行結果が複数になる場合がありますが、デフォルトでは1番目の実行結果が表示されます。 例えば、MySQLアクションではクエリを複数登録でき、それぞれのクエリに対応する実行結果がアクションの実行結果となります。
このようなケースでは、「結果の加工」機能を使うことでどの実行結果を表示するか選択できます。 詳細については「結果の加工」のドキュメントをご覧ください。
コンポーネントが求めるアクションの実行結果の形式
コンポーネントにはそれぞれ、表示できる実行結果の形式が定められています。
テーブルで表示可能なデータ形式はJavaScriptのオブジェクト (opens in a new tab)の配列です。 例えば、以下のようなデータが表示可能です。
[
{ id: 1, name: "ベース太郎" },
{ id: 2, name: "ベース花子" },
];逆に、実行結果が文字列や数字の配列、ただのオブジェクトであるような場合はエラーが表示されます。
以下は、実行結果が"[1, 2, 3]という数字の配列の場合のエラーです。
こういった場合も、「結果の加工」を用いることで表示が可能になります。
結果の加工
複数の実行結果を返すアクションを利用している・実行結果が配列でないなどの場合は、「結果の加工」機能を使うことで表示をカスタマイズできます。 詳細については「結果の加工」をご覧ください。
列のカスタマイズ
「列のカスタマイズ」機能によって、以下のようなテーブルの表示内容の変更が可能になります。
- 列名の変更
- 複数の列の値を使って新しい列を作る（例：「姓」と「名」の列を結合して「名前」の列を追加する）
- 列の値をアクション実行画面やビューへのリンクにする
デフォルトの列
「列のカスタマイズ」が未設定の場合、テーブルには自動で列が追加されています。 実行結果の配列の最初の要素であるオブジェクトのキーを列名とし、その値を各行の列の値として表示します。
アクションの実行結果が次のような場合を例に取ります。
[
{ id: 1, name: "山田太郎" },
{ id: 2, name: "山田花子" },
];この場合、idとnameがオブジェクトのキーとなるので、この2つの列がテーブルに表示されます。
「列のカスタマイズ」を使用した場合
「列のカスタマイズ」を設定している場合は、設定した列のみがテーブルに表示されます。
つまり、上記の例で表示されていたデフォルトのidとnameの列は表示されず、明示的に追加された列のみが表示されます。
列の追加
設定画面上部の「追加」あるいは「一括追加」ボタンから列を追加できます。
「追加」ボタンを押すと、新しい列を設定できるようになります（詳しい設定方法は後述します）。
「一括追加」ボタンを押すと、「列の一括追加」画面が開きます。
「列の一括追加」画面にはデフォルトの列名が一覧で表示されており、これらの中から必要に応じて列を選択できます。 「追加」ボタンを押すと、選択した分の列が追加されます。
列の設定
列名
テーブルの一番上に表示される列名を設定できます。
列の種類
表示する値をカスタマイズしたり、ビューやアクション実行画面へのリンクにするための設定です。 以下の中から選択します。
- 値の形式に合わせて表示
- アクション実行画面へのリンク
- ビューへのリンク
値の形式に合わせて表示
次のように、値に応じて自動で表示形式が決まります。
- 画像・動画と判別可能なURL：画像・動画として表示されます（詳細は「画像や動画の表示」をご覧ください）
- その他のURL：リンクテキストになります
- 画像・動画・PDFファイル：それぞれプレビューされます
- etc...
例えば、以下はidの列が通常のテキスト、urlの列がリンクテキストになる例です。
// アクションの実行結果
[
{ id: 1, url: "https://basemachina.example/users/1" },
{ id: 2, url: "https://basemachina.example/users/2" },
];
また、PDFの場合は次のようにプレビューが表示されます。
値 - 列から選択
「値の形式に合わせて表示」では列の各行に表示する値を設定できます。
まず、「列から選択」では、デフォルトの列の値をそのまま使います。
例えば、[ { "id": 1, "name": "ベース太郎" }, { "id": 2, "name": "ベース花子" } ]という実行結果の場合は、nameを選択するとベース太郎とベース花子が表示されます。
値 - 式で設定
「式で設定」では、JavaScriptの式を使って値を設定できます。詳しくは「式」をご覧ください。
なお、式では以下の値が使用できます。値の詳しい説明についてはドキュメントの各セクションをご覧ください。
値 - 固定の値
なんらかの固定の値を表示したい場合に利用できます。 すべての行で同じ値が表示されます。
アクション実行画面へのリンク
このオプションを使うと、列の各行が選択したアクションの実行画面へのリンクになります。
利用ケースとしては、テーブルを使った一覧画面から、特定のデータを編集するアクションの実行画面を開くような使い方が可能になります。
リンクテキスト
列に表示されるアクション実行画面へのリンクのテキストに関する設定です。「値の形式に合わせて表示」の値と同じ仕様に従います。
パラメーターの初期値
選択したアクションのパラメーターに初期値を設定すると、フォームの初期値が入力された状態で実行画面を開くことが可能になります。 これも入力する値に関しては「値の形式に合わせて表示」の値と同じ仕様に従います。
ただし、「式」で設定する場合はパラメーターの入力値の種類に応じた適切な値を設定する必要があります。 詳しくは「式」をご覧ください。
移動時に自動でアクションを実行する
リンクをクリックし実行画面へ移動したときに、そのまま自動でアクションを実行するかどうかを設定できます。
新しいタブで開く
リンクをクリックしたときに、実行画面を新しいタブで開くかどうかを設定できます。
ビューへのリンク
このオプションを使うと、列の各行が選択したビューへのリンクになります。
利用ケースとしては、テーブルを使った一覧画面から、特定のデータを表示する詳細画面としてのビューを開くような使い方が可能になります。
リンクテキスト
列に表示されるビューへのリンクのテキストに関する設定です。「値の形式に合わせて表示」の値と同じ仕様に従います。
クエリパラメーター
ビューへのリンクに付与するクエリパラメーターを設定します。 クエリパラメーターは、複数の「名前」と「値」の組み合わせで設定します。
リンク先のビューに「クエリパラメーター設定」を設定している場合は、そこで指定されたクエリパラメーターのみをここで設定します。
例えば、以下の例ではリンク先のビューでuser_idというクエリパラメーターが設定されています。
リンク先のビューにクエリパラメーター設定がない場合は、自由にクエリパラメーターを設定できます。
どちらの場合も、クエリパラメーターの値の入力方法は「値の形式に合わせて表示」の値と同じ仕様に従います。
新しいタブで開く
リンクをクリックしたときに、実行画面を新しいタブで開くかどうかを設定できます。