Images関連リストのレコードを作成するとき、表示しているレコードページの詳細を見ながら作成したいと思うことはありませんか。LEXのレコードページは、画面全体のテンプレート、タブやアコーディオンなどレイアウト、コンポーネントを組み合わせることで、1つの画面に必要な情報を表示させることができるので便利です。レコードページの情報を表示しながら関連先を表示することもできます。課題LEXのレコードページは便利ではありますが、関連先レコードを作成するときは下記動画のようにダイアログが前面に表示されるため、レコードページの情報を見ながら関連先レコードが作成できません。商談の情報は既に存在しているにもかかわらず、改めて自分で入力しなければならず、上司が記載する項目も報告の作成時には不要ですが、表示されてしまいます。今回は、SkyVisualEditorを利用し、これらの課題を改善した画面の作成方法についてご紹介します。実現したい機能まず、想定している要件は下記となります。上長の確認が済んでいるのか、一覧で分かるようにする実装手順このブログでは、下記の流れで要件を満たす機能を実装していきます。Salesforceでカスタムオブジェクト(商談活動報告)を作成するSalesforceのオブジェクトマネージャを起動し、下記の内容でカスタムオブジェクトを1つ作成します。カスタムオブジェクトやカスタム項目の設定値は、ご利用の環境に合わせて適宜変更してください。報告サマリーの数式は、報告内容の先頭20文字を表示しますので、下記の数式を設定します。SVE_OppoReport続けて、画面を作成します。)を1列に指定して配置します。ボタン表示領域]は"下のみ"にします。上司チェック(入力項目)上司コメント(入力項目)見た目は、下記のような画面になります。ここで1つ工夫をします。商談活動報告を入力する際、商談情報は自動で入力されるようにします。上司入力の項目も上司が報告された内容を確認するときに表示させるため、これらは報告内容の入力時には非表示となる設定をします。表示条件]を選択して[コンポーネント表示制御設定]のダイアログを表示します。ここでは手動設定を選択し、下記の内容を記述します。true)}この設定のでは、商談活動報告の名前項目の有無で商談活動報告のレコードの存在を判定し、値がなければページブロックセクションを非表示に、値があれば表示するようにしています。今回はLEX画面に配置しますので、見た目もLEXのようにします。ページプロパティを開き、[LEXデザイン]の"有効化"と"入力項目100%化"にチェックを入れます。Component]の"Lightningコンポーネントを出力する"にもチェックを入れます。自動で商談の値が設定されるようにするここではApex拡張を使い、商談活動報告を保存するときに商談の情報も登録させる設定を行います。Studioで直接編集]を選択し、拡張Apexクラス編集画面を表示します。表示されたダイアログには、あらかじめ拡張クラスのひな型が書かれています。これを編集し、今回は下記のようなコードを記載します。このブログに記載した手順と同じ内容を記載されている場合は、下記のサンプルはこのままご利用いただけます。}}SVE_OppoReportExtenderコード記載後、OKを押してダイアログを閉じ、Salesforceにデプロイします。通常はテストコードも必要となりますが、今回は割愛しますので、デプロイ時に警告が出ますが無視してダイアログを閉じてください。Apex拡張で記載した内容は、将来的な動作を保証しておらずサポート対象外とはなりますが、様々な動作を実現する強力な機能ですので、標準で実現できない機能がある場合はApex拡張をご検討ください。SkyVisualEditorで商談活動報告の一覧表示を作成するもう1つの画面を作成します。ボタン表示領域]は"非表示"にします。商談レポートのリストを表示するコンポーネントを準備します。コンポーネントからライトデータテーブルをページセクション内に配置します。表示されたダイアログは、下記のように設定します。内容ライトデータテーブルの項目には、下記3つの表示項目を配置します。上司チェックこの画面もLEX画面に配置しますので、見た目もLEXのようにします。ページプロパティを開き、[LEXデザイン]の"有効化"にチェックを入れます。"入力項目100%化"にはチェックを入れません。この画面ではライトデータテーブルの列幅を手動で設定しているためです。"入力項目100%化"にチェックを入れますと、幅が自動調整されるため手動で幅を設定しても意図した表示にならない可能性があります。Component]の"Lightningコンポーネントを出力する"にもチェックを入れます。ここまで設定した画面は、下記のようになりますので、この状態になりましたらSalesforceにデプロイします。Lightningアプリケーションビルダーで商談レコードページを更新するここからはSalesforceの設定を使います。今回は商談のレコードページを更新しますので、商談で任意の詳細ページをLEXで表示し、編集ページからLightningアプリケーションビルダーを表示します。今回、商談の詳細を表示しながら商談の報告を書きたいので、右側の表示領域を少し広げます。そのため、テンプレートで"ヘッダーと2つの等しい範囲"を選択します。右の画面でタブを1つ増やし、タブ名を"商談活動報告"に変更します。増やしたタブの中にデプロイしたLightningコンポーネント"SVE_OppoReportList"をドラッグ&ドロップで配置し、右上の保存ボタンを押して完成です。完成した画面は、以下のように動作します。報告作成時には商談活動報告のみが表示され、保存すると一覧に追加されます。作成した報告の内容を表示すると、報告時の商談情報が自動で入力されているのが確認できます。上司が入力する項目も表示されています。いかがでしたでしょうか?SkyVisualEditorを利用すると、このようにLEX画面でも活用できる画面が作成できますので、是非お試しください。※本ブログに記載したApex拡張や手動設定された表示条件の動作は、将来的な動作を保証しておいません。標準サポートの対象外となりますこと、ご了承ください。ExperienceSkyVisualEditorTerraSkyBaseについてTerraSkyBaseはクラウドサービスを手掛ける株式会社テラスカイのコンテンツプラットフォームです。