Are you looking to build a dashboard for teams that caters to different users with different levels of access?
In this tutorial, we’ll show you how to create a sales dashboard for a corporate sales team using Gravity Forms and GravityView. The dashboard will allow sales managers to track sales and revenue metrics while monitoring the performance of their subordinate sales representatives.
This example could be applied to many other use-cases where teams of users are involved that require access to different data. Let’s get started!
Sneak peek
Here’s a preview of our finished sales dashboard! Below is the sales manager’s dashboard, where they can see sales metrics for both sales representatives (Martin and Stephanie) and monitor their performance.
As you can see, there is a search bar at the top, a button to download sales data for reporting, charts showing sales and revenue numbers for both subordinate sales reps (Martin and Stephanie), and then sales and lead data in the table below.
Sales representatives have their own dashboard where they can only see their own metrics.
Sales reps can also edit information about leads and deals directly from the front end.
Having the ability to edit is important for updating contact information, changing the final sale amount, or updating the status of a deal from “negotiating” to “closed”.
When sales representatives land new deals, they can add them to the system through a Gravity Form. When they add the deals, they will automatically show up on the sales dashboard, for both sales reps and sales managers to see.
What you’ll need
Here are the plugins you’ll need to build a dashboard for sales teams like the one in this tutorial:
- Gravity Forms (any license level)
- GravityView Pro
- GravityCharts
- GravityMath (optional)
For access to GravityView Pro, GravityCharts, GravityMath, and a whole lot more powerful plugins, get the GravityKit All Access Pass (Gravity Forms not included).
Creating the lead submission form
The first step is to create a form for sales reps to submit new deals. To add a new form form, we’ll hover over “Forms” in the WordPress sidebar and click “New Form”. Now we can start constructing the form using the Gravity Forms visual editor.
To keep things simple, we’ll add the following fields to our form:
- Company name (Single Line Text field)
- Contact person (Name field)
- Contact person email (Email field)
- Amount (Number field)
- Date (Date field)
- Status (Drop Down field)
These fields will enable sales reps to record their deals, along with the amount that the deal is worth. To ensure the “Amount” field stores the amount entered as a currency, we’ll open the field settings, and change the “Number Format” to “Currency”.
For the “Status” field, we’re going to add two options—“Negotiating” or “Closed”. In our case, a closed deal refers to a deal that is already finalized.
We kept our form relatively simple for this example, but feel free to add any additional fields that you feel are necessary! Here’s what our form looks like on the front end:
The next step is to create the charts we need.
Creating the charts
Before building the dashboards for sales reps and managers, we’re going to create some charts to visualize sales and revenue numbers. We can do this using GravityCharts!
To add a new chart, we’ll go to the form settings, select the “GravityCharts” tab on the left, and click “Add New”. The first thing we need to do is give our chart a name and choose a chart type. For this chart, we’ll choose the “Bar / Column” chart.
Now we can scroll down and begin configuring the remaining settings. First, we’ll change the data type to “Show on Timeline”. This will enable us to show revenue per month, week, day or quarter.
Next, we’ll scroll down to the chart configuration panel. Here, we can style and customize our chart. There is also a live preview here that updates as we make changes!
Finally, we can also add an advanced filter to our chart, enabling us to filter entries by one or more conditions. This is helpful for creating charts for individual sales reps. It goes without saying, but feel free to create as many different charts as you need.
That’s it. After creating our charts, we’re ready to start building our sales dashboard!
Building the dashboard for sales reps
Now that we have our submission form and our charts, we can start putting everything together by building our sales dashboard. The first dashboard we’re going to build is only for sales representatives.
To create a new View, we’ll hover over “GravityKit” in our WordPress menu and click “New View”. After giving our View a name, we’ll select our “New deals” form as the data source (this is the form we created in the first step). Next, we’ll choose “Table” as our layout.
Now we can start adding fields and widgets to the dashboard. We’ll start by configuring the Multiple Entries Layout. Here, we’ll add a search bar widget and two GravityCharts widgets to the “Top Widgets” area.
After adding the search bar widget, we’ll open the widget settings and configure the search inputs. Here we can add search inputs for each field that we want to be searchable from the front end.
After adding the GravityCharts widget, we’ll need to open the settings and select which chart to display.
After configuring our widgets, we’ll scroll down and add our form fields to the “Entries Fields” section. Each field we add here will be a new column in our table.
The “Amount” column will show the amount that the sale is worth. To add up each value for a total revenue figure, we can enable footer calculations for this field. This is a feature offered by our GravityMath add-on.
Finally, because this dashboard is only for sales reps, we’ll add an advanced filter to ensure that reps only see information about deals that they have submitted! In other words, we want to ensure a level of privacy, such that sales reps can’t keep track of each other’s metrics.
To do this, we’ll scroll down to the View settings, and check the box labeled “Show only entries created by the currently logged-in user”.
Configuring the Single Entry layout
Now we can turn our attention to the Single Entry Layout, this is where we can display more info about specific deals and leads. First, we’ll ensure that the “Company name” field links through to the single entry by checking a box in the field settings.
Next, we’ll click on the “Single Entry Layout” tab and add all of our form fields here. We’ll also add a “Link to Edit Entry” field, enabling sales reps to edit deal information from the front end!
Configuring the Edit Entry layout
Clicking on the “Edit Entry Layout” tab allows us to specify which fields are editable from the front end.
Having fields be editable from the front end enables sales reps to update deals if the status changes.
Let’s take a look at our finished sales rep dashboard on the front end. When sales reps log in to the platform, they will only see deals that they have submitted, along with metrics like how much revenue they’ve generated per month and how many sales they’ve closed per month.
Now we can start building the final dashboard for sales managers!
Building the dashboard for sales managers
The sales manager dashboard is going to be very similar with some notable differences. First of all, sales managers will be able to see information about all the deals, no matter which sales rep submitted it. They will also be able to see metrics for each sales rep, enabling them to monitor their performance.
We’ll start by cloning our existing dashboard View. Next, we’ll edit it and start making some important changes.
First, we’ll add an “Export Link” widget underneath the search bar. This will enable sales managers to export sales data for reporting purposes.
Finally, we’ll add some different charts here, enabling sales managers to see sales and revenue metrics for Martin and Stephanie, the two sales representatives.
Finally, we’ll scroll down to the View settings, and click on the “Filter & Sort” tab. Here, we’re going to add an advanced filter, ensuring that only users with the “Sales Manager” role have access to the dashboard.
That’s it! Let’s take a look at the finished sales manager dashboard on the front end:
This is just a simple example of how you can use Gravity Forms and GravityView to build dashboards for teams, with different levels of access.
Create dashboards for teams with different user roles
In this tutorial, we showed you how to create a sales dashboard for a corporate sales team. Our dashboard includes sales and lead data, as well as charts for visualizing revenue and sales numbers per month.
Using Gravity Forms together with GravityKit enables you to create dashboards, directories, and other front-end applications without any code! If you found this post helpful, read our guide to creating a project management system next!
Helpful tips right in your inbox.
Subscribe to our weekly newsletter for tips, special offers, and more!
Helpful tips right in your inbox.
Subscribe to our weekly newsletter for tips, special offers, and more!