2022.04.12
SkyVisualEditorで作成した画面をSalesforceのレコードタイプで出し分けるTips
ポスト
目次
みなさんこんにちは。
4月は期の切り替わりを迎える会社も多く、これに伴いSalesforceの設定を見直す管理者も多いのではないでしょうか。そんな見直す設定の1つにレコードタイプもあると思います。
SkyVisualEditor（以後、SVE）には、「ページ割り当てテンプレート」というレコードタイプとプロファイルの組み合わせで、表示したい画面を設定できる機能があります。
ただ、残念なことにこの機能はClassicに特化したものであるため、Lightning Experienceでは使うことができません。
過去のBlog「SkyVisualEditorのページ割り当てをLightning Experienceで実現するためのベストプラクティス（理論編）」でも代替策は提示しておりましたが、レコードの新規作成はSalesforce標準機能を使う方法でした。
そこで今回は、「ページ割り当てテンプレート」のように、新規作成でもSVEで作成した画面が扱えるテクニックをご紹介します。
ページ割り当てテンプレートとは
ページ割り当てテンプレートをご存じない方もいらっしゃると思いますので、簡単にどのようなものなのか説明します。
Salesforceでは、レコードタイプごとに表示するページレイアウトを指定できます。このとき、どのプロファイルでどの画面を表示させるのかを指定しますが、指定できる画面はSalesforce標準のページレイアウトのみです。
「ページ割り当てテンプレート」では、どの画面を表示させるのかを設定するところはSalesforceと同じですが、指定できる画面はVisualforceとなります。Visualforceの画面を表示させたくない場合は、Salesforce標準レイアウトも指定できます。
指定対象はVisualforceなので、SVEで作成した画面はもちろん、個別で開発したVisualforceの画面も指定できます。
ページ割り当てテンプレートの動作イメージ
完成イメージ
これから実際に画面を作成していきますが、どのような画面ができるのか、先に紹介します。
レコードタイプは画面レイアウトだけでなく、選択リストの値も変更できます。以下の画面では、「取引１」と「取引２」というレコードタイプを用意し、それぞれ異なる選択リスト値を設定しているため、異なる値が表示されているのがご確認いただけます。
今回はこのような動きが実現できる画面サンプルの紹介です。
完成イメージ
設定手順
今回の設定ですが、SVEのページスクリプトにJavaScriptを記載することで実現します。SVEで扱うJavaScriptについては、「SkyVisualEditorでJavaScriptを活用する！」シリーズのBlogで解説しております。こちらも見ていただくと、より理解が深まると思います。
必要な手順についてですが、取引先オブジェクトを例にして下記の流れでご紹介します。
- レコードタイプ名とプロファイル名を確認する
- レコードタイプとプロファイル別の画面を用意する
- SVEでレコードタイプを選択する画面を作成する
- リストボタンを作成する
レコードタイプ名とプロファイル名を確認する
まず、Salesforceの設定画面で、対応するレコードタイプ名とプロファイル名を確認します。
レコードタイプ名は、Salesforceのオブジェクトマネージャを開き、「取引先」オブジェクトを選択します。
左のメニューから「レコードタイプ」を選択し、下記の画面が表示されたら「レコードタイプの表示ラベル」を確認します。このラベル名は後程使いますので、メモしてください。今回は例として「取引１」と「取引２」を使います。
オブジェクトマネージャ（取引先）の画面
次にプロファイル名を確認します。プロファイル名は、設定のクイック検索で”プロファイル”と入力し、表示された「プロファイル」を選択してください。
ここに表示されているプロファイル名も後程使いますので、メモしてください。今回は例として「システム管理者」と「営業部」を使います。
※ 組織のデフォルト言語設定が「日本語」になっていない場合、プロファイル名が日本語でもJavaScriptの設定では日本語名として扱えないのでご注意ください。
参考：組織のデフォルト言語設定と $Profile.Name の値の関係について
プロファイルの画面
レコードタイプとプロファイル別の画面を用意する
SVEのStudioを開き、レコードタイプとプロファイル別で出し分ける画面を作成します。
今回は取引先を例にしています。Salesforceレイアウトか自由レイアウトを選び、主オブジェクトは取引先を選択してください。
ここで設定いただきたいのは１つで、URLパラメータ設定でレコードタイプIDを受け取れるようにすることです。
配置する項目やレイアウトについては、特に制限はありません。
URLパラメータ設定は、ページプロパティから「URLパラメータ設定」の設定ボタンを押し、下記の様に設定します。
- 項目名 ： レコードタイプID
- パラメータキー ： RecordTypeId
URLパラメータ設定の画面
SVEでレコードタイプを選択する画面を作成する
今度はレコードタイプを選択する画面を用意します。
新規作成からSalesforceレイアウトを選び、主オブジェクトは取引先を選択します。画面には、下記の様に入力項目から「レコードタイプID」、コンポーネントから「カスタムボタン」を配置します。
「レコードタイプID」のラベルと「カスタムボタン」の値はお好みに応じて変更してください。下記の例では、「レコードタイプID」は”レコードタイプ”、「カスタムボタン」は”レコードの作成”に変更しております。
また、ページブロックも2列から1列に変更し、タイトルも”レコードタイプの選択”に変更しておりますが、こちらもお好みに合わせて変更をお願いします。
レコードタイプIDとカスタムボタンを配置した画面
続いて、ページスクリプトにJavaScriptで選択されたレコードタイプやログイン中のプロファイルに応じ、表示する画面を出し分ける処理を記述します。
ページスクリプトは、Studioの右にあるページプロパティのタブを開き、「ページスクリプト編集」からページスクリプトエディタを開きます。
ページスクリプトエディタを開いた画面
ページスクリプトエディタには、下記のコードを記述します。
ご利用の環境により、以下の部分は適宜変更をおお願いします。
- Component4 ： レコードタイプIDの入力項目のコンポーネントID
- 取引１ ： 画面を出し分けたいレコードタイプ名
- 取引２ ： 画面を出し分けたいレコードタイプ名
- システム管理者 ： 画面を出し分けたいプロファイル名
- 営業部 ： 画面を出し分けたいプロファイル名
- AccRT1 ： 取引１のレコードタイプ名でシステム管理者の場合に表示するVisualforceページ名
- AccRT2 ： 取引２のレコードタイプ名で表示するVisualforceページ名
- AccRT3 ： 取引１のレコードタイプ名で営業部の場合に表示するVisualforceページ名
- AccRT4 ： 取引１のレコードタイプ名でシステム管理者と営業部以外のユーザに表示するVisualforceページ名
function newOpen () {
// Component4はレコードタイプIDの入力項目のコンポーネントID
var rtName = jQuery('[id$=Component4] option:selected').text(); // 選択されたレコードタイプ名
var rtId = jQuery('[id$=Component4]').val(); // 選択されたレコードタイプのID
var vfName = ''; // 表示させたいVisualforceの画面名
// 選択されたレコードタイプが「取引１」の場合
if (rtName === '取引１') {
// ログイン中のプロファイルが「システム管理者」の場合
if ('{!$Profile.Name}' === 'システム管理者') {
vfName = 'AccRT1';
// カスタムプロファイル「営業部」の場合
} else if ('{!$Profile.Name}' === '営業部') {
vfName = 'AccRT2';
// その他プロファイルの場合
} else {
vfName = 'AccRT3';
}
// 選択されたレコードタイプが「取引２」の場合
} else if (rtName === '取引２') {
vfName = 'AccRT2';
}
// vfName が設定されている場合は該当するVisualforceを表示し、設定されていない場合は標準の新規画面を表示
if (vfName.length > 0) {
window.open('/apex/' + vfName + '?RecordTypeId=' + rtId, '_self');
} else {
window.open('/lightning/o/Account/new?nooverride=1', '_self');
}
}ページスクリプトで記述した処理は、カスタムボタンをクリックしたときに呼び出すようにします。
カスタムボタンのコンポーネントプロパティを表示し、「動作選択」に”JavaScript/Apex呼出”を設定し、「OnClick」の”…”をクリックし、JavaScriptエディタの関数名から「newOpen();」を選択して挿入します。
カスタムボタンの設定画面
ここまでできましたら、画面を保存してSalesforceにデプロイします。
デザインをLightningExperienceに近い形にしたい場合は、ページタブにあるLEXデザインを有効化してからデプロイをお願いします。
リストボタンを作成する
最後に、レコードタイプを選択する画面を表示するためのリストボタンを作成します。新規アクションを変更することもできますが、今回は新たにリストボタンを作成する方法を紹介します。
Salesforceのオブジェクトマネージャを開き、「取引先」オブジェクトを選択します。
左のメニューから「ボタン、リンク、およびアクション」を選択し、「新規ボタンまたはリンク」を押し、下記の画面を表示します。
各プロパティの設定例を以下に記載します。記載できましたら、保存します。
- 表示ラベル ： SVE新規
- 名前 ： SVENew
- 表示の種類 ： リストボタン
- 動作 ： 現在のウィンドウにサイドバー付きで表示
- 内容のソース ： URL
- 構文 ： /apex/AccRTSelector
※ 構文の「AccRTSelector」は、先ほど作成したレコードタイプを選択する画面名を指定してください。
リストボタンの作成画面
次に、左のメニューから「Salesforce Classic の検索レイアウト」を選択し、リストビューの「▼」を押し編集を選択し、下記の画面を表示します。
カスタムボタンのセクションで、先ほど作成したリストボタンを追加し、保存します。
設定は以上となります。
取引先のリストビューのリストボタンをクリックしますと、冒頭で紹介した画面の動きがご確認いただけると思います。
リストボタンをリストビューに追加
さいごに
今回のTipsはいかがでしたか。
LightningExperienceでレコードタイプを利用しているSVEユーザの方に役立つ内容だと思います。同様の課題に直面している場合は一度お試しください。
もし、うまくできない、もう少し詳しい説明を聞きたいなどがありましたら、アドミンカフェでもフォローはできると思いますので、是非、ご利用ください。
今後も、SkyVisualEditorをよろしくお願いいたします！
株式会社テラスカイ | クラウドのリーディングカンパニー
