SkyVisualEditorによる「Lightningコンポーネント」連携の活用

皆さんこんにちは。先日、2回目のSkyVisualEditorユーザー会を開催させていただき、その中でLightningコンポーネントのイベント連携を利用したデモを実施いたしました。当日はどのように動作するのかを動画でお見せしたのみでしたので、本ブログではそのデモ画面をどのように作成したのかを紹介します。

実現したい機能

今回実装する内容は、下記のような人事評価業務を想定した画面となります。

　1. 従業員を検索し、従業員の詳細を表示させて人事評価が行える
　2. 人事評価が未実施の場合は、従業員に関連させた人事評価のレコードが作成できる
　3. 人事評価が行われている場合は、入力済みの人事評価の詳細を表示して編集ができるようにする
　4. 過去に評価された内容もサマリーが一覧で見られるようにする

完成しますと、以下のような画面となります。

この3つのコンポーネントの役割を簡単に説明します。
左のコンポーネント（従業員検索画面）
検索条件を指定し、従業員が検索できます。検索結果には簡単な情報のみ載せています。

真ん中のコンポーネント（従業員詳細画面）
検索で詳細表示を押された従業員の詳細情報を表示します。既に人事評価が実施されていれば、データテーブルに評価内容のサマリーを表示します。

右のコンポーネント（人事評価編集画面）
検索で詳細表示を押された従業員の人事評価を入力します。保存を行うと、従業員詳細情報表示の人事評価データテーブルに保存したレコードが表示されます。

実装手順

このブログでは、2つのカスタムオブジェクト、3つのLightningコンポーネントを作成するため、下記の流れで機能を実装していきます。

　1. Salesforceでカスタムオブジェクト（従業員、人事評価）を作成する
　2. SkyVisualEditorで従業員検索画面を作成する
　3. SkyVisualEditorで従業員詳細画面を作成する
　4. SkyVisualEditorで人事評価編集画面を作成する
　5. Lightningアプリケーションビルダーでアプリケーション画面を作成する

手順2～4で作る各コンポーネントは独立した画面ですので、個々に独立させて利用することもできます。
しかし、各コンポーネントをイベントで連携することにより、画面遷移を伴わずに複数オブジェクトの情報表示や編集が行える画面を作ることができます。

実装方法

1. Salesforceでカスタムオブジェクト（従業員、人事評価）を作成する

Salesforceのオブジェクトマネージャを起動し、下記の内容でカスタムオブジェクトを2つ作成します。
カスタムオブジェクトやカスタム項目の設定値は、ご利用の環境に合わせて適宜変更してください。

カスタムオブジェクト情報（従業員）

項名	値
表示ラベル	従業員
オブジェクト名	Employee
レコード名	従業員番号
データ型	自動採番
表示形式	{00000000}

カスタム項目情報（従業員）

項目の表示ラベル	項目名	データ型
住所	Address	テキストエリア(255)
氏名	Name	テキスト(255)
生年月日	Birthday	日付
年齢	Age	数式 (数値)　`※1`
性別	Gender	選択リスト　`※2`
保有資格	License	テキストエリア(255)
部署	Division	テキスト(100)
役職	Position	選択リスト　`※2`

※1　年齢の数式は、生年月日を基に計算しますので、下記の数式を設定します。
　(TODAY() - Birthday__c) / 365

※2　選択リストの値は、任意の値を設定してください。

カスタムオブジェクト情報（人事評価）

項名	値
表示ラベル	人事評価
オブジェクト名	PersonalEvalution
レコード名	人事評価番号
データ型	自動採番
表示形式	PE-{YYYY}{MM}{000000}

カスタム項目情報（人事評価）

項目の表示ラベル	項目名	データ型
従業員	Employee	主従関係(従業員)
評価日	EvaluationDate	日付
積極性	ScoreAggressiveness	数値(2, 0)
責任性	ScoreResponsibility	数値(2, 0)
規律性	ScoreDiscipline	数値(2, 0)
強調性	ScoreCooperativeness	数値(2, 0)
遂行力	ScorePerformance	数値(2, 0)
評価値	ScoreTotal	数式 (数値)　`※1`
上司コメント	Comment1	ロングテキストエリア(32768)
人事コメント	Comment2	ロングテキストエリア(32768)

※1　評価値の数式は、積極性、責任性、規律性、協調性、遂行力の合計値なので、下記の数式を設定します。
　ScoreDiscipline__c + ScoreCooperativeness__c + ScorePerformance__c + ScoreAggressiveness__c + ScoreResponsibility__c

2. SkyVisualEditorで従業員検索画面を作成する

従業員の検索画面では、検索結果にカスタムボタンを表示させ、このボタンをクリックすると従業員の詳細を表示し、人事評価が新規登録できるようにします。

