Enhance Your Template With App Customization Features
Learning Objectives
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!
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:
The pages section of the directory includes the Visualforce page for the picker. The main page for the color picker is 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}" } ] }
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.
- 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 first page of the new wizard. “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.”
- Click Looks good, next and go to the next page. Click the first circle to choose a background color for the first dashboard.
“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!”
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
- 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 we describe in the module as well as the color-picker code.