アプリケーションのカスタマイズ機能を使用したテンプレートの拡張
学習の目的
この単元を完了すると、次のことができるようになります。
- テンプレートにカスタムの UI コンポーネントを追加して、ユーザーが各自のアプリケーションの UI を変更できるようにする方法を理解する。
- 設定ウィザードにダッシュボードの背景のカラーピッカーを追加する。
メモ
日本語で受講されている方へ
Challenge は日本語の Trailhead Playground で開始し、かっこ内の翻訳を参照しながら進めていってください。Challenge での評価は英語データを対象に行われるため、英語の値のみをコピーして貼り付けるようにしてください。日本語の組織で Challenge が不合格だった場合は、(1) この手順に従って [Locale (地域)] を [United States (米国)] に切り替え、(2) [Language (言語)] を [English (英語)] に切り替えてから、(3) [Check Challenge (Challenge を確認)] ボタンをクリックしてみることをお勧めします。
翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。
色を添えて活性化
あなたはテンプレートについていろいろなことを学び、心を弾ませています。テンプレートの各種の JSON ファイルとそれぞれの役割がわかりました。コードを詳しく見ているうちに、テンプレートで素晴らしいことを行えることがわかりました。CEO と DTC パートナーのどちらも絶賛するようなことです。そこで、思い付いたアイデアを実践してみることにします。
Execs Only アプリケーションや他の CRM Analytics ダッシュボードを設計している間に、彩りを添えるにはどうすればよいかと考えていました。CRM Analytics UI を使えば、ダッシュボードの色を変更できます。大胆な色にしてみようというアイデアを抱いていました。
これまでにも、Visualforce ページのカスタム UI コンポーネントであるカラーピッカーを Execs Only に追加しようと考えたことがありました。このピッカーを使用してパートナーがダッシュボードの背景色を変更できればよいと思ったのです。パートナーは各自のブランドカラーを選択することや、他の色を追加してダッシュボードを際立たせることができます。
Visualforce の復習
Visualforce は、Lightning プラットフォームで高度なカスタムユーザーインターフェースを構築するための Salesforce のソリューションです。Visualforce ページではユーザーが、各自のブランド設定に合わせた UI を、Lightning Design System をはじめとする大半の標準に適合するよう変更できます。Lightning Platform には Apex コントローラー、REST API、JavaScript Remoting など複数の方法でアクセスできることから、Visualforce はアプリケーションの効率的なカスタマイズを可能にするウィザードページを開発する優れた手段になります。
Visualforce は Trailhead モジュールのテーマであり、「リソース」セクションに列挙されている『Visualforce 開発者ガイド』で取り上げていますので、ここでは説明しません。Visualforce を使えば、Salesforce ページをカスタマイズ可能なカラーピッカーを簡単に開発できると言うだけで十分でしょう。あなたは Execs Only アプリケーションにこのカラーピッカーを追加できることを知ってワクワクしていることでしょう。パートナーも喜ぶものと思われます。
この単元のダウンロードから、Visualforce カラーピッカーのコードを入手できます。「リソース」セクションのダウンロードのリンクを参照してください。テンプレート 2 のファイルを格納する EATP2 フォルダーの pages と static resources でカラーピッカーのファイルを探します。
テンプレートへのカラーピッカーの追加
Execs Only ウィザードにもう 1 つページを追加して、パートナーが各自のダッシュボードの色を選択可能にすることにします。
最初に、カラーピッカー Visualforce ページのファイルをテンプレートに追加します。以下のオレンジのボックス内に表示されています。
ピッカーの Visualforce ページは、ディレクトリの pages セクションにあります。カラーピッカーのメインページは colorTest.page です。
次に、前の単元で編集したテンプレートの JSON ファイルのカラーピッカーを参照します。前の例で行ったとおり、最初に template-to-app-rules.json に追加します。
{
//1-RULE FOR CHANGING SALES DASHBOARD BACKGROUND
"name": "Exec_Overview_Sales_Performance_backgroundColor",
"appliesTo": [
{
"type": "dashboard",
"name": "Exec_Overview_Sales_Performance"
}
],
"actions": [
{
"action": "set",
"description": "Set the value for state.gridLayouts[0].style.backgroundColor in Exec_Overview_Sales_Performance.",
"path": "$.state.gridLayouts[0].style.backgroundColor",
"value": "${Variables.Exec_Overview_Sales_Performance1_state_gridLayouts0_style_backgroundColor}"
}
]
},
{
//2-RULE FOR CHANGING PIPELINE DASHBOARD BACKGROUND
"name": "Exec_Overview_Pipeline_Performance_backgroundColor",
"appliesTo": [
{
"type": "dashboard",
"name": "Exec_Overview_Pipeline_Performance"
}
],
"actions": [
{
"action": "set",
"description": "Set the value for state.gridLayouts[0].style.backgroundColor in the Exec Overview - Pipeline Performance dashboard.",
"path": "$.state.gridLayouts[0].style.backgroundColor",
"value": "${Variables.Exec_Overview_Pipeline_Performance_PipelineDetails_backgroundColor}"
}
]
},
{
//1-RULE FOR CHANGING SERVICE DASHBOARD BACKGROUND
"name": "Exec_Overview_Service_Performance_backgroundColor",
"appliesTo": [
{
"type": "dashboard",
"name": "Exec_Overview_Service_Performance"
}
],
"actions": [
{
"action": "set",
"description": "Set the value for state.gridLayouts[0].style.backgroundColor in the Exec Overview - Service Performance dashboard.",
"path": "$.state.gridLayouts[0].style.backgroundColor",
"value": "${Variables.Exec_Overview_Service_Performance_ServiceDetails_backgroundColor}"
}
]
}では、このファイルの rules セクションに新しいルールを 3 つ追加します。それぞれが、実行する set アクションを定義します。1 つ目は Sales Performance、2 つ目は Pipeline Performance、3 つ目は Service Performance の各ダッシュボードで実行されます。このアクションは、カラーピッカーで行った選択に基づいてダッシュボードの背景色を設定することです。ルールの場合と同様に、それぞれが変数をポイントします。
以下は、variables.json の新しい変数です。
//1-VARIABLE FOR SALES DASHBOARD
"Exec_Overview_Sales_Performance_backgroundColor": {
"label": "Click the color-picker and choose the background color for the Sales Performance dashboard",
"description": "",
"defaultValue": "#C5D3E0",
"variableType": {
"type": "StringType"
}
},
//1-VARIABLE FOR PIPELINE DASHBOARD
"Exec_Overview_Pipeline_Performance_backgroundColor": {
"label": "Click the color-picker and choose the background color for the Pipeline Performance dashboard",
"description": "",
"defaultValue": "#C5D3E0",
"variableType": {
"type": "StringType"
}
},
//3-VARIABLE FOR SERVICE DASHBOARD
"Exec_Overview_Service_Performance_backgroundColor": {
"label": "Click the color-picker and choose the background color for the Service Performance dashboard",
"description": "",
"defaultValue": "#C5D3E0",
"variableType": {
"type": "StringType"
}このファイルには、各ダッシュボードの変数が含まれます。たとえば、Sales Performance ダッシュボードの変数は Exec_Overview_Sales_Performance_backgroundColor です。ユーザーはこの変数を使用して色を選択できます。この変数は、#C5D3E0 というデフォルト値を定義します。ちなみに、これは特徴のないグレーです。この変数には、ウィザードに表示されるテキストも含まれます。たとえば、“Click the color-picker and choose the background color for the Sales Performance dashboard.” (「カラーピッカーをクリックして、Sales Performance ダッシュボードの背景色を選択してください。」) などです。
最後は ui.json です。このファイルは、ウィザードの場所、新規ビジネス、ケースデータの質問を示すページの後にページを追加します。この新しいページには、Visualforce カラーピッカーを使用して各ダッシュボードの色を変更する UI 要素が含まれます。
{
"pages": [
{
"title": "Create Execs Only App",
"variables": [
{ "name": "Geography" },
{ "name": "Source_L2" },
{ "name": "SObjectChoices" }
]
},
//THE NEW WIZARD PAGE
{
"title": "Execs Only Dashboard Styling",
"variables": [
{
"name": "Exec_Overview_Sales_Performance_backgroundColor"
},
{
"name": "Exec_Overview_Pipeline_Performance_backgroundColor"
},
{
"name": "Exec_Overview_Service_Performance_backgroundColor"
}
],
"vfPage":{
"namespace": "c",
"name": "colorTest"
}
}
]
}前の単元でウィザードに追加したページである [Create Execs Only App (Execs Only アプリケーションの作成)] と、新しいページの [Dashboard Styling (ダッシュボードのスタイル設定)] が表示されています。この新しいページは、vfPage セクションの「colorTest」というカラーピッカーを参照します。
この新しい JSON を使用して、どのようなことが成し遂げられたのでしょうか? パートナーが Execs Only ダッシュボードの背景色を選択できるページがウィザードに追加されました。
CEO への説明と実演
これで CEO にアプリケーションテンプレートを披露する準備ができました。幸いにも CEO はミーティングの合間です。あなたはラップトップを開いて、Analytics Studio にログインし、Execs Only の新バージョンを CEO に見せます。
- 最初の単元で作成した Developer Edition 組織にログインします。
- アプリケーションピッカーから [Analytics Studio] を選択します。
- 右上の [Create (作成)] をクリックして、[アプリケーション] を選択します。
-
[Execs Only Template 2 (Execs Only テンプレート 2)] までスクロールして選択します。[続行] をクリックします。必ず [Template 2 (テンプレート 2)] を選択します。
- 新しいウィザードの最初のページが表示されるまで [Continue (続行)] をクリックします。
CEO は、パートナーが場所や新規ビジネスのデータを選択し、必要に応じてサービス・ダッシュボードを追加できるようにしたことに感心しています。
-
[Next (次へ)] をクリックして、次のページに進みます。最初の円をクリックして、最初のダッシュボードの背景色を選択します。残りの 2 つの円についても同様に背景色を選択します。
CEO は感心して、「素晴らしい。これでパートナーの皆さんも同じようなダッシュボードを作成できるようになります」と言っています。
では、次にアプリケーションを作成しましょう。ここでは、それをどのように行うかは説明しません。この単元の末尾の Challenge の内容であるためです。この Challenge は「Introduction to Templates (テンプレートの概要)」バッジを獲得するためにあなたがすべき最後のことです。ですが、とりあえず Challenge で作成する Sales Performance をお見せしましょう。
ダッシュボードのデータが欠落している場合は、Trailhead Data Manager を再実行します。手順については、この Trailhead モジュールの「テンプレートのしくみについて」を参照してください。必ず Challenge で作成するアプリケーションで実行します。(「テンプレートのしくみについて」で作成したバージョンではありません。)バッチの獲得の目的においては、必ずしもデータマネージャーを実行する必要はありません。
無限の可能性
CRM Analytics テンプレートの JSON ファイルの編集を詳しく見てきたあなたは、自分のテンプレートを操作する準備ができています。まずアプリケーションが必要ですが、その点については「リソース」セクションに記載されている CRM Analytics ヘルプで確認できます。また、この単元で作成したテンプレートでいろいろ試してみることも可能です。このテンプレートも「リソース」セクションのリンクからダウンロードできます。
メモ: テンプレートを作成して JSON ファイルを編集することは、プロセスの最初の手順に過ぎません。配布できる状態にするためには、このテンプレートをリリースしてテストする必要があります。テンプレート開発の全過程については、「リソース」セクションにある『Analytics Templates Developer Guide (Analytics テンプレート開発者ガイド)』を参照してください。
CRM Analytics テンプレートでは、ここで紹介したこと以外にもたくさんのことができます。このモジュールの説明で使用した例は、テンプレートのファイルの構造に対する理解を深めるためのものです。どのファイルでどのようなことをするのかを確認し、短い JSON によってどのような威力が発揮されるのかを見てきました。また、カスタム UI コンポーネントを使用した Visualforce ページを追加することで、いかにクリエイティブなテンプレートを作成できるかということも見ました。
可能性は無限です。CRM Analytics テンプレートは CRM Analytics や Salesforce プラットフォームとともに、各自のテンプレートで何ができるかについて幅広い選択肢をもたらします。
リソース
- Visualforce 開発者ガイド
- Trailhead の「Visualforce の基礎」
- Explore Data and Take Action with CRM Analytics (CRM Analytics を使用したデータの調査とアクションの実行)
- Analytics Templates Developer Guide (Analytics テンプレート開発者ガイド)
- このモジュールのコードのダウンロード。ダウンロードは 2 つのファイルで構成されています。EATP1 は基本的な Template 1 (テンプレート 1) で、基本アプリケーションの作成に使用しました。EATP2 は Template 2 (テンプレート 2) で、このモジュールで説明した JSON の変更とカラーピッカーのコードが含まれています。