- 08 May 2024
- 3 minute read
- Print
- DarkLight
- PDF
Dashboards
- Updated 08 May 2024
- 3 minute read
- Print
- DarkLight
- PDF
Dashboards are custom summaries of data that can be shown in many areas of Slate. Intended to highlight frequently-needed data, dashboards avoid having to click through various custom tabs or to 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.
In the Reader.
In an Inbox message.
When comparing two records with Consolidate Records.
In Batch Acquire.
Creating a Dashboard
To create a new dashboard:
Click Database on the Slate navigation bar. The Database page appears.
In the Records and Datasets area, select Dashboards. The Dashboards summary page appears.
Click New Dashboard. An Edit Dashboard popup 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 the dashboard query will use. Available bases depend on the Type selected.
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.
✨ 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
Use the Edit Query tab to craft a query to pull and dynamically display any data point on the dashboard.
Select the Edit Query tab within the dashboard’s summary page.
Configure the Exports area to select the data points to display.
If desired, configure the Filters area to limit the displayed records.
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.
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.
Select the Edit Dashboard tab to change how the dashboard appears.
The selected query exports appear on the right side of the page. Drag them onto the editor and add styling.
Click the Source icon on the WYSIWYG editor’s tool bar to add and apply CSS 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 Preview Dashboard popup appears. Enter a name in the Record field. The dashboard appears as it would on that person's record.
✨ TipPerson 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.
Example: Display Staff Assigned on Dashboard
To make an export for staff assigned name:
On the dashboard summary page, select the Edit Query tab.
Add an export for Staff Assigned name.
Rename the export from “Person Staff Assigned” to a computer friendly name, such as “staff_assigned.”
Click the Edit Dashboard tab on the dashboard’s summary page.
Click the Source icon on the WYSIWYG editor’s tool bar. The Source popup appears.
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.
<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: