作成の流れ

サンプル画面をベースに、一般的な親子編集画面作成の流れをご案内します。

・スタジオでの画面作成　
・Salesforce 側での画面の呼び出し設定

＃ページブロックセクション
＃項目の配置　
＃パネルグリッド　
＃データテーブル
＃編集ボタンの上書き

スタジオを開いて Salesforce に接続後、左上の新規画面作成をします。
Salesforce レイアウトを選択して、オブジェクトを取引先にし、Visualforce ページ名を入力してOKを押します。

ページブロックとページブロックセクションをクリックすると表示されるプロパティにて、それぞれヘッダーのタイトルを変更します。

ページブロックセクションをクリックすると表示されるメニューから列追加をします。

スタジオの左側にあるオブジェクトタブから、取引先名などの入力項目をドラッグ&ドロップで配置していきます。
必要な項目が配置できたら、次へ進みます。

サンプルではこのような状態になります。

続いて、住所情報を見やすくまとめるため、スタジオ左側のコンポーネントタブからパネルグリッドを配置します。

行は３、列は７にしてください。

配置されたあとは、右側のレイアウトから「ページ幅に合わせる」にチェックを入れてください。

７列目の下２行のセルを選択して、右側のプロパティにて高さを50に変更してください。

パネル全てを選択して、各表示位置を中央に変更します。

オブジェクトの配置項目種別を「ラベル」にして、パネルグリッドの１行２列目に「郵便番号(請求先)」項目を配置します。

配置後、プロパティから値を編集で「(請求先)」を削除します。

ラベルの配置が完了したら、配置項目種別を「入力」に変更してそれぞれの入力欄に対応するように項目をドラッグ＆ドロップしていきます。

入力項目のサイズはマウスで変更可能です。

スタジオ左のコンポーネントタブから「タブパネル」を配置します。

配置したタブをクリックすると、各タブの表示名を変更できます。

同じくコンポーネントタブから、先程配置したタブの中に、ページブロックを配置します。

その後、データテーブルをページブロックの中に配置します。

オブジェクトは取引先責任者にし、任意で表示機能設定のチェックをしてOKを押します。

スタジオ右側のオブジェクトタブ内にある「オブジェクト」欄を「関連オブジェクト」に変更し、取引先責任者にセットします。

表示された取引先責任者の項目をドラッグ＆ドロップで配置します。

表示したい項目を配置していき、同様に商談のタブも作成・項目配置をします。

コンポーネントタブから保存ボタン・キャンセルボタンを配置します。

必要に応じて LEX デザインを有効化します。

スタジオ左上のファイル欄の中にあるデプロイを押します。
接続している環境に応じてテスト・本番を選択し、デプロイをします。

Salesforce 設定から取引先のオブジェクトマネージャを開きます。
ボタン、リンク、およびアクションから「編集」の編集ボタンを押します。

上図のように、 Salesforce Classic の上書きから 先ほど作成した Visualforce ページをセットします。
その後、Lightning Experience の上書きを「Salesforce Classic」の上書きを使用に設定します。

取引先レコードから編集ボタンを押すと、作成した画面が表示されます。