Skip to main content

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 really cool with templates—something you think both the CEO and DTC partners will love. So you decide to implement one of your pet ideas.

While you designed the Execs Only app, and other CRM Analytics dashboards, you’ve wondered how you can make 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 you want to add it to Execs Only. Your idea is that partners could 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 own 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 gives you a great way to develop wizard pages that enable powerful app customization.

We won’t say more about Visualforce here, since it’s the subject of its own Trailhead module, which you can find in the Resources section along with the Visualforce Developer Guide. Suffice it to say that it made development of a color picker that can customize Salesforce pages really 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!

Note

We’ve made the code for the Visualforce color-picker 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 staticresources in the EATP2 folder, the folder containing Template 2 files.

Add the Color Picker to Your Template

So you decide to add another page to the Execs Only wizard that lets partners pick their own dashboard colors. Let’s do it!

First, add the files for the color picker Visualforce page to your template. You can see them here, in the red 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 same templates JSON files you edited in the last unit. Start with adding to rules.json, just like we 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}"
	     }
	   ]
	 }

We add three new rules to the rules section of the file. Each of them defines a set action to perform—the first on the Sales Performance dashboard, the second on Pipeline Performance, the third on Service Performance. The action: to set a dashboard background color based on selections made using the color-picker. As before with rules, each point 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, for example, “Click the color-picker and choose the background color for the Sales Performance dashboard.”

And 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 to use 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 can see the page that we added to the wizard in the previous unit, with the title “Create Execs Only App”. The new page has the title “Dashboard Styling” and refers to the color-picker by its name, “colorTest” in the vfPage section.

What did we accomplish with the new JSON? We added a page to the wizard that lets our partners choose background colors for the Execs Only dashboards. Our excitable CEO’s going to go bonkers over that! And you’re so excited to show her that you grab your laptop and run down to her office.

Show and Tell with the CEO

You’re in luck—she’s there, and she’s between meetings. You open your laptop, log in to Analytics Studio, and show her the new version of Execs Only.

Important

Important: If you use the Chrome browser, make sure it’s zoomed to at least 65% so pages appear as intended.

  1. Log in to the Developer Edition org you created in the first unit.
  2. Select Analytics Studio from the app picker.
  3. Click Create in the upper right and select App.
  4. Scroll to Execs Only Template 2 and select it. Then click Continue. Be sure to select Template 2.
  5. Click Continue until you see first page of the new wizard. First page of new wizard with three questions“Stop right there!” the CEO says. “Looks like partners have all the options they asked for. They can change their selections for geography and new business data, and add the service dashboard if they want. So awesome!” You do a fist pump in your head, and think, “Just wait until she sees the color picker.”
  6. Click Looks good, next and go to the next page. Click the first circle to choose a background color for the first dashboard. Wizard page with color picker

“Amazeballs,” exclaims the CEO. “Partners can color the dashboards however they want? In fact, I want mine to use my favorite—color hot pink. That is sooooo cool!”

You go on to create the app, including the CEO’s tasteful color choice. We’re not going to tell you how to do that—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 in hot pink, though.
Note

If data is missing from dashboards, run the Trailhead Data Manager again. 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 is not required to complete your badge.

Sales Performance dashboard with hot pink background Nice, eh? We can also tell you the CEO is knocked out. She’s sure your work has assured partner loyalty. She gives you the rest of the week off and mentions a surprise for you when you come in next Monday.

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 own 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 we 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.

There’s a lot more you can do with CRM Analytics Templates than we’ve shown here. The examples we went through were intended 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 what you add to a template. In this case, we added a Visualforce page with a custom UI component.

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

Resources

Keep learning for
free!
Sign up for an account to continue.
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities