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.
- 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!)
- Download and install <this project> in your designer user.
- 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.
- 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..
- Click the dashboard to open it in the designer
- Notice the yellow errors on each chart
- Click each chart, click Edit Configuration, change Data Source to XYZ. Click Next - next- next (discuss configurations?)
- 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.