SkyVisualEditorのページ割り当てをLightning Experienceで実現するためのベストプラクティス（実装編）

前回「理論編」にて、SkyVisualEditorのページ割り当て機能を如何にLightning Experience（LEX）へ落とし込んで移行するかを考察しました。
今回は実際に移行するための実装手順を紹介したいと思います。

今回は、以下のアプリケーションをClassicからLEXに移行する、という想定シナリオのもと、手順を説明します。

Classicで実装していた画面のロールアウトのうち、「本登録レコードタイプ」を例に具体的な移行手順を説明します。

Classicで使用していたSkyVisualEditor画面はそのままLEXに流用可能ですが、LEX用として以下修正を加えたものを用意してください。

Lightningアプリケーションビルダーでレコードページを作成する方法はいくつかありますが、今回はデフォルトのページテンプレート（ヘッダーと右サイドバー）を他のものに変更したいので、設定画面のLightningアプリケーションビルダーから新規作成します。

作成ウィザードが開くので、「レコードページ」を選択します。

任意のページ名を入力し、オブジェクトを選択します。続けて、ページテンプレートを選択します（ページテンプレートはあとから変えられません）。

アプリケーションビルダーでページをレイアウトします。SkyVisualEditor画面は標準コンポーネントから「Visualforce」をドラッグアンドドロップして右側のプロパティで表示するVisualforceページを選択します。

ページができあがったら、保存してそのまま有効化します。有効化で「アプリケーション、レコードタイプ、およびプロファイルに割り当て」タブをクリックし、割り当ての設定を進めます。

前回「理論編」で編集アクションについて以下のとおり説明しました。

今回は予めSkyVisualEditorで作成済みの「職歴・学歴情報編集ページ」をアクションで呼び出す方法を例に説明します。

オブジェクトマネージャで該当のオブジェクトを選択し、「ボタン、リンク、およびアクション」を選択します。
「新規アクション」で、アクション種別「カスタム Visualforce」を選択すると、SkyVisualEditorで作成した画面をアクションとして呼び出すことができます。
高さ、表示ラベル、名前は必須ですので、適切なものを設定してください。
（「高さ」にはデフォルトで "250 ピクセル" が入力されますが、この "ピクセル" を残したままだと高さ指定が効かなくなりますので、数字のみ入力するようにしてください。）

アクションの作成が終わったら、標準ページレイアウトに配置してLEXのレコードページで表示されるようにします。
ページレイアウト編集画面の「Salesforce モバイルおよび Lightning Experience のアクション」に先程作成したアクションを配置します。
SkyVisualEditorを利用しないユーザのプロファイル用にはこのアクションを配置しない別のページレイアウトを準備して、Salesforce標準のページレイアウト割り当てで制御してください。

LEXでの実装方法で「苦肉の策」として説明済みの設定です。
リストビューで編集リンクをクリックした際に表示されるアクションはどうしても標準ページレイアウトになってしまいます。そのため、レコードページへ遷移するカスタムリンクを標準ページレイアウトに配置して詳細画面から編集してもらうような動線を作る等の工夫をしてみましょう。

以上で大まかではありますが設定は完了です。
個々の細かい操作方法は説明していませんので、SalesforceのヘルプやTrailheadも参考にして作業を進めてみてください。

なお、今回はClassicからLEXへの移行ということで、サンプル画面は「LEXらしさ」を盛り込んでClassicより高機能な画面を実装してみました。

「カスタムLightningコンポーネント」はスクラッチではなくSuPICEで開発しています。
この開発手法について、2018年2月8日開催の『AppExchange EXPO Spring 2018 TOKYO』で紹介します。
詳しく知りたい方・ご興味を持たれた方は是非テラスカイのSuPICEセッションにご参加ください！