Salesforce Dashboards

Goal: Create an interactive Salesforce dashboard component from a Skuid page.

image0

Instead of just having a static “Top 5 Open Deals” report on your dashboard, use Skuid to create a dynamic dashboard component that allows you to filter and search opportunities right on the dashboard.

Step 1: In the Pages tab, go to the Skuid page you want to display in your dashboard and click Clone.

image1

For this example, we’re going to use an Opportunity Tab page. This page from this tutorial includes lots of buttons and actions that are useful for a tab page but would clutter up a dashboard component. So we’ll clone this page to create a more Dashboard-friendly version.

Name your Clone Page, and click Create.

image2

  1. Name your page something useful, like “OpportuniitesDash.” Don’t use spaces in your Page Title.
  2. You can change the Page Owner here, if desired. Start typing a user or a group name and then select the new owner from the list.
  3. Click to Create Cloned Page.

Step 2: Clear unwanted Page Properties.

image3

  • Deselect “Show Header” and “Show Sidebar.”
  • Since page will appear in a dashboard, you can also clear “Tab to Override”

Step 3: Remove all non-crucial components.

image4

Our Opportunities Tab page contains a Page Title and a Table component. We’ll remove the Page Title component.

  1. Click on the component’s blue title bar.
  2. Click Remove.

Step 4: Streamline Table.

image5

  1. Click on the Table title bar.
  2. Deselect “Allow Inline Record Creation,” “Show Save/Cancel,” and “Show Export Button.”

Although it is possible to create, edit, save, and export records from the dashboard using Skuid, it’s better to use your dashboard components solely for displaying information.

A. Remove all table actions.

image6

While table actions will still be able to function in a dashboard, they take up valuable space that is better used to summarize data

  1. Click on an action.
  2. Click on to remove it.
  3. Repeat for all other table actions.

B. Remove all non-crucial fields from your table.

image7

Click on a field and click to remove it. In this example, we’re removing all fields except Opportunity Name, Amount, and Close Date. We don’t have to include Stage and Lead Source in the table because we have filters on those fields.

C. Condense your table filters by making option labels shorter.

image8

  1. Click on a filter.
  2. Shorten your Option names as much as possible (e.g., change “All Closed Opportunities” to “Closed”).

Step 5: Edit your Model properties.

image9

  1. Click Models.
  2. Click on your Opportunity model.
  3. Click Advanced and optimize your Model for dashboard: we’ll choose a low max # of records (5), and we’ll choose to order records by Amount DESC (amount descending i.e. highest to lowest).

Step 6: Click to Save your Page.

image10

Step 7: In Setup, click to create a new Visualforce Page.

image11

  1. Click on Your Name > Setup.

  2. Click Develop > Pages.

  3. Click to create a New Visualforce page.

    Note

    There are required steps that must be completed before the skuid:page Visualforce component can be effectively used. Be sure to read the skuid:page Visualforce component prerequisites section before you start building.

Create and paste your VF Markup.

Create your Visualforce markup based on the examples listed in the Object/Controller-independent pages section, and paste them into the Visualforce Markup pane.

Step 8: Click on the + Tab.

image13

Click Dashboards.

image14

Step 9: Clone or edit an existing Dashboard, or create a New Dashboard.

image15

  1. Click to Search for and view the Dashboard you want to edit/clone.
  2. Click Edit or Clone.
  3. If you want to create a new Dashboard, click “Go to Dashboard LIst” and then click “New Dashboard…”

Step 10: In the Data Sources tab, drag and drop your new Visualforce page into the dashboard.

image16

  1. Open the Data Sources tab.
  2. Locate the Visualforce page you created in Step10.
  3. Drag and drop your Vf page into the appropriate column.

Step 11: Configure column and component properties.

image17

You can click to resize the column.

Delete the long url in the header area.

image18

image19

Step 12: When you’re ready, click to Save the Dashboard.

image20

Name the Dashboard and click Save and Run.

image21

Result: Your interactive dashboard component will be displayed. Click to filter and to search on all your opportunities.

image22