Dashboards Tutorial

 

This page is currently under construction.


This tutorial will take you step-by-step through designing a dashboard with a few simple charts. Please keep in mind that dashboards offer a great deal of complex and customizable options, so this tutorial is designed only as a foundation to build familiarity with the Dashboards feature.

Prerequisites

Please ensure you have met the following prerequisites before continuing with this tutorial.

  1. You are already familiar and comfortable designing forms and workflows in frevvo. (If not, we recommend the Workflow Tutorial as a good place to start!)
  2. Download and install <this project> in your designer user.
    1. Run the workflow at least 5 times and enter some sample data. Try to make this data realistic, as this is the data that will be reflected in our dashboards.
    2. Check that you have access to the resulting Submissions and there are no submission errors.

Now you're ready to start!

Create a New Dashboard

Customize the Dashboard Header and Filters

Add Charts

Chart 1 (Column)

Chart 1 Data Configuration

Chart 1 Style Settings

Chart 2 (KPI)

Chart 2 Data Configuration

Chart 2 Style Settings

Chart 3 (Table)

Chart 3 Data Configuration

Chart 3 Style Settings

Test the Dashboard

Edit the Installed Dashboard

As mentioned earlier, your project came with a Dashboard, but it is highlighted in a salmon color indicating an error. This is a typical Dashboard state when deployed from one tenant to another, as is often the case when moving a Dashboard or its project from a development tenant to a production tenant. We will "fix" this error by simply reconfiguring the data source to the workflow you entered sample submission in earlier..

  1. Click the dashboard to open it in the designer
  2. Notice the yellow errors on each chart
  3. Click each chart, click Edit Configuration, change Data Source to XYZ. Click Next - next- next (discuss configurations?)
  4. Save the Dashboard.

Now you'll notice you have a second dashboard that shows examples of a few other chart types: Pie, Radial Gauge, and Radar. You can explore the configuration, edit the data and style settings if desired, and test this dashboard.