Enhance Your Template With App Customization Features

Learning Objectives

After completing this unit, you’ll be able to:

Understand how to add a custom UI component to a template so users can alter the UI of their apps.
Add a dashboard background color-picker to a configuration wizard.

Add Color, Add Pizzazz

You’re jazzed by what you just learned about templates. You understand the different template JSON files and what each one does. You saw enough code up close to do something cool with templates—something you think both the CEO and DTC partners will love. So, you decide to implement one of your pet ideas.

When you designed the Execs Only app and other CRM Analytics dashboards, you wondered about making them more colorful. The CRM Analytics UI lets you change some dashboard colors. You’ve got an idea to take that a lot further.

You’ve been playing with a Visualforce page custom UI component—a color picker—and want to add it to Execs Only. Your idea is for partners to use the picker to modify dashboard background colors. They could choose their corporate colors or add other colors to make dashboards really stand out.

A Very Little About Visualforce

Visualforce is Salesforce’s solution for building sophisticated custom user interfaces on the Lightning Platform. Visualforce pages let users modify the UI to suit their branding, to match standards such as the Lightning Design System, or most anything else. With multiple ways to access the Lightning Platform, including Apex Controllers, REST APIs, and JavaScript Remoting, Visualforce is a great way to develop wizard pages that enable powerful app customization.

Visualforce is the subject of a Trailhead module, which you can find in the Resources section along with the Visualforce Developer Guide, so it’s not discussed further here. Suffice it to say that it made the development of a color picker that can customize Salesforce pages easy, and you’re excited to see if you can add it to the Execs Only app. And you’re pretty sure partners will get excited, too.

The code for the Visualforce color picker is available in the download for this unit. See the link to the download in the Resources section. Look for the color-picker files in pages and static resources in the EATP2 folder, which contains the Template 2 files.

Add the Color Picker to Your Template

You decide to add another page to the Execs Only wizard that lets partners pick their dashboard colors.

First, add the files for the color picker Visualforce page to your template. You can see them here, in the orange box: Visualforce color picker files

The pages section of the directory includes the Visualforce page for the picker. The main page for the color picker is colorTest.page.

Next, reference the color-picker in the template JSON files you edited in the last unit. Start by adding to template-to-app-rules.json, just as you did in the previous example:

{
         //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}"
	     }
	   ]
	 }

Now, add three new rules to the rules section of the file. Each defines a set action to perform—the first on the Sales Performance dashboard, the second on Pipeline Performance, and the third on Service Performance. The action is to set a dashboard background color based on selections made using the color picker. As with rules, each points to a variable.

And here are the new variables in 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"
	}

The file includes a variable for each dashboard. For example, the variable for the Sales Performance dashboard is Exec_Overview_Sales_Performance_backgroundColor. It enables the user to pick a color. The variable defines a default value, #C5D3E0, a nondescript gray shade. The variable also includes the text to display in the wizard: "Click the color-picker and choose the background color for the Sales Performance dashboard.”

Finally, here’s ui.json. It adds a page to the wizard after the page with geography, new business, and Cases data questions. The new page includes UI elements for using the Visualforce color picker to change the color of each dashboard.

{
  "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"
      }
	}
  ]
}

You see the page added to the wizard in the previous unit, “Create Execs Only App”, and the new page, “Dashboard Styling.” This new page refers to the color picker by its name, “colorTest”, in the vfPage section.

What did you accomplish with the new JSON? You added a page to the wizard that lets partners choose background colors for the Execs Only dashboards.

Show and Tell with the CEO

Now, you're ready to show the CEO the app template. You’re in luck—she’s between meetings. You open your laptop, log in to Analytics Studio, and show her the new version of Execs Only.

Log in to the Developer Edition org you created in the first unit.
Select Analytics Studio from the app picker.
Click Create in the upper right and select App.
Scroll to Execs Only Template 2 and select it. Then click Continue. Be sure to select Template 2.
Click Continue until you see the first page of the new wizard.

First page of new wizard with three questions

The CEO is impressed that you’ve made it possible for partners to select geography and new business data and add the service dashboard if they want

Click Looks good, next and go to the next page. Click the first circle to choose a background color for the first dashboard, then do the same for the other two circles.

Wizard page with color picker

Your CEO is impressed, "That's great; now our partners will be able to make this look like it's their's too,” she says.

You go on to create the app. There are no instructions for that here—it’s the challenge at the end of this unit, the last thing you need to do to complete your Introduction to Templates badge. Here’s the Sales Performance, as you create in the challenge, though.

The Pipeline Performance dashboard with blue background

If data is missing from the dashboards, rerun the Trailhead Data Manager. See “Understand How Templates Work” in this Trailhead module for instructions. Be sure to run it on the app you create in the challenge. (Not the version of the app you created in “Understand How Templates Work.” Running the data manager isn’t required to complete your badge.

Your Imagination Is the Limit

Now that you’ve seen what goes into editing CRM Analytics Templates JSON files, you’re ready to get going on your templates. You need an app first, and you can learn all about that from CRM Analytics help, referenced in the Resources section. You can also play with the template created for this unit, which you can download from the link in the Resources section.

Remember: Creating the template and editing the JSON files are just the first steps in the process. You also have to deploy and test the template before it’s ready for distribution. You can read about the entire template development process in the Analytics Templates Developer Guide, referenced in the Resources section.

You can do much more with CRM Analytics Templates than you’ve seen here. The examples you went through were to familiarize you with the structure of template files. You’ve seen which file does what and witnessed the power just a bit of JSON can deliver. You’ve also seen how creative you can get with a template by adding a Visualforce page with a custom UI component.

Your imagination is the limit. CRM Analytics Templates and the CRM Analytics and Salesforce platforms give you a vast range of options for what you can do with your templates.

Resources

Visualforce Developer Guide
Visualforce Basics Trailhead
Explore Data and Take Action with CRM Analytics
CRM Analytics Templates Developer Guide
Download the code for this module. The download includes two files: EATP1 contains the basic Template 1, which you used to create the basic app. EATP2 contains Template 2, which includes the JSON modifications described in this module and the color picker code.

Looking for Help?

Discover More