Skip to main content

Engage Users with Animated Pages

Break Up the Dashboard Content

How many times have you seen a dense dashboard with so much information that you didn’t know where to focus your attention? Or one that had information that was irrelevant to you? In Analytics, you can break up dashboards into multiple pages, each with a specific focus and audience.

Pages offer some useful capabilities. When you split dashboard content into multiple pages, the dashboard renders faster because each page has fewer widgets. You can reuse widgets across pages in the same dashboard so that you only have to create them once. And when you navigate between pages, you’ll witness some really neat animation. You might add pages just for the animation alone!

Next on your agenda is to break up the Worldwide Fundraising In Progress dashboard so that it’s not so overloaded. You apply some best practices while breaking the content into separate pages.

Create the Donations Page

First, let’s help the team focus on donations with a Donations page. So that we don’t lose any existing work, let’s make the current page our primary page. To create the Donations page, we clone the primary page and remove any widgets that we don’t need. You can save a lot of time by cloning pages instead of creating pages and their widgets from scratch.

  1. Go to the Worldwide Fundraising In Progress dashboard. It should still be in edit mode.
  2. Click the dropdown next to the Untitled tab, select Rename, change the page name to Primary, and click Apply. The dropdown menu open on the Untitled tab allows you to rename, hide from navigation, or clone. The rename option is called out by a rounded rectangle.
  3. To clone the Primary page, click the dropdown next to the Primary tab and select Clone. The dropdown menu open on the Untitled tab allows you to rename, hide from navigation, or clone. The clone option is called out by a rounded rectangle.
  4. Rename the cloned page to Donations. Great! Now you have two pages: Primary and Donations. Currently, you’re viewing the Donations page.
  5. Delete all widgets from the Donations page except the following widgets.
    • Container widget with the dashboard title and company logo that goes horizontal across the top
    • Container widget with the key metrics and global filter panel widget—the vertical column on the left
    • Table widget
  1. The Donations page should look like this. The Donations page in edit mode which contains the title and logo widget, the key metrics widget, and the filters widget. Because the deleted widgets still exist on the Primary page, they aren’t deleted permanently from your dashboard. Later, you add a few of them back to the Donations page.
  2. Add a 16x6 container widget to the right of the Key Metrics container, directly below the Worldwide Fundraising title widget. Do this by selecting Container widget icon, dragging it into place, and then resizing it. The Donations page in edit mode with the new 16 x 6 widget highlighted with a red outline. We’re going to reuse this container widget for each page to ensure we have similar size pages for an animation effect.
  3. Add a Leaderboard link widget by completing the following tasks.
    1. Add a 16x1 link widget ( Link widget icon) below the container widget and set the link name to Leaderboard. The edit pane to the right of the widget is open with Leaderboard entered in the text field. It’s called out by a red box with an arrow pointing to the widget indicating where the text is displayed.
    2. Set the following Text Style widget properties for the link widget.

      Text Style

      Setting

      Color

      A dark forest blue is selected as the Color.

      Size

      20

      Alignment

      Left


    3. Nice work. Don’t worry about linking to anything yet. We’ll set up the links in a bit.
  1. To quickly create two more link widgets, select the Leaderboard link widget, and click the Duplicate Widget button twice. Two copies of the Leaderboard link widget appear at the bottom of the dashboard.
  2. Name the last two link widgets Donations and Pipeline.
  3. Place the Donations link widget at the top of the empty container widget.
  4. Move the Pipeline link widget directly below the Leaderboard widget.
  5. Save the dashboard. The Donations widget is directly under the World Fundraising title and the Pipeline widget is directly under the Leaderboard.
  6. Click the Primary tab, and then select all the following widgets on that page.
    • Goal Attainment text widget
    • Flat gauge chart
    • Cumulative Donations chart
  1. To select multiple widgets, hold down Ctrl for Windows or Cmd for Mac while making your selections. The Goal Attainment text, flat gauge, and Cumulative Donations widgets are called out by a red rounded rectangle with a 1. The Add to Page option is called out by another red rounded rectangle with a 2.
  2. Add the three selected widgets to the Donations page.
    1. With the three widgets selected, click Move/Add at the bottom of the page.
    2. Click Add to Page.
    3. Select the Donations page as the destination.
    4. Select Apply.
  1. The widgets are added to the bottom of the Donations page, which now opens.
  2. In the Donations page, move the newly added widgets into the container widget (under the Donations link widget), and then stretch them to the right to fit. The Goal Attainment text, flat gauge, and Cumulative Donations are placed in the Donations page and stretched to fit the larger container.
  3. Save the dashboard.

Nice work. You now have two pages: one with all the widgets and another specific to donations. The Donations link widget serves as the title for the area inside the container widget. Next, let’s build the Leaderboard page to evaluate account owner performance. We’ll use the Leaderboard link widget as the title for the container widget on this page.

