アプリケーションのカスタマイズ機能を使用したテンプレートの拡張

あなたはテンプレートについていろいろなことを学び、心を弾ませています。テンプレートの各種の JSON ファイルとそれぞれの役割がわかりました。コードを詳しく見ているうちに、テンプレートで素晴らしいことを行えることがわかりました。CEO と DTC パートナーのどちらも絶賛するようなことです。そこで、思い付いたアイデアを実践してみることにします。

Execs Only アプリケーションや他の CRM Analytics ダッシュボードを設計している間に、彩りを添えるにはどうすればよいかと考えていました。CRM Analytics UI を使えば、ダッシュボードの色を変更できます。大胆な色にしてみようというアイデアを抱いていました。

これまでにも、Visualforce ページのカスタム UI コンポーネントであるカラーピッカーを使ったことがありました。そこで、Execs Only にもこれを追加しようと考えます。このピッカーを使用してパートナーがダッシュボードの背景色を変更できればよいと思ったのです。パートナーは各自のブランドカラーを選択することや、他の色を追加してダッシュボードを際立たせることができます。

Visualforce は、Lightning プラットフォームで高度なカスタムユーザーインターフェースを構築するための Salesforce のソリューションです。Visualforce ページではユーザーが、各自のブランド設定に合わせた UI を、Lightning Design System をはじめとする大半の標準に適合するよう変更できます。Lightning Platform には Apex コントローラー、REST API、JavaScript Remoting など複数の方法でアクセスできることから、Visualforce はアプリケーションの効率的なカスタマイズを可能にするウィザードページを開発する優れた手段になります。

Visualforce については、その Trailhead モジュールで説明されているため、ここではこれ以上言及しませんが、「リソース」セクションに Visualforce のモジュールと『Visualforce 開発者ガイド』へのリンクが記載されています。Visualforce を使えば、Salesforce ページをカスタマイズ可能なカラーピッカーを極めて簡単に開発できると言うだけで十分でしょう。あなたは Execs Only アプリケーションにこのカラーピッカーを追加できることを知ってワクワクしていることでしょう。パートナーも喜ぶものと思われます!

この単元のダウンロードから、Visualforce カラーピッカーのコードを入手できます。「リソース」セクションのダウンロードのリンクを参照してください。テンプレート 2 のファイルを格納する EATP2 フォルダーの pages と staticresources でカラーピッカーのファイルを探します。

Execs Only ウィザードにもう 1 つページを追加して、パートナーが各自のダッシュボードの色を選択可能にすることにします。では始めましょう!

最初に、カラーピッカー Visualforce ページのファイルをテンプレートに追加します。以下の赤いボックス内に示されています。

ピッカーの Visualforce ページは、ディレクトリの pages セクションにあります。カラーピッカーのメインページは colorTest.page です。

{
         //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 のオフィスに向かいます。

幸いにも CEO はミーティングの合間で、オフィスにいました。あなたはラップトップを開いて、Analytics Studio にログインし、Execs Only の新バージョンを CEO に見せます。

重要: Chrome ブラウザーを使用している場合は、Analytics のページが意図したとおり表示されるように、ズームを 65% 以上にします。

1. 最初の単元で作成した Developer Edition 組織にログインします。
2. アプリケーションピッカーから [Analytics Studio] を選択します。
3. 右上の [作成] をクリックして、[アプリケーション] を選択します。
4. [Execs Only Template 2 (Execs Only テンプレート 2)] までスクロールして選択します。[続行] をクリックします。必ず [Template 2 (テンプレート 2)] を選択します。
5. 新しいウィザードの最初のページが表示されるまで [続行] をクリックします。「ちょっと待って」と CEO が言います。「パートナーが求めているオプションを全部備えているようですね。パートナーが、場所や新規ビジネスのデータの選択肢を変更したり、必要に応じてサービスダッシュボードを追加することができるなんて、本当にすごいですね!」あなたは心の中でガッツポーズをして、「カラーピッカーを見たら何て言うかな?」と考えます。
6. [次へ] をクリックして、次のページに進みます。最初のダッシュボードの背景色を選択するには、最初の円をクリックします。

「すごい!」と CEO が声を上げます。「パートナーがダッシュボードを好きな色に変更できるんですね? それなら、私は大好きなショッキングピンクにしようかしら。すごすぎる!」

CEO のためにお洒落な色を選択してアプリケーションの作成を進めます。ここでは、色の設定をどのように行うかは説明しません。この単元の末尾の Challenge の内容であるためです。この Challenge は「Introduction to Templates (テンプレートの概要)」バッジを獲得するためにあなたがすべき最後のことです。念のため、ショッキングピンクの Sales Performance をお見せしましょう。

ダッシュボードのデータが欠落している場合は、Trailhead Data Manager をもう一度実行します。手順については、この Trailhead モジュールの「テンプレートのしくみについて」を参照してください。必ず Challenge で作成するアプリケーションで実行します。(「テンプレートのしくみについて」で作成したバージョンではありません)。バッチの獲得の目的においては、必ずしもデータマネージャーを実行する必要はありません。

いいですよね! CEO ももはやベタ褒めです。あなたの取り組みのお陰で、パートナーのロイヤルティを確保できると CEO は確信します。あなたは CEO から週末まで休暇を与えられ、来週月曜日に出社したときには思いもよらないことがあるかもしれないと言われます。

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 の変更とカラーピッカーのコードが含まれています。