詳細・入力ページのカスタマイズ

​

概要

レコード詳細ページは、単一データの閲覧と編集を行う中核となる画面です。AI テーブルでは詳細ページを視覚的にカスタマイズでき、ブロックを組み立てるように自由にページ構造を構成できます。

1. 詳細ページレイアウトのカスタマイズ：
   • コンポーネントをドラッグして、詳細ページの情報階層と配置を自由に設計でき、業務シーンに合わせたデータ表示画面を作成できます。
2. AI テーブルアプリでスタイルを再利用：
   • データテーブルで完成した詳細ページデザインは、AI テーブルアプリ内の各リストコンポーネントに素早く同期されます。繰り返し設定する必要がなく、複数デバイスで一貫した体験を提供できます。

​

操作手順

全体の流れ：まずページの骨組みを決め、次に骨組みにフィールドを配置して、最後にスタイルを微調整します。カスタマイズが完了すると、フィールドの配置とグループ設定は新規レコードの送信ページにも自動適用されます。

​

カスタム詳細ページパネルを開く

1. レコード詳細ページを開く：データテーブルで、最左列のフィールドセルにカーソルを合わせ、表示される 「レコードを展開」 アイコンをクリックします。
2. カスタムパネルに入る：レコード詳細ページの右上で 「カスタマイズ」 をクリックすると、カスタム詳細ページの設定パネルが開きます。

​

ページ設定

カスタムパネルに入ると、右側にページ設定オプションがデフォルトで表示されます。右上の 「完了」 をクリックするとカスタマイズ設定が保存され、プルダウンから 「デフォルトレイアウトに戻す」 を選択すると、設定パネルはカスタマイズ前のデフォルト構成に戻ります。

1. ページタイトルとタイトルサイズ：任意のフィールドを詳細ページ上部のタイトル内容として選択でき、タイトルの文字サイズも調整できます。
2. 見出し画像： プルダウンで画像タイプのフィールドを見出し画像として選択できます。フィールド設定後は、画像のフィット方式（埋める／フィット／ストレッチ）とレイアウトスタイル（上下レイアウト／左右レイアウト）を設定できます。レイアウトが左右の場合は画像サイズ（小／中／大）も設定できます。
3. アクションボタン：データテーブルのボタンフィールドを詳細ページの上部に固定して、操作を素早く実行できます。
   • メインスイッチでアクションボタンを追加するか制御します。
   • 「+ 新規ボタン」 をクリックすると、新しいボタンフィールドを直接作成できます。
   • 既存のボタンをクリックすると対応する操作を実行できます。
4. ビュー設定に従ってフィールドを非表示にするか：有効にすると、詳細ページは現在のビューでのフィールド表示・非表示設定に従って、対応するフィールドを自動的に隠し、ビューごとに異なる情報を表示できます。

​

タブの設定

タブは大量の情報を分類するのに適しており、タブを切り替えて異なるコンテンツ領域を行き来できます。

1. タブの追加：カスタム詳細ページで 「+ グループ追加」 > 「タブグループ」 をクリックします。
2. タブの設定：タブを選択すると、右パネルで以下の設定ができます。
   • タブのタイトルと表示有無：タブ名を入力し、タイトルを表示するか制御できます。
   • タブ：各タブグループに複数のタブを含められます。「タブを追加」 をクリックすると新規追加でき、上限は 20 個です。
     • タブ名の編集、ドラッグによる順序変更、不要なタブの削除が自由にできます。
   • 外観：タブ領域のタイトル色、背景色、枠線スタイルを調整できます。
3. タブにコンテンツを追加：あるタブを開いた状態で 「+ コンポーネント追加」 からフィールドやレイアウトコンポーネントを配置します。すべての要素はドラッグで並べ替えられ、タブ外部から直接ドラッグして配置することもできます。
4. タブの位置を移動：タブを目的の位置にドラッグするだけです。

​

フィールドの設定

詳細ページのフィールドは、通常グループまたはタブ内に配置でき、新規フィールドの作成もできます。

