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

学習の目的

この単元を完了すると、次のことができるようになります。
  • テンプレートにカスタムの UI コンポーネントを追加して、ユーザが各自のアプリケーションの UI を変更できるようにする方法を理解する。
  • 設定ウィザードにダッシュボードの背景のカラーピッカーを追加する。

色を添えて活性化

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

Execs Only アプリケーションや他の Tableau CRM ダッシュボードを設計している間に、彩りを添えるにはどうすればよいかと考えていました。Tableau CRM 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 開発者ガイド』へのリンクが記載されています。Visualforce を使えば、Salesforce ページをカスタマイズ可能なカラーピッカーを極めて簡単に開発できると言うだけで十分でしょう。あなたは Execs Only アプリケーションにこのカラーピッカーを追加できることを知ってワクワクしていることでしょう。パートナーも喜ぶものと思われます!

メモ

メモ

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

テンプレートへのカラーピッカーの追加

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

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

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

次に、前の単元で編集したものと同じテンプレートの JSON ファイルのカラーピッカーを参照します。前の例で行ったとおり、最初に 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 のオフィスに向かいます。

CEO への説明と実演

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

重要

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

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

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

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

メモ

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

背景がショッキングピンクの Sales Performance ダッシュボード いいですよね! CEO ももはやベタ褒めです。あなたの取り組みのお陰で、パートナーのロイヤリティを確保できると CEO は確信します。あなたは CEO から週末まで休暇を与えられ、来週月曜日に出社したときには思いもよらないことがあるかもしれないと言われます。

無限の可能性

Tableau CRM テンプレートの JSON ファイルの編集を詳しく見てきたあなたは、独自のテンプレートを操作する準備ができています。まずアプリケーションが必要ですが、その点については「リソース」セクションに記載されている Tableau CRM ヘルプで確認できます。また、この単元で作成したテンプレートでいろいろ試してみることも可能です。このテンプレートも「リソース」セクションのリンクからダウンロードできます。

注意: テンプレートを作成して JSON ファイルを編集することは、プロセスの最初の手順に過ぎません。配布できる状態にするためには、このテンプレートをリリースしてテストする必要があります。テンプレート開発の全過程については、「リソース」セクションにある『Analytics Templates Developer Guide (Analytics テンプレート開発者ガイド)』を参照してください。

Tableau CRM テンプレートを使用すれば、ここで紹介したこと以外にもたくさんのことができます。このモジュールの説明で使用した例は、テンプレートのファイルの構造に対する理解を深めることを目的としています。どのファイルでどのようなことをするのかを確認し、短い JSON によってどのような威力が発揮されるのかを見てきました。創造力を駆使すれば、テンプレートにさまざまなものを追加できることもわかりました。今回は、カスタムの UI コンポーネントが含まれる Visualforce ページを追加しました。

可能性は無限です。Tableau CRM テンプレートは Tableau CRM や Salesforce プラットフォームとともに、各自のテンプレートで何ができるかについて幅広い選択肢をもたらします。

リソース

無料で学習を続けましょう!
続けるにはアカウントにサインアップしてください。
サインアップすると次のような機能が利用できるようになります。
  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる