レコード詳細ページと入力ページのカスタマイズ

​

機能概要

レコード詳細ページは、単一データの閲覧と編集を行う中核となる画面です。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. グループとタブで構造を整理:入力フィールドが多い場合、グループやタブで分類して、入力フローをより明瞭にできます。

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

​

よくある質問

​

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

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

​

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

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

​

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

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