- 22 Apr 2024
- 3 minute read
- Print
- DarkLight
- PDF
Dashboards
- Updated 22 Apr 2024
- 3 minute read
- Print
- DarkLight
- PDF
Dashboards are custom summaries of data that can be shown in many different areas of Slate. Dashboards are intended to highlight frequently-needed data, alleviating the need to click through various custom tabs or query on a specific data point. Dashboards can be customized further using HTML, CSS, and advanced liquid markup.
Dashboards can be created to appear:
On the “Dashboard” tab of a person or dataset record
Within the Reader
Within an Inbox message
While comparing two records within Consolidate Records
Within Batch Acquire
Creating a dashboard
To create a new dashboard:
From the main navigation, select Database.
Under Records and Datasets, select Dashboards.
Click New Dashboard. A pop-up appears.
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
First Draft
Inbox
Record (used in this example)
Research
Slate Voice
User
Base: Select the base on which the dashboard query should run. Available bases depend on the selected type. In this example, we've selected Person.
Click Save.
After saving, you are redirected to the Edit Dashboard page.
Editing a dashboard
Two tabs are available: Edit Dashboard and Edit Query.
✨ Tip: Keep it SimpleWhile 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 Query tab
The Edit Query tab lets you craft a Configurable Joins query that can pull and dynamically display on the dashboard any data point in your database.
Select the Edit Query tab within the Dashboard tool.
Select exports for the data to be displayed.
If desired, add filters to limit the records the Dashboard is displayed on.
Double-click each export and give it a computer-friendly name (no spaces, lower case).
✨ Tip: If you have multiple dashboards, use filtersFor any single dashboard tab on a record, only one custom dashboard can be displayed. If a record meets the criteria for multiple dashboards, Slate will randomly select a dashboard to display. Use filters to ensure only a single dashboard appears.
Edit Dashboard tab
The Edit Dashboard tab lets you craft the appearance of the dashboard. The Dashboard Editor uses the same “What-You-See-is-What-You-Get” (WYSIWYG) editor as many other areas of Slate.
Choose the Edit Dashboard tab to change how the Dashboard will display.
Your exports from your query are shown on the right side of the screen. You can drag-and-drop them into your dashboard and add styling.
Apply CSS to the Source to add styling.
<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 style="border: 1px solid #ccc; padding: 10px; border-radius: 5px;"> <b>Merge Field Label</b> <div style="font-size: 1.25em; margin: 5px 0;"> {{merge-field}} </div> </div>
Preview Record Dashboard
Click Preview Dashboard. A pop-up appears. Enter a name in the Search Records field. The dashboard element appears below as it would on that person's record.
✨ TipPerson Record dashboards can also include iFrames. Any embedded portal from an external system can appear dynamically on the record. This includes other dashboards, videos, data tables, and more.
Example: Display Staff Assigned on Dashboard
To make an export for staff assigned name:
In the Edit Query tab, create a join from Person to Staff Assigned.
Add an export for Staff Assigned Name.
Rename the export to a computer-friendly name. In the example code below, staff_assigned is used.
Then, paste the following sample code in the source editor of your dashboard. It renders as a block that displays the applicant's assigned staff member.
<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 them, see the following articles: