SkyVisualEditorでLightning Experienceのレコードページをもっと便利にする

関連リストのレコードを作成するとき、表示しているレコードページの詳細を見ながら作成したいと思うことはありませんか。
LEXのレコードページは、画面全体のテンプレート、タブやアコーディオンなどレイアウト、コンポーネントを組み合わせることで、1つの画面に必要な情報を表示させることができるので便利です。例えば、レコードページの情報を表示しながら関連先を表示することもできます。

課題

LEXのレコードページは便利ではありますが、関連先レコードを作成するときは下記動画のようにダイアログが前面に表示されるため、レコードページの情報を見ながら関連先レコードが作成できません。
更に、商談の情報は既に存在しているにもかかわらず、改めて自分で入力しなければならず、上司が記載する項目も報告の作成時には不要ですが、表示されてしまいます。
今回は、SkyVisualEditorを利用し、これらの課題を改善した画面の作成方法についてご紹介します。

実現したい機能

まず、想定している要件は下記となります。

　1. 商談のレコードページを表示しながら商談の活動報告が行えるようにする
　2. 活動報告には、報告時点での商談がどのような状態（フェーズや角度など）なのか、自動で入力されるようにする
　3. 商談には、打ち合わせや訪問単位で活動報告を行い、活動数分析に使えるようにする
　4. 報告内容は上長が確認し、必要に応じてコメントが入れられるようにする
　5. 上長の確認が済んでいるのか、一覧で分かるようにする

実装手順

このブログでは、下記の流れで要件を満たす機能を実装していきます。

　1. Salesforceでカスタムオブジェクト（商談活動報告）を作成する
　2. SkyVisualEditorで商談活動報告の作成画面を作成する
　3. 商談活動報告作成時に自動で商談の値が設定されるようにする
　4. SkyVisualEditorで商談活動報告の一覧表示を作成する
　5. Lightningアプリケーションビルダーで商談レコードページを更新する

実装方法

1. Salesforceでカスタムオブジェクト（商談活動報告）を作成する

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

カスタムオブジェクト情報

項名	値
表示ラベル	商談活動報告
オブジェクト名	OppoReport
コード名	報告番号
データ型	自動採番
表示形式	{YYYY}{MM}{000000}

カスタム項目情報

項目の表示ラベル	項目名	データ型
上司コメント	Checkcomment	テキストエリア(255)
完了予定日	CloseDate	日付
商談	Opportunity	参照関係(商談)
確度(%)	Probability	パーセント(3、0)
上司チェック	Reportcheck	チェックボックス
報告日	Reportdate	日付
報告サマリー	ReportSummary	数式 (テキスト)　※1
報告内容	Reporttext	テキストエリア(255)
フェーズ	StageName	テキスト(255)

※1　報告サマリーの数式は、報告内容の先頭20文字を表示しますので、下記の数式を設定します。 LEFT(Reporttext__c, 20)

2. SkyVisualEditorで商談活動報告の作成画面を作成する

SkyVisualEditorのStudioにログインし、[ファイル > 新規] を選択し、レイアウトマネージャで "Salesforceレイアウト" を選択し、下記内容を設定して "OK" を押します。

項名	値
オブジェクト	商談活動報告:OppoReport__c
Visualforceページ名	SVE_OppoReport

続けて、画面を作成します。
ページブロックの中に、3つのページブロックセクション（報告内容、商談情報、上司入力）を1列に指定して配置します。
ページブロックのプロパティを表示し、[外観 > ボタン表示領域]は"下のみ"にします。

各ページブロックセクションには、下記のように入力項目と表示項目を配置します。

報告内容

報告日（入力項目）
報告内容（入力項目）
作成者ID（表示項目）

商談情報

商談（表示項目）
完了予定日（表示項目）
確度(％)（表示項目）
フェーズ（表示項目）

上司入力

上司チェック（入力項目）
上司コメント（入力項目）

見た目は、下記のような画面になります。

ここで1つ工夫をします。
商談活動報告を入力する際、商談情報は自動で入力されるようにします。
また、上司入力の項目も上司が報告された内容を確認するときに表示させるため、これらは報告内容の入力時には非表示となる設定をします。

商談情報と上司入力のページブロックセクションのプロパティで [高度な設定 > 表示条件]を選択して[コンポーネント表示制御設定]のダイアログを表示します。
ここでは手動設定を選択し、下記の内容を記述します。

{!IF(OppoReport__c.Name == '', false, true)}

この設定のでは、商談活動報告の名前項目の有無で商談活動報告のレコードの存在を判定し、値がなければページブロックセクションを非表示に、値があれば表示するようにしています。

