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