ページレイアウトの基礎

ページレイアウトとは
1. ページレイアウトで設定できること
ページレイアウト設定手順
ページレイアウトを1から新規作成する

ページレイアウトとは

レコードの詳細画面や、編集画面における、項目やボタン等の配置のことを「ページレイアウト」といいます。

プロファイルやレコードタイプ毎に、それぞれページレイアウトを設定することで、各ユーザに合わせた配置にすることができます。

ページレイアウトで設定できること

項目の設定

項目のレイアウトへの追加・削除ができます
項目ごとに、レイアウト上での編集を不可にすることができます
※この設定をしても、Apexやワークフロー等による編集は不可にできません
項目ごとに、レイアウト上での入力必須設定をすることができます
※この設定をしても、項目自体で必須設定をしていない場合、Apexなどによるレコード作成では未入力でもエラーにはなりません
間を空けたいときは、「空白スペース」を配置します

セクションの設定

セクションの追加・削除により、項目をセクション分けして配置できます
編集画面・詳細画面における、セクションの区切り線・名称の表示 / 非表示設定ができます
セクション内の項目表示列数を、1列 or 2列から選択できます
- （2列の場合）タブキーの順序を「左から右へ」or「上から下へ」から選択できます
カスタムリンクセクションには、作成したカスタムリンクを配置できます

ボタン・クイックアクションの設定

作成したボタン・クイックアクションの配置を設定できます

ページレイアウト設定手順

こちらの記事で作成したカスタムオブジェクト「テストオブジェクト」の画面をカスタマイズします。

テストオブジェクトに新規レコードを作成し、カスタマイズ前後の画面を確認します。

設定前のレイアウトを確認

設定前は以下のようなレイアウトとなっています。

設定手順

画面右上の「設定」を押下する
「オブジェクトマネージャ」を押下する
ページレイアウトを編集したいオブジェクトを選択する
※ここでは、「テストオブジェクト」を選択する
「ページレイアウト」を選択し「テストオブジェクトレイアウト」を押下する
ページのカスタマイズをする
- 項目「所有者」を「システム情報」のセクションにある項目「最終更新者」の下に移動する
- 画面上部にスクロールでついてくるボックスから「セクション」をドラック＆ドロップし、
  「情報」と「システム情報」セクションの間に配置する
  - 「セクションヘッダーの表示位置」は詳細ページ・編集ページともにチェックを入れる
  - 「セクション名」は任意のものに変更する（ここでは”追加したセクション”としている）
  - 「レイアウト」は2列にする
  - 「タブキーの順序」は”左から右へ”とする
- 追加したセクションに項目「テキスト項目」を移動する
- 各セクションにカーソルを合わせた際に右側に表示される「セクションプロパティ」を
  クリックする
  →　「セクションヘッダーの表示位置」の”詳細ページ”にチェックを付ける
  →　これにより、レコードの詳細画面では表示されていなかったセクションが可視化される
「保存」を押下する

動作確認

再度テストオブジェクトの”テストレコード”画面を開き（開いたままの場合は画面の更新をする）、
設定が反映されているか確認する

編集した通りに項目の配置が変更され、新しいセクションが追加されていることが確認できました。

今回はもともとシンプルな画面を少し変更しただけですが、項目が増え情報量が多い画面はセクション分けや項目の配置を工夫して、ユーザに見やすい画面を作ってみましょう。

ページレイアウトを1から新規作成する

上の手順は、カスタムオブジェクトを作成した際に自動で作成される、デフォルトのページレイアウトを編集しました。
次は、新しいページレイアウトを1から作成する手順を紹介します。

設定の「オブジェクトマネージャー」から、テストオブジェクトの設定画面に移動する
「ページレイアウト」を選択し、「新規」を押下する
ページレイアウト名を入力し、「保存」を押下する
※「既存のページレイアウト」で既存のレイアウトを選択すると、そのレイアウトのコピーとして作成されます。
※今回は”なし”を選択し、1からレイアウトを作ります
レイアウトを編集し、「保存」を押下する
※ここでの項目やセクションの設定は、先ほどと同様の手順となります
セクションや項目を配置・編集したら「保存」を押下する
新しいページレイアウトの作成が完了しました