---
schema_version: "1"
id: 5483fc7b5dd846ee9d18307248f15ba4ae4b6e9010f597220156142c38a3e53b
title: Use VisualForce To Customize the Wizard UI
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/analytics/bi_dev_guide_wave_templates/guides/concept/bi-templatesdev-creating-custom-wizard-vf.md
canonical_url: https://developer.salesforce.com/docs/analytics/bi-dev-guide-wave-templates/guide/bi-templatesdev-creating-custom-wizard-vf.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: f2e365ec041aba4d9d3adfae412c34a32e414f578e81fd43dbf219a56e6a150d
products:
  - Analytics Templates Developer Guide
  - analytics
---

# 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.](https://developer.salesforce.com/media/bi_dev_guide_wave_templates/bi_templatesdev_integrating_vf_in_flow.png)

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.](https://developer.salesforce.com/media/bi_dev_guide_wave_templates/bi_templatesdev_vf_page.png)

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:

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

Here’s example code for the VisualForce page:

```nolang
// Subscribe to event that gets fired when the page first loads
Wave.wizard.publish(
   {name : 'wizard.ready', "payload" : {}, callback : function (response) {
var payload = response.payload;
var metadata = {
   page : payload.page,
   variableDefinitions : payload.variableDefinitions,
   values : payload.initialValues
}
   }});

// Update and validate a single answer to a question
Wave.wizard.publish({
   name: "wizard.update",
   payload: {name: "Fiscal_Month", value: "01 - January"},
   function(response) {
       var errors = response.payload;
   }
});
```

## 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:

```nolang
   "pages" : [
   {
       "title": "These questions focus on how CRM Analytics displays data for Accounts”,
"variables": [
           { "name": "Customer" },
           { "name": "Customer_L2" },
           { "name": "Source" },
           { "name": "Geo_Maps" },
           { "name": "Geography" },
           { "name": "Geography_L2" }
       ],
       "vfPage":{
           "namespace": "<visualforce_namespace>",
           "name": "<visualforce_page_name>"
       }
      
   }]

```

**important:** 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.

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.