2019.09.10

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly
Yellow and red cup.

Yellow and red cup.

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

課題

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

実現したい機能

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

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

実装手順

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

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

実装方法

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

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

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

項名
表示ラベル 商談活動報告
オブジェクト名 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にデプロイします。

5. Lightningアプリケーションビルダーで商談レコードページを更新する

ここからはSalesforceの設定を使います。
今回は商談のレコードページを更新しますので、商談で任意の詳細ページをLEXで表示し、編集ページからLightningアプリケーションビルダーを表示します。

今回、商談の詳細を表示しながら商談の報告を書きたいので、右側の表示領域を少し広げます。
そのため、テンプレートで"ヘッダーと2つの等しい範囲"を選択します。

右の画面でタブを1つ増やし、タブ名を"商談活動報告"に変更します。
増やしたタブの中にデプロイしたLightningコンポーネント"SVE_OppoReportList"をドラッグ&ドロップで配置し、右上の保存ボタンを押して完成です。

完成した画面は、以下のように動作します。 報告作成時には商談活動報告のみが表示され、保存すると一覧に追加されます。
作成した報告の内容を表示すると、報告時の商談情報が自動で入力されているのが確認できます。上司が入力する項目も表示されています。

いかがでしたでしょうか?
SkyVisualEditorを利用すると、このようにLEX画面でも活用できる画面が作成できますので、是非お試しください。

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

41 件
     
  • banner
  • banner

関連する記事