今回はLEX画面に配置しますので、見た目もLEXのようにします。
ページプロパティを開き、[LEXデザイン]の"有効化"と"入力項目100%化"にチェックを入れます。
また、[Lightning Component]の"Lightningコンポーネントを出力する"にもチェックを入れます。

3. 商談活動報告作成時に自動で商談の値が設定されるようにする

ここではApex拡張を使い、商談活動報告を保存するときに商談の情報も登録させる設定を行います。
ページプロパティを表示し、[Apexクラス拡張 > Studioで直接編集]を選択し、拡張Apexクラス編集画面を表示します。

表示されたダイアログには、あらかじめ拡張クラスのひな型が書かれています。これを編集し、今回は下記のようなコードを記載します。このブログに記載した手順と同じ内容を記載されている場合は、下記のサンプルはこのままご利用いただけます。

global with sharing class SVE_OppoReportExtender extends SkyEditor2.Extender{
    SVE_OppoReport ext; // 商談活動報告オブジェクト
    String recordId; // 関連先の商談のレコードID

    public SVE_OppoReportExtender(SVE_OppoReport extension){
        ext = extension;
        recordId = ApexPages.currentPage().getParameters().get('Opportunity__c');
    }

    // 商談活動報告の保存前処理の上書き
    public override void preSave() {
        if (recordId != null) {
            // 関連している商談のレコードを取得
            SObject[] oppoRecord = Database.query('SELECT Id, StageName, CloseDate, Probability FROM Opportunity WHERE Id = :recordId');
            // レコードがない場合は何もしない
            if (oppoRecord.isEmpty()) {
                return;
            // レコードがある場合は商談活動報告に商談の情報をセット
            } else {
                ext.record.Opportunity__c = (String)oppoRecord[0].get('Id');  // 商談ID
                ext.record.StageName__c = (String)oppoRecord[0].get('StageName');  // フェーズ
                ext.record.CloseDate__c = (Date)oppoRecord[0].get('CloseDate'); // 完了予定日
                ext.record.Probability__c = (Decimal)oppoRecord[0].get('Probability'); // 確度
            }
        }
    }
}

SVE_OppoReportExtender

コード記載後、OKを押してダイアログを閉じ、Salesforceにデプロイします。
通常はテストコードも必要となりますが、今回は割愛しますので、デプロイ時に警告が出ますが無視してダイアログを閉じてください。
Apex拡張で記載した内容は、将来的な動作を保証しておらずサポート対象外とはなりますが、様々な動作を実現する強力な機能ですので、標準で実現できない機能がある場合はApex拡張をご検討ください。

4. SkyVisualEditorで商談活動報告の一覧表示を作成する

もう1つの画面を作成します。
[ファイル > 新規] を選択し、レイアウトマネージャで "Salesforceレイアウト" を選択し、下記内容を設定して "OK" を押します。

項名	値
オブジェクト	商談:Opportunity
Visualforceページ名	SVE_OppoReportList

画面に表示されたページブロック内のページブロックセクションを削除し、ページのプロパティの[外観 > ボタン表示領域]は"非表示"にします。

商談レポートのリストを表示するコンポーネントを準備します。
コンポーネントからライトデータテーブルをページセクション内に配置します。表示されたダイアログは、下記のように設定します。

項目	設定値
主オブジェクトとの関連	関連する
オブジェクト	商談活動報告:OppoReport__c
列数	3
行追加ボタン	チェックを入れる
行削除ボタン	チェックを入れる
ページング	チェックを入れる
テーブル内検索	チェックを外す
ページ表示件数	10

ライトデータテーブルのプロパティを表示し、[テーブル機能]の下記項目の設定を変更します。

項目	設定値
行追加ページ	SVE_OppoReport
行追加ボタン値編集	チェックを入れる
行追加ボタン値	報告作成
削除確認	チェックを入れる
詳細表示ボタン有り	チェックを入れる
詳細ページ	SVE_OppoReport
保存後閉じる	チェックを入れる
詳細表示ボタン値編集	チェックを入れる
詳細表示ボタン値	内容

ライトデータテーブルの項目には、下記3つの表示項目を配置します。

報告日
報告サマリー
上司チェック

この画面もLEX画面に配置しますので、見た目もLEXのようにします。
ページプロパティを開き、[LEXデザイン]の"有効化"にチェックを入れます。
"入力項目100%化"にはチェックを入れません。
この画面ではライトデータテーブルの列幅を手動で設定しているためです。"入力項目100%化"にチェックを入れますと、幅が自動調整されるため手動で幅を設定しても意図した表示にならない可能性があります。
[Lightning Component]の"Lightningコンポーネントを出力する"にもチェックを入れます。

ここまで設定した画面は、下記のようになりますので、この状態になりましたらSalesforceにデプロイします。