1.　SkyVisualEditorのStudioにログインする
2.　[ファイル > 新規] を選択し、レイアウトマネージャで "[テンプレート]検索画面" を選択
3.　下記内容を設定して "OK" を押す

項名	値
オブジェクト	従業員:Employee__c
Visualforceページ名	SVE_EmployeeSearch

引き続き、ウィザードでの設定を行います。

1.　検索条件項目では、「氏名」と「部署」が選択済になるように設定し、「OK]を押す
2.　検索条件項目設定では、「氏名」と「部署」はどちらもデフォルト演算子に「次の文字列を含む」を設定
3.　演算子表示のチェックを外し、[次へ]をクリック（下記画像参照）

4.　オブジェクトテーブル設定では、その他にある「検索条件保存・読込ボタン表示」のチェックを外し、[次へ]をクリック

5.　検索結果項目は、下記の順番で項目を選択し、[完了]をクリック

カスタムボタン
部署（参照項目）
従業員番号（参照項目）
氏名（参照項目）

完了をクリックした後、キャンバスには下記画像のようなレイアウトが表示されます。

カスタムボタンのプロパティを編集します。
1.　「カスタム」と書かれたカスタムボタンをクリックし、コンポーネントプロパティを表示し、下記の設定を行う

値	詳細表示
動作選択	Javascript/Apex呼び出し
OnClick	下記のスクリプトを記述

SkyEditor.Lightning.componentControl(
  'SVE_Employee',
  'reload',
  {
    'id':'{!Component3_item.record.Id}'
  }
);
SkyEditor.Lightning.componentControl(
  'SVE_PersonalEvalution',
  'reload',
  {
    'Employee__c':'{!Component3_item.record.Id}',
    'EmployeeName__c':'{!Component3_item.record.Name__c}'
  }
);

OnClickサンプル

このコードは、カスタムボタンをクリックした際、この後で作成するLightningコンポーネントにイベントで値を渡す処理を行っています。
「SkyEditor.Lightning.componentControl」がイベントを発火する関数で、

第1パラメータ：イベントを渡す先のコンポーネント名
第2パラメータ：イベントを渡した後のコンポーネントの動作
第3パラメータ：イベントで渡す値

となっています。
コード内の「Component3」と書かれた部分は、検索結果のデータテーブルのIDとなりますので、このIDが異なる場合はご利用いただいている環境に合わせて修正をお願いいたします。

編集後のコンポーネントプロパティは以下のようになります。

ページプロパティで「LEXデザイン」の「有効化」と、「Lightning Component」の「Lighningコンポーネントを出力する」にチェックを入れてデプロイしましたら、従業員検索のLightningコンポーネントは完成です。

3. SkyVisualEditorで従業員詳細画面を作成する

従業員の詳細画面では従業員の情報を表示し、その従業員の人事評価をデータテーブルに表示します。
データテーブルにはレコード毎にカスタムボタンを配置し、このボタンをクリックすると人事評価の編集が行えるようにします。

1.　「ファイル」の「新規」を選択し、レイアウトマネージャで "Salesforceレイアウト" を選択し、下記内容を設定して [OK] をクリック

項名	値
オブジェクト	従業員:Employee__c
Visualforceページ名	SVE_Employee

2.　ページブロックを選択し、コンポーネントプロパティを以下のように設定

タイトル	従業員番号：{!record.Name}
ボタン表示領域	非表示

3.　ページブロックセクションを削除し、削除した場所にパネルグリッドを5行 X 4列で配置 4.　パネルグリッドには、下記の参照項目と対応するラベルを配置

氏名
性別
部署
役職
生年月日
年齢
住所
保有資格

4.　既存のページブロックの下にページブロックを配置し、コンポーネントプロパティを以下のように設定

タイトル	人事評価
ボタン表示領域	非表示

5.　このページブロック内にデータテーブルを以下の設定で配置

主オブジェクトの関連	関連する
オブジェクト	人事評価
列数	4
行追加ボタン	チェックしない
行削除ボタン	チェックしない
行コピーボタン	チェックしない
一括編集	チェックしない
一括削除	チェックしない
ページング	チェックする（ページ表示件数は5）
テーブル内検索	チェックしない

6.　データテーブルのセルに、左から以下の順番で項目を配置します。

カスタムボタン（コンポーネントペインからドラッグ＆ドロップ）
人事評価番号（関連オブジェクト（人事評価）の表示項目）
評価日（関連オブジェクト（人事評価）の表示項目）
評価値（関連オブジェクト（人事評価）の表示項目）

※ 配置する項目の特性に合わせ、一部セルを結合している箇所があります。以下に配置後のイメージを載せますので、項目の配置場所と合わせてご参考ください。

