---
title: "Dashboards"
slug: "records-dashboards"
tags: ["dashboards"]
updated: 2026-04-06T22:11:36Z
published: 2026-04-06T22:11:36Z
canonical: "knowledge.technolutions.net/records-dashboards"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://knowledge.technolutions.net/llms.txt
> Use this file to discover all available pages before exploring further.

# Dashboards

**Dashboards**are custom data summaries that you can add to many Slate tools.

![Example Dashboard - Prospects, Inquiries, Applicants.png](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/17877478748699.png)

Dashboards are intended to highlight frequently-needed data, and as such can consolidate multiple custom tabs and alleviate the need for repetitive queries.

Dashboards can be customized with HTML, CSS, and [advanced Liquid markup](/v1/docs/advanced-liquid-markup).

## Dashboard locations

You can add dashboards:

- On the **Dashboard** tab of a person or dataset record
- In the Reader
- In an Inbox message
- When comparing two records with Consolidate Records
- In Batch Acquire

## Creating a dashboard

To create or edit a dashboard, go to **Database** → **Records and Datasets** → **Dashboards**. Select one of the location filters on the right to narrow the list.

[![Dashboard Editor.png](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/17921468183451.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/17921468183451.png)

To create a new dashboard:

1. Click **Database** on the Slate navigation bar.
2. In the **Records and Datasets** area, select **Dashboards**.
3. Click **New Dashboard**to access the **Edit Dashboard** popup.
4. Configure the following settings:
  - **Name:** Enter a short, descriptive name, such as "Prospect Snapshot."
  - **Type:** Select a location in which the dashboard should appear. Options include:
    - Batch Acquire
    - [Consolidate Records](/v1/docs/consolidate-records-custom-dashboard)
    - First Draft
    - Inbox
    - Reader
    - Record (used in this example)
    - Research
    - Slate Voice
    - User
  - **Base:** Select the base the dashboard query will use. Available bases depend on the **Type** selected.
  - **AI Dashboard:** Select to create an [AI Dashboard](/docs/ai-dashboards).
5. Click **Save**. The dashboard’s summary page appears.

## Editing a dashboard

Two tabs are available on the dashboard’s summary page: **Edit Dashboard** and **Edit Query**.

### Edit query tab

Use the **Edit Query** tab to craft a query to pull and dynamically display any data point on the dashboard.

1. Select the **Edit Query tab** within the dashboard’s summary page.
2. Configure the **Exports** area to select the data points to display.
3. If desired, configure the **Filters** area to limit the displayed records.
4. Double-click each export and give it a computer-friendly name (lower case, with no spaces or special characters other than underscores or hyphens). Alternately, you can hover over the export name and click the pencil icon to edit the export.

![](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/image-1707400646237.png)

> [!TIP]
> ✨ Tip: Keep it Simple
> 
> While dashboards can display any data point, be careful not to fill them with so much information that it detracts from quick digestion of high-level details. A simple test is to ask the question, “If the student walks into the office, what information would I need to know immediately?” Often, it’s only a handful of critical data points.

### Edit dashboard tab

Use the **Edit Dashboard** to craft the dashboard’s appearance. The dashboard editor uses the same what-you-see-is-what-you-get (WYSIWYG) editor used in other areas of Slate.

1. Select the **Edit Dashboard**tab to change how the dashboard appears.

![](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/image(207).png)
2. The selected query exports appear on the right side of the page. Drag them onto the editor and add styling.
3. Click the Source icon on the WYSIWYG editor’s tool bar to add and apply CSS styling.

[![Dashboard Source](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/dashboard_source.jpg)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/dashboard_source.jpg)

```xml
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title></title>
	<style type="text/css">.dash_table {
		    display: flex;
      		flex-flow: row wrap;
		    justify-content: flex-start;
    		align-content: flex-start;
		}
	</style>
	<style type="text/css">.dash_table > div {
	    	margin: 8px;
		    padding: 15px;
    		box-sizing:
	    	border-box;
		    width: 175px;
		}
	</style>
</head>
<body>
	<div class="dash_table">
		<div>
			<b>Staff Assigned</b>
			<div style="font-size:1.25em;margin:5px 0;">
				{{staff_assigned}}
			</div>
		</div>
	</div>
</body>
</html>
```

### Preview record dashboard

Click **Preview Dashboard.**A **Preview Dashboard** popup appears. Enter a name in the **Record** field. The dashboard appears as it would on that person's record.

> [!TIP]
> ✨ Tip
> 
> Person record dashboards can also include iframe elements. Any embedded portal from an external system can appear dynamically on the record. This includes other dashboards, videos, data tables, and more.
> 
> ![Sample Dashboard - Staff Assigned.pn](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/17935807341211.png)
> 
> *Sample dashboard element provided in this example*

### Example: Display Staff Assigned on Dashboard

To make an export for **staff assigned** **name:**

1. On the dashboard summary page, select the **Edit Query** tab.
2. Add a subquery export****for **Staff Assigned** name.
3. Join from Person to Staff Assigned
4. Select **Full Name** as the Export to display the users name instead of just their username.
5. Rename the subquery export to a computer friendly name, such as “staff_assigned.”
6. Click the **Edit Dashboard** tab on the dashboard’s summary page.
7. Click the **Source** icon on the WYSIWYG editor’s tool bar. The **Source** popup appears.
8. Replace the code in the source editor with the following code (this example uses the “staff_assigned” export), which renders as a block displaying the person’s assigned staff member.

```xml
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">.dash_table {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-content: flex-start;
}
</style>
<style type="text/css">.dash_table > div {
 margin: 8px; 
padding: 15px; 
box-sizing: 
border-box;
width: 175px;
}
</style>
</head>
<body>
<div class="dash_table">
<div>
<b>Staff Assigned</b>
<div style="font-size:1.25em;margin:5px 0;">
{{staff_assigned}}
</div>
</div>
</div>
</div>
</body>
</html>
```

## Additional examples

For additional examples and instructions on creating dashboards, refer to the following articles:

- [Creating a Custom Constituent Dashboard for Advancement](/v1/docs/creating-a-custom-constituent-dashboard)
- [Creating a Custom Giving Dashboard for Advancement](/v1/docs/creating-a-custom-giving-dashboard)
- [Creating a Custom Dataset Dashboard for Advancement](/v1/docs/advancement-dataset-dashboard)

## Related

- [Advanced Liquid Markup](/advanced-liquid-markup.md)
