> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

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

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

## 機能概要

レコード詳細ページは、単一データの閲覧と編集を行う中核となる画面です。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 テーブルアプリで詳細ページをカスタマイズする場合は、アプリの管理権限が必要です。