フィールドはコンポーネントから独立して存在できません。詳細ページやタブに直接フィールドを追加すると、システムが自動的にグループを生成して受け皿とします。

1. 既存フィールドの追加：通常グループまたはタブグループを選択し、「+ コンポーネント追加」 からデータテーブル内の既存フィールドを選びます。
2. 新規フィールド：「+ コンポーネント追加」 > 「+ フィールド追加」 から直接作成すると、設定完了後にデータテーブルにも同期されて表示されます。
3. フィールドの削除：対象フィールドを選択し、右側の 「︙」 > 「削除」 をクリックします。
4. フィールド設定とスタイルの変更：フィールドを選択して、右側の フィールド パネルで設定を変更します。
5. フィールドの移動：フィールドを選択して直接ドラッグすると、ページ内の位置を変更できます。

すべての設定が完了したら、右上の 「完了」 をクリックして保存すると、カスタム詳細ページのレイアウトが即座に反映されます。

​

AI テーブルアプリでカスタム詳細ページを使う

AI テーブルアプリのリストコンポーネントで、あるレコードを初めて開くと、システムは元データテーブルのカスタム詳細ページスタイルを自動取得して、当該コンポーネントに適用します。初回のみ自動同期され、その後はそれぞれ独立して保守されます。

1. 同一スタイルの再利用：元データテーブルで詳細ページデザインを完成させ、各アプリで対応するリストコンポーネントを順に開いて初回同期を実行するだけです。複数のアプリで一貫した体験を保ちたいシーンに適しています。
2. 個別スタイルの設定：アプリ内のリストコンポーネントで個別に詳細ページをカスタマイズし、各コンポーネントが完全に異なるレイアウトを持てます。アプリ側の変更は元データテーブルへ書き戻されません。

アプリ内でリストコンポーネントの詳細ページをカスタマイズするには、当該 AI テーブルアプリの管理権限が必要です。

​

入力ページのカスタマイズ

入力ページは 「レコード追加」 から開く新規レコード入力画面です。スタイルとレイアウトをカスタマイズして、実際のデータ入力シーンにより合わせられます。

​

カスタム入力ページパネルを開く

1. 入力ページを開く：データテーブルビューで 「レコード追加」 をクリックすると、新規レコードの入力ページが開きます。
2. カスタムパネルに入る：入力ページの右上で 「カスタマイズ」 をクリックすると、入力ページの設定パネルが開きます。

​

入力ページの設定

入力ページのカスタマイズ操作は詳細ページと類似しており、次のことができます。

1. フィールド順序とグループの調整：頻繁に入力するフィールドをページ上部に配置し、頻度の低いフィールドや任意フィールドを下部に配置することで、ユーザーの入力負担を減らせます。
2. グループとタブで構造を整理：入力フィールドが多い場合、グループやタブで分類して、入力フローをより明瞭にできます。

入力ページのレイアウト設定は詳細ページと独立しており、片方を変更してももう一方には影響しません。

​

よくある質問

​

Q: 詳細ページをカスタマイズすると、他のページに影響はありますか？

A: 一部影響します。詳細ページのフィールド配置とグループ化は、新規レコードの送信ページに自動同期されます。AI テーブルアプリでは、リストコンポーネントを初めて開いた際に元データテーブルのデザインを取得しますが、その後は独立して動作し、相互に干渉しません。

​

Q: プリセットスタイルを切り替えると、設定済みのフィールドは失われますか？

A: 失われません。スタイルはページのレイアウト構造のみを変更し、フィールドのデータ内容と属性設定は完全に保持されるため、切り替え後も微調整を続けられます。

​

Q: どのロールが詳細ページをカスタマイズする権限を持ちますか？

A: 権限モードによります。高度な権限を有効にしていない場合、編集権限または管理権限を持つメンバーが操作できます。高度な権限を有効にした場合は、管理権限を持つメンバーのみが操作できます。AI テーブルアプリで詳細ページをカスタマイズする場合は、アプリの管理権限が必要です。