How to build a dashboard for corporate sales teams

How to build a sales dashboard for corporate sales teams

Written by Casey Burridge

Last updated:

Categories GravityView

Tags , ,

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.

A sales dashboard, showing graphs ans charts, sales information, a search bar, and a download button

Sales representatives have their own dashboard where they can only see their own metrics.

A sales dashboard, showing graphs ans charts, sales information, and a search bar

Sales reps can also edit information about leads and deals directly from the front end.

An arrow pointing to a link labeled 'Edit Entry'

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”.

A page where users can edit entry details.

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.

A Gravity Forms with fields for company name, contact person, contact person email, amount, date, and status

What you’ll need

Here are the plugins you’ll need to build a dashboard for sales teams like the one in this tutorial:

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.

The Gravity Forms form 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”.

A drop down field labeled 'Number Format'; the drop down is set 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.

An arrow pointing to a button labeled 'Edit Choices'; there are two choices—'Negotiating' and 'Closed'

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:

A Gravity Forms with fields for company name, contact person, contact person email, amount, date, and status

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.

The GravityCharts feed page

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.

The chart data settings in GravityCharts; there is an online to 'Show on Timeline', allowing the creation of timeline charts

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!

The chart configuration panel in GravityCharts; there are tabs at the top for styling and customizing things.

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.

The conditional logic filters in GravityCharts; the condition reads 'Created By – is – Martin'

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.

The View configuration screen in GravityView–there is a drop down for selecting a data source, and a panel for choosing a View Type (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.

The GravityView editor; the 'Top Widgets' area is in View and there is a search bar widget at the top and t

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.

The search bar settings in GravityView

After adding the GravityCharts widget, we’ll need to open the settings and select which chart to display.

The GravityCharts widget settings; there is a dropdown field labeled 'Chart' enabling you to select a 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 'Entries Fields' section of the View editor; here there are fields for company name, contact person, contact person email, amount, sales rep, status

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.

The field settings in GravityView; there is a checkbox labeled 'Add field calculations to the table footer'

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”.

A checkbox 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.

The field settings for the 'Company name' field in GravityView; there is a checkbox labeled 'Link to single entry'

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!

The Single Entry Layout in the GravityView editor; there is an arrow pointing to the 'Link to Edit Entry' field

Configuring the Edit Entry layout

Clicking on the “Edit Entry Layout” tab allows us to specify which fields are editable from the front end. 

The Edit Entry Layout in the GravityView editor

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.

A sales dashboard with a search bar, charts, and table

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.

The GravityView editor; the 'Top Widgets' area in is view. There is a search bar and export link widget at the top, with 4 GravityCharts widgets below, on either side

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.

The advanced filter settings; there is a condition here that reads 'Current User Role – has ANY of – Sales Manager

That’s it! Let’s take a look at the finished sales manager dashboard on the front end:

A sales dashboard, showing graphs ans charts, sales information, a search bar, and a download button

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!