項目を配置しやすくするため、パネルグリッドは線が書かれたままにしていますが、項目を配置した後は線を削除してください。

カスタムボタンのプロパティを編集します。

1.　「カスタム」と書かれたカスタムボタンをクリックし、コンポーネントプロパティを表示し、下記の設定を行う

値	編集
動作選択	Lightningコンポーネント連携

※ Lightningコンポーネント連携を選択すると、「Lightningコンポーネントを出力する」の有効化を問うダイアログが表示される場合がありますが、その場合は[はい]をクリックしてください。

2.　Lightningコンポーネント連携の「…」をクリックし、イベント連携先に”SVE_PersonalEvalution”を指定

3.　KeyとValueには、以下の値を設定

Key	Value
id	{!Component34_item.record.Id}
EmployeeName__c	{!record.Name__c}
EmployeeTotalScore	{!Component34_item.record.ScoreTotal__c}

※ 「Component34」と書かれている部分は、データテーブルのIDを指定してください。

先ほど同様に、ページプロパティで「LEXデザイン」の「有効化」と、「Lightning Component」の「Lighningコンポーネントを出力する」にチェックを入れてデプロイしましたら、従業員詳細のLightningコンポーネントは完成です。

4. SkyVisualEditorで人事評価編集画面を作成する

人事評価の編集画面では、検索の詳細を押された場合は従業員名を表示し、新規の人事評価レコードが登録できる状態となります。従業員詳細の人事評価一覧で編集を押されると、該当する人事評価の内容が編集できる状態となります。

1.　[ファイル > 新規] を選択し、レイアウトマネージャで "Salesforceレイアウト" を選択し、下記内容を設定して "OK" をクリック

項名	値
オブジェクト	人事評価:PersonalEvalution__c
Visualforceページ名	SVE_PersonalEvalution

2.　ページブロックを選択し、コンポーネントプロパティを以下のように設定

タイトル	{!$CurrentPage.parameters.EmployeeName__c}
ボタン表示領域	下のみ

※ 「$CurrentPage.parameters」にはイベントで送信されてきたデータが入っていますので、Keyを指定して値が取り出せます。

3.　ボタンの表示領域にカスタムボタンを1つ配置
4.　ページブロックセクションを削除し、削除した場所にパネルグリッドを8行 X 6列で配置
5.　パネルグリッドに下記の入力項目と表示項目、計算結果、対応するラベルを配置

人事評価番号（表示項目）
評価日（入力項目）
規律性（入力項目）
協調性（入力項目）
積極性（入力項目）
責任性（入力項目）
遂行力（入力項目）
評価値（計算結果）
上司コメント（入力項目）
人事コメント（入力項目）

※ 配置する項目の特性に合わせ、一部セルを結合している箇所があります。以下に配置後のイメージを載せますので、項目の配置場所と合わせてご参考ください。

こちらも先ほど同様、パネルグリッドの線は項目配置後に削除してください。また、各項目の縦や幅などは画面に合わせて調整してください。

引き続き、ページプロパティの設定です。まずは計算式です。
1.　ページプロパティにある「計算式」の「計算式の編集」をクリック
2.　「主オブジェクト計算式」の[追加]をクリック
3.　[編集]をクリックし、項目リストにある5項目を全て足す計算式を設定し[完了]をクリック
4.　「＝」の右のリストで計算結果のID（このブログではComponent94）を指定し、[OK]をクリック
計算式を設定しますと、下記のようになります。

主オブジェクト項目の追加取得とURLパラメータを設定し、イベントで送信された値が受け取れるようにします。
1.　「Apexクラス拡張」にある「主オブジェクト項目追加取得」をクリック
2.　表示されたダイアログで、[従業員]にチェックを入れて[閉じる]をクリック
3.　「URLパラメータ設定」の[設定]をクリックし、下記の設定を行い[OK]をクリック

項目名	パラメータキー
従業員	Employee__c

ここからは拡張機能による設定を行います。
1.　「Apexクラス拡張」にある「Studioで直接編集」をクリック
2.　以下のコードを記述して[OK]をクリック
※ コードは、ページプロパティのVisualforceページの名前が同じであれば、このまま張り付けて使えます。

global with sharing class SVE_PersonalEvalutionExtender extends SkyEditor2.Extender{
    SVE_PersonalEvalution ext;

    public SVE_PersonalEvalutionExtender(SVE_PersonalEvalution extension){
        this.ext = extension;
    }

    public PageReference customSave() {
        ext.doSave();
        return null;
    }
}

拡張Apexサンプル

3.　「ページスクリプト」にある「ページスクリプト編集」をクリック
4.　以下のコードを記述して[OK]をクリック

function setTotalScore( str ) {
    jQuery('[id$=Component94]').val(str);
}

document.addEventListener("DOMContentLoaded", function() {
    if ("{!$CurrentPage.parameters.EmployeeTotalScore}") {
        setTotalScore("{!$CurrentPage.parameters.EmployeeTotalScore}");
    } else {
        setTotalScore("0");
    }
});

ページスクリプトサンプル

※ 「Component94」には、評価値に配置した計算結果のIDを指定してください。

カスタムボタンの設定を行います。
1.　「カスタム」と書かれたカスタムボタンをクリックし、コンポーネントプロパティを表示し、下記の設定を行う

値	保存
動作選択	JavaScript/Apex呼出

2.　「action」には、下記の設定を行い[OK]をクリック

action メソッド名	customSave
status	処理中にインジケータを表示しない
immediate	False
reRender	messagesPanel　`※1`
OnComplete	下記のコードを記述 `※コードはこのまま張り付けても動きます。`

if({!errorMessages == ''}) {
  SkyEditor.Lightning.componentControl(
    'SVE_Employee',
    'reload',
    {
      'id':'{!record.Employee__c}',
      'ms':'{!MILLISECOND(TIMENOW())}'
    });
};

OnComplateサンプル

※1　「reRender」は、開発者モードが有効な場合にのみ設定できます。
　　「開発者モード」の有効化は、弊社にケースでお問い合わせいただくことで有効化できます。

”messagesPanel”は、エラーが発生したときに表示するoutputPanelのIDで、エラーが発生時にエラーメッセージを出すために指定しています。
OnCompleteでは、従業員詳細を表示するLightningコンポーネントにイベントで値を渡し、reloadするようにしていますが、全く同じ値が渡ると表示が更新されないため、msに現在時刻をミリ秒で表現した値も渡して表示を更新するようにしています。

こちらもページプロパティで「LEXデザイン」の「有効化」と、「Lightning Component」の「Lighningコンポーネントを出力する」にチェックを入れてデプロイしましたら、Studioでの作業は完了です。

5. Lightningアプリケーションビルダーでアプリケーション画面を作成する

作成したLightningコンポーネントを利用するための画面を用意します。

1.　Salesforceの組織にログインし、「設定」の「Lightning アプリケーションビルダー」を表示し、[新規]をクリック
2.　”アプリケーションページ”を選択し、[次へ]をクリック
3.　「表示ラベル」には”人事評価登録”と入力し、[次へ]をクリック
4.　レイアウトでは”3つの選択範囲”を選択し、[完了]をクリック
5.　表示されたLightningアプリケーションビルダーの画面では、左から順に”SVE_EmployeeSearch”、”SVE_Employee”、”SVE_PersonalEvalution”を配置し、右上の[保存]をクリック
表示されたダイアログでは、そのまま[有効化]をクリックし、アイコンや有効化対象が問題なければそのまま[保存]をクリックし、完了です。

この完成イメージは、画面サイズに合わせてレイアウト調整をしており、保存ボタンに拡張スタイルを当てた状態となっています。レイアウトは、ご利用の環境に合わせて調整してみてください。

今回は、2つのカスタムオブジェクトと3つのLightningコンポーネントを作成したため、少々長めの手順にはなりましたが、SkyVisualEditorを活用するとこのようなイベント連携を活用した画面が作れます。ぜひお試しください。

※本ブログに記載したApex拡張や手動設定された表示条件の動作は、将来的な動作を保証しておいません。また、標準サポートの対象外となりますこと、ご了承ください。

SkyVisualEditorによる「Lightningコンポーネント」連携の活用

実現したい機能

実装手順

実装方法

1. Salesforceでカスタムオブジェクト（従業員、人事評価）を作成する

2. SkyVisualEditorで従業員検索画面を作成する

検索条件項目設定

3. SkyVisualEditorで従業員詳細画面を作成する

4. SkyVisualEditorで人事評価編集画面を作成する

計算式の設定内容

5. Lightningアプリケーションビルダーでアプリケーション画面を作成する

完成イメージ

関連する記事

SkyVisualEditorで添付ファイルアップロードと添付ファイルプレビューを組み合わせた使い方をご紹介！

SkyVisualEditor LCでVF機能を実現！LC活用Tips

SkyVisualEditor LCで参照先の値を自動設定させる方法

SkyVisualEditorで作成した画面をSalesforceのレコードタイプで出し分けるTips

関連するキーワード

マウスを使わずにExcel作業をスピードアップするには

Salesforceの「ファイル」を使ってみよう

Visual Studio Code + Salesforce CLIを使用したメタデータのリリース

メール-to-ケースとWeb-to-ケースを使ってみよう

未経験から1ヶ月間で学んだApexテストクラスの基礎知識