Use VisualForce To Customize the Wizard UI

To customize wizard appearance beyond the default interface, use VisualForce and a JavaScript library.

CRM Analytics runs the wizard before generating the app from the template. The wizard consists of a set of pages, each of which contains questions or other elements you use to set up the app.

The framework lets you run a custom APEX class at any time during app creation. This class can answer questions about the org automatically or validate the org to ensure it meets the requirements to create the app. CRM Analytics uses a default format for the error messages generated by the validation process. VisualForce and a JavaScript library lets you customize the format and include links to help the admin edit the org to meet app-creation requirements.

VisualForce lets you replace any or all of the autogenerated wizard pages with a custom VisualForce page that can display anything you want. The illustration shows how you can integrate a custom VisualForce page into the app creation flow.

This diagram depicts integrating a custom VisualForce page into the default framework.

The VisualForce renders everything inside the red lines in the example wizard shown here. It interacts with the wizard through a JavaScript SDK.

This diagram depicts the VisualForce page.

The JavaScript SDK is essentially be a pub/sub eventing mechanism with a set of events fired and consumed during a well-defined lifecycle. The SDK is versioned and can be included in any VisualForce page as follows:

1<script type="text/javascript"
2src="/analytics/wave/sdk/js/<_version_number_>/wizard.js"></script>

Here’s example code for the VisualForce page:

1// Subscribe to event that gets fired when the page first loads
2Wave.wizard.publish(
3   {name : 'wizard.ready', "payload" : {}, callback : function (response) {
4var payload = response.payload;
5var metadata = {
6   page : payload.page,
7   variableDefinitions : payload.variableDefinitions,
8   values : payload.initialValues
9}
10   }});
11
12// Update and validate a single answer to a question
13Wave.wizard.publish({
14   name: "wizard.update",
15   payload: {name: "Fiscal_Month", value: "01 - January"},
16   function(response) {
17       var errors = response.payload;
18   }
19});

Declaring the VisualForce Page in ui.json

In order to replace the default rendering of a wizard page the application developer simply specifies the Visualforce name in ui.json page as follows:

1"pages" : [
2   {
3       "title": "These questions focus on how CRM Analytics displays data for Accounts”,
4"variables": [
5           { "name": "Customer" },
6           { "name": "Customer_L2" },
7           { "name": "Source" },
8           { "name": "Geo_Maps" },
9           { "name": "Geography" },
10           { "name": "Geography_L2" }
11       ],
12       "vfPage":{
13           "namespace": "<visualforce_namespace>",
14           "name": "<visualforce_page_name>"
15       }
16      
17   }]

Make sure any Visualforce page included in a class can be accessed by users in the organization with Manage Analytics Templated Apps user permission. Otherwise, trying to create an app from your template results in an error. In Setup, go to Visualforce Pages, click Security next to the page, then add the profile with the Manage Analytics Templated Apps user permission.

Important

Refer to the “VisualForce Events for Customizing the Wizard UI” reference section at the end of this guide for details on the events to which you can subscribe or publish.