2022.12.05
SkyVisualEditor LCで参照先の値を自動設定させる方法
ポスト
目次
みなさんこんにちは。
SkyVisualEditor VF（以後、VF）は、Salesforceの標準では実現できない画面を作れるツールで、人気機能の１つにルックアップ があります。
VFのルックアップは、選択した参照先のレコードの値を自動で入力項目に設定させる機能で、例えば日報を書くときにその日の商談の情報を取得して保存させたい場合などに有効です。似た機能をSalesforceの標準で実現する場合、クロスオブジェクト数式が考えられますが、この場合は参照先の値が変わると数式の値も変わるので、スナップショットを保存するような使い方ができません。
SkyVisualEditor LC（以後、LC）もVF同様にSalesforceの画面を作るツールなのですが、LCにはこのルックアップで値を取得する機能がまだありません。VFのルックアップはClassicと同じ見た目なのに対し、LCはLightningコンポーネントなので、ルックアップの見た目もSalesforceのLightning Experienceと同じです。そのため、LCのルックアップを使いたいものの、VFのルックアップの機能が優秀なのでVFを選択されているとよく聞きます。そこで今回は、LCの拡張機能を利用してVFと同じようなルックアップの機能を実現する方法をご紹介します。
LCで作成するルックアップの完成イメージ
LCで実現したルックアップの動き
左に商談の一覧、右に活動報告の画面を配置しており、活動報告は下記の流れで動作しています。
1. 活動報告にある商談の参照項目を設定
2. 「商談情報の設定」ボタンを押下
3. 「商談フェーズ」にフェーズのテキスト、「活動報告」に商談名と説明が反映される
赤と青で囲んだ場所がそれぞれ対応して設定されていますね。
この後、サンプルコードと共に実現方法を説明します。
LCの拡張機能について
今回はLCの拡張機能である Apexコントローラー と カスタムボタンの「onClick」 を使って実現しています。
これらについて、簡単に説明します。
Apexコントローラー
LCで画面を作成すると自動でApexコントローラーが設定されるのですが、独自のApexコントローラーも用意できます。そのため、ボタン押下時にApexメソッドを実行させ、任意のレコードの値を取得するなど独自のロジックを組み込むことができます。
このApexコントローラーはあらかじめSalesforceの組織に用意しておく必要があり、LCのStudioではこのApexコントローラーを選択するだけで利用できます。
カスタムボタンの「onClick」
カスタムボタンには「onClick」のプロパティがあり、イベント編集画面を開いて直接コードを記述します。
ここに記述したコードはボタンクリック時に実行されます。
Studioではいくつかのサンプルスクリプトがあり、今回は ApexClass呼び出し のサンプルを基に処理を記述します。
設定手順
カスタムオブジェクトの準備
まず、活動報告を保存するカスタムオブジェクト（日報）を用意します。項目は下記を含めて作成してください。
| 項目の表示ラベル | 項目名 | データ型 |
|---|---|---|
| 商談 | Opportunity__c | 参照関係（商談） |
| 商談フェーズ | OppoStatus__c | テキスト（255） |
| 活動報告 | Comment__c | ロングテキストエリア(32768) |
参照先のデータの取得
次に商談のレコードを取得するApexコントローラーを用意します。
今回はSalesforce組織の開発者コンソールで作成してみます。
開発者コンソールを立ち上げ、「File」→「New」→「Apex Class」を開きます。
クラス名は LC_DailyReport としてください。
中身はとてもシンプルで、2つのメソッドを用意するだけです。
1つはLCで必要となるactionメソッドで、これは決まった書き方がユーザガイドで紹介してありますので、このまま転記します。
もう1つは、引数で指定された商談のレコードIDの値を取得するメソッドです。
内容はシンプルにId, Name, StageName, Descriptionの4つの値を取得するだけです。
コードは下記を張り付け、「File」→「Save」を押して保存してください。
global class LC_DailyReport {
@AuraEnabled
global static Object action(String data) {
return SUPICE.SuPICE.action(data);
}
@AuraEnabled
public static Opportunity getOpportunity(String Id) {
return [SELECT Id, Name, StageName, Description FROM Opportunity WHERE Id = :Id];
}
}ボタンクリック時に値を入力項目に設定
最後はLCのStudioで画面を作成します。
下記設定で 新規コンポーネント作成 を行ってください。
| コンポーネント名 | フォーム選択 | オブジェクト |
|---|---|---|
| LC_DailyReport | レコード | 日報 |
新規コンポーネント作成
Studioでは、入力項目、カスタムボタン、保存ボタンを下記の様に配置します。
入力項目や各ボタンですが、パネルグリッドで整理して配置していますのでお好みでパネルグリッドをご利用ください。
カスタムボタンはアイコンを配置し、ラベルを 相談情報の設定 と書き換えていますが、こちらもお好みで設定してください。
LCのStudio
レイアウトを作成した後、Apexコントローラーの設定を行います。
「コンポーネント設定」→「高度な設定」→「Apexコントローラー」を表示し、コンポーネントで使用するApexコントローラーを変更する にチェックを入れ、Apexコントローラーには先ほど作成した LC_DailyReport を指定します。設定ができましたら、OK を押します。
Apexコントローラーの設定
Apexコントローラーの設定ができましたら、カスタムボタンのOnClickの設定を行います。
Studioで配置したカスタムボタンを選択し、プロパティにある OnClick の鉛筆マークをクリックしてイベント編集画面を開きます。
コードを書く際は、「サンプルコード挿入」→「ApexClass呼び出し」を表示し、先ほど設定したApexコントローラーから呼び出すメソッドを選択します。
イベント編集
今回は下記サンプルコードを張り付けていただき、コンポーネントIDの部分を作成した画面に合わせて書き換えをお願いします。
コンポーネントIDの確認方法は、サンプルコードの下の画像をご覧ください。
// ApexClass呼び出し public static Opportunity getOpportunity(String Id)
var action1 = cmp.get("c.getOpportunity");
var Id = cmp.find("InputField_268").get("v.value"); // 「InputField_268」は参照項目のIDで、参照先のレコードIDを取得する
action1.setParams({
"Id": Id
});
action1.setCallback(this, function(response) {
var state1 = response.getState();
if (state1 === "SUCCESS") {
var retVal = response.getReturnValue();
// ApexClass呼び出しSUCCESS時の処理をここに書いてください
cmp.find("InputField_286").set("v.value", retVal.StageName);
cmp.find("InputField_1373").set("v.value", retVal.Name + (retVal.Description == null ? "" : "\n\n" + retVal.Description));
} else if (state1 === "INCOMPLETE") {
// ApexClass呼び出しINCOMPLETE時の処理をここに書いてください
} else if (state1 === "ERROR") {
// ApexClass呼び出しERROR時の処理をここに書いてください
var errors1 = response.getError();
if (errors1) {
if (errors1[0] && errors1[0].message) {
console.log("Error message: " + errors1[0].message);
}
} else {
console.log("Unknown error");
}
}
});
$A.enqueueAction(action1);
サンプルコードに記載しているコンポーネントID
イベント編集でコードが書けましたら、OK を押してイベント編集を閉じ、最後に保存とデプロイを行って完了です。
Salesforceに画面を出すには、アプリケーションビルダーでデプロイしたコンポーネントを配置してください。
さいごに
今回のTipsはいかがでしたか。
VFで便利な機能もLCの拡張機能を活用することで実現できるものがあります。今回はご紹介していませんが、スタイルも書くことができますので、見た目の調整も細かいことが色々できます。
もし、うまくできない、もう少し詳しい説明を聞きたいなどがありましたら、アドミンカフェでもフォローはできますので、是非、ご利用ください。
TerraSkyBaseでは、弊社製品だけでなくSalesforceを活用する上で役に立つ情報を発信しております。最新情報をメールでお知らせしておりますので、この機会に登録いただけますと幸いです。
