2018.02.27

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly
前回「理論編」にて、SkyVisualEditorのページ割り当て機能を如何にLightning Experience(LEX)へ落とし込んで移行するかを考察しました。
今回は実際に移行するための実装手順を紹介したいと思います。

想定シナリオ

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

アプリケーション要件概要

  • 人材派遣業で、Salesforceで人材情報を管理している
  • 人材情報には3つのレコードタイプがある(仮登録/本登録/登録抹消)
  • 仮登録レコードタイプは必要な項目数が少ないため、標準ページレイアウトを使用している
  • 本登録レコードタイプは多くの項目を1画面でコンパクトに表示したいため、SkyVisualEditor画面を使用している
  • 登録抹消レコードタイプは編集ができないように参照専用のSkyVisualEditor画面を使用している
  • 役員プロファイルユーザは原則レポートで確認するため、SkyVisualEditorのライセンスを割り当てていない

Classicでの実装方法

  • SkyVisualEditorのSalesforceレイアウトで本登録レコードタイプ編集用に1画面作成
  • SkyVisualEditorのSalesforceレイアウトで本登録レコードタイプ参照用と登録抹消レコードタイプ編集/参照用に1画面作成
  • SkyVisualEditorのページ割り当てテンプレートで新規/編集用と参照用に2画面作成
  • ページ割り当てテンプレートで作成した画面で人材情報オブジェクトの新規/編集/参照リンクの上書きを設定

LEXへの移行

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

LEXでの実装方法

  • プロファイル/レコードタイプ分のレコードページをLightningアプリケーションビルダーで作成して割り当て
  • 各レコードページ内に参照用の画面をVisualforceコンポーネントで配置(標準ページレイアウトを表示させる場合は「レコードの詳細」コンポーネントを使用する)
  • 新規作成や編集用に、必要最低限の項目を編集できるようなカスタムアクションを設定し、標準ページレイアウトに配置
  • レコードページに表示されるアクションは標準ページレイアウトに依存するため、標準ページレイアウトもアクションの表示制御をする必要のあるプロファイル/レコードタイプ分すべて作成し、標準のページ割り当てを設定する。
  • リストビューで編集リンクをクリックした際に表示されるアクションは標準ページレイアウトになるため、レコードページへ遷移するカスタムリンクを配置して詳細画面から編集してもらうような動線をつくる(苦肉の策)

予め準備しておくもの

Classicで使用していたSkyVisualEditor画面はそのままLEXに流用可能ですが、LEX用として以下修正を加えたものを用意してください。
  • 参照用のSkyVisualEditor画面からボタンを削除
  • デプロイ後の上記ページの「Lightning Experience、Lightning コミュニティ、およびモバイルアプリケーションで利用可能」をONにする(設定箇所は下図参照)

本登録レコードタイプ用のレコードページを作成する

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

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

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

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

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

編集用アクションを作成する

前回「理論編」で編集アクションについて以下のとおり説明しました。
新規および編集用のカスタムアクションはSalesforce標準のアクション以外にもVisualforceやLightningコンポーネントを呼び出して実装することができます。ただし、現時点(執筆時はWinter '18)では横幅の指定ができず、約600pxより大きい画面を呼び出した場合横スクロールが発生してユーザビリティが低下します。
そこで、項目を幅600pxの画面に収まる程度の数でカテゴライズし、カテゴリごとにアクションで編集するといった方法がスマートです。
今回は予め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セッションにご参加ください!
46 件

関連する記事