Create the Leaderboard Page

To analyze account owners and compare their performance with others, let’s create a leaderboard. A Leaderboard page can rank account owners. If the director would like to spark some friendly competition, account owners can use this board to see who’s the top performer.

To build the page, we clone the Donations page, remove the donation widgets, and then add the Top Account Owners chart from the Primary page.

  1. Clone the Donations page and call it Leaderboard.
  2. In the Leaderboard page, remove the three donations widgets, but keep the Donations link widget. The Leaderboard page in edit mode. A red box with an X indicating you should remove the Goal Attainment text, flat gauge, and Cumulative Donations widget.
  3. Move the container widget down one row.  To move the other widgets out of the way, press Shift while moving the container. On the Leaderboard page, the container widget is moved down one row, with a red arrow pointing down highlighting the move.
  4. Move the Donations link widget up one row, just above the container widget. The Donations widget has been moved up to fill the empty row.
  5. Move the Leaderboard link widget to top of the container widget to serve as its new title. The Leaderboard link widget has been moved to the top of the container, just under the Donations widget.
  6. To close the gap, move the Pipeline link widget and table up one row.
  7. Add Top Account Owners chart from the Primary page to the Leaderboard page and expand it to fit inside the container. The Top Account Owners chart has been added to the Leaderboard page, called out by a red rectangle.
  8. Save the dashboard.

Great—now you have the Leaderboard page! Next, you finish by creating a Pipeline page. With each step in the process, you make it easier for the team to get value from the dashboard.

Create the Pipeline Page

Using the same process, create the Pipeline page by cloning the Leaderboard page, remove the existing chart and add the pipeline charts.

  1. Clone the Leaderboard page and name the new page Pipeline. All page tabs are now present, with the Pipeline tab highlighted by a red rectangle.
  2. Remove the Top Account Owners chart.
  3. Move the container widget down one row. The container widget has been moved down one row, with a red arrow pointing down indicating the direction.
  4. Move the Leaderboard widget up one row, above the container widget.
  5. Place the Pipeline link widget at the top of the container. The Donation, Leaderboard, and Pipeline link widgets are stacked on top of one another.
  6. Move the table up one row to close the gap.
  7. Add Opportunities by Stage and Opportunities by Quarter charts from the Primary page to the Pipeline page.
  8. Place them in the container widget and resize them to fit. The Opportunities by Stage funnel chart and the Opportunities by Quarter bar chart are added to the container just under the Pipeline link widget, called out by a red rounded rectangle.
  9. Save your dashboard.

Click, click, click—simple. You’re done with the Pipeline page! Now you just need to build a way for users to navigate between pages. Let’s take care of that now.

Make Analytics Fun with Animation

You can use a Navigation widget to allow users to toggle between pages. But to create custom links and a cool, dynamic accordion effect, let’s use the link widgets we created.

In the Donations page, connect the Leaderboard link widget to the Leaderboard page by modifying the link widget properties.

  1. In the Donations page, select the Leaderboard link widget.
  2. In the Link To field in the widget properties, select Page in Layout and in the Page field, select Leaderboard. The Donations page in edit mode, with the Leaderboard link widget selected, and the Link To and Page fields called out with a red round rectangle.
  3. Similarly, connect the Pipeline link widget to the Pipeline page.
  4. Then, connect the Donations link widget to the Donations page.  Why do we need to connect the Donations link if we are already on the Donations page? That’s because the link widget is reused on the Leaderboard and Pipeline pages. We need to link those pages back to the Donations page.
  5. Save the dashboard.
  6. To test out the links, click Preview, and then click the Donations, Leaderboard, or Pipeline links. Notice how the sections expand and collapse as you select each one—that’s the accordion effect!
  7. Click the Edit button to continue editing the dashboard. When you first open a multipage dashboard, by default, the dashboard shows the first page. In this case, it’s Primary. We don’t want users to see the Primary page since all of its content is now available on the other pages. Let’s move the Primary page from the first position so that the Donations page opens by default.
  8. Click the dropdown next to Primary, and click Move Right. Repeat this step two more times to make Primary the last tab. Because the Donations page appears first when you open a dashboard and there’s no link to the Primary page, users can’t access the Primary page while viewing the dashboard. Neat trick, right?
  9. Save the dashboard.

Excellent! Instead of creating three separate dashboards, we used three pages, which allowed us to reuse widgets. We used similar layouts on the pages to create a neat accordion effect that shows and hides widgets.

What’s next? The director wants a way to quickly compare each account owner against the team’s average performance. Head to the next step to learn how to accomplish this task.

Resources

Condividi il tuo feedback su Trailhead dalla Guida di Salesforce.

Conoscere la tua esperienza su Trailhead è importante per noi. Ora puoi accedere al modulo per l'invio di feedback in qualsiasi momento dal sito della Guida di Salesforce.

Scopri di più Continua a condividere il tuo feedback