2018.02.05

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly
2015年8月に発表されてから早2年半が経過したLightning Experience(LEX)は年3回のリリースの度に進化を遂げており、新機能並びにパフォーマンスにおいてみなさん「そろそろ本気でつかってみたい」段階に来ていると思います。
SkyVisualEditorもLEX環境下での利用を検討されているお客様が増えてきて、私が担当しているアドミンカフェでもご相談を受けることが多くなってきました。
その中で、SkyVisualEditorの「ページ割り当てテンプレート」がLEXでサポート対象外のためLEXに移行できないという課題が出てきましたので、今回は同様の機能をLEXで実現する方法を理論編・実装編の2本立てで紹介したいと思います。

SkyVisualEditorの「ページ割り当てテンプレート」とは

プロファイルとレコードタイプごとに表示するページレイアウトを制御できる機能として、Salesforce標準のページ割り当てがありますが、こちらではVisualforceページを含めた割り当てを設定することができません。
一方、SkyVisualEditorの「ページ割り当てテンプレート」では、Visualforceページを含めた割り当てが設定できます。
そのため、レコードタイプごとに異なるVisualforceページを表示したり、SkyVisualEditorを利用しないユーザ(ライセンスを割り当ててないユーザ)が属するプロファイルの場合はSkyVisualEditor画面の代わりに標準のページレイアウトを表示させたりといったことが可能です。

Salesforce Classic UIにおける「ページ割り当てテンプレート」利用方法

SkyVisualEditor Studioの「ページ割り当てテンプレート」で割り当てを設定しデプロイすると、接続先のSalesforce組織にVisualforceページが生成されます。そのVisualforceで各オブジェクトの新規/編集/参照アクションを上書きすることにより、ボタンやリンクをクリックした時に標準同様のページ割り当てが機能するようになります。
こちらの機能はClassicでの利用が前提になっていて、残念ながらLEXではLightningプラットフォームの仕様上利用することができません。

LEXはそもそもClassicと画面構成が違うことを理解する

Classicではページレイアウトに対してページ割り当てを行うことで画面のロールアウトを完結していましたが、LEXではページレイアウトのページ割り当てに加え、ページレイアウトの外側にあるレコードページでもアプリケーション/プロファイル/レコードタイプごとにロールアウトを行うことが可能です。
レコードページ内に表示されるアクション・詳細ページ・関連リスト等はページレイアウトに依存するため少しわかりにくい構造になっていますが、この2段階の割り当て機能を理解して上手く利用することが肝心です。

LEXでページレイアウト割り当てと同等の機能を実現する方法

LEXでは、Classicで利用可能だった「ページ割り当てテンプレート」の「新規/編集/参照アクションの上書き」方法が利用できませんので、別の方法を検討する必要があります。そこでまず、LEXの仕様をおさらいしてみます。
  1. LEXでは、レコードページをアプリケーション/プロファイル/レコードタイプごとにロールアウトが可能
  2. LEXでは、VisualforceページをLightningアプリケーションビルダー内でコンポーネントとして配置可能
  3. LEXでは、新規作成や編集はアクションから呼び出すモーダル画面での実行が標準。カスタムアクションの設定も可能
  4. LEXでは、各レコードページに表示されるアクションは標準ページレイアウトとページ割り当てに依存する
上記の仕様を、Classicで実装していたページ割り当て方法に当てはめて、移行を検討します。
Classic LEX
ページ割り当てテンプレート画面で参照アクションを上書き
  • 上書き設定は解除する
  • プロファイル/レコードタイプ分のレコードページをLightningアプリケーションビルダーで作成して割り当て
  • 各レコードページ内に参照用の画面をVisualforceコンポーネントで配置(標準ページレイアウトを表示させる場合は「レコードの詳細」コンポーネントを使用する)
ページ割り当てテンプレート画面で新規/編集アクションを上書き
  • 上書き設定は解除する
  • 新規作成や編集用に、必要最低限の項目を編集できるようなカスタムアクションを設定し、標準ページレイアウトに配置
  • レコードページに表示されるアクションは標準ページレイアウトに依存するため、標準ページレイアウトもアクションの表示制御をする必要のあるプロファイル/レコードタイプ分すべて作成し、標準のページ割り当てを設定する。
  • リストビューで編集リンクをクリックした際に表示されるアクションは標準ページレイアウトになるため、レコードページへ遷移するカスタムリンクを配置して詳細画面から編集してもらうような動線をつくる(苦肉の策)
※新規および編集用のカスタムアクションはSalesforce標準のアクション以外にもVisualforceやLightningコンポーネントを呼び出して実装することができます。ただし、現時点(執筆時はWinter '18)では横幅の指定ができず、約600pxより大きい画面を呼び出した場合横スクロールが発生してユーザビリティが低下します。
そこで、項目を幅600pxの画面に収まる程度の数でカテゴライズし、カテゴリごとにアクションで編集するといった方法がスマートです。

Classicとの併用

LEXとClassicはユーザがスイッチャーを使って自由に切り替えられるため、Classicとの併用も考慮する必要があるかもしれません。
ただ、リストビューの新規ボタンや編集リンクをどうするのかといったところまで考えると、ずっと併用し続けるのは難しいと思います。
スイッチャーはプロファイルでOFFにすることもできますので、一定の移行期間を持って完全LEX移行をすることも検討してください。
ひとまず、レコード詳細画面の併用方法について、以下に一つの案を提案します。
Visualforceページを表示するための方法として、アクション上書き以外にカスタムボタン/リンクによる呼び出しがありますが、標準ページレイアウトにVisualforceを埋め込む機能をご存知でしょうか?
この機能を利用すると、参照画面は標準のページレイアウト割り当てでSkyVisualEditor画面の表示/非表示設定ができるようになります。
(ただし、この場合はLEXのレコードページでVisualforceコンポーネントと「レコードの詳細」コンポーネントを併用するとおかしなことになってしまいますのでご注意ください。)
新規/編集画面は上記の埋め込み方法が使えないため、カスタムボタンで呼び出す等の工夫が必要です。

いざ、LEX移行!

今回は理論編ということで、字面ばかりでイメージがつかみにくかったかと思います。
次回「実装編」では、今回の内容を踏まえた詳しい移行方法をお届けします。

SkyVisualEditorアドミンカフェのご案内

弊社エンジニアのアドバイスを受けながら、SkyVisualEditorで画面開発しませんか? アドミンカフェは静かな環境で集中して作業できる自習形式のイベントです
22 件

関連する記事