Those who need quick access to information can benefit from using a highly customized dashboard on the person record to aggregate key data points from multiple sources. The use of CSS and Translation Codes can provide enhanced levels of visual alerts or indicators. This article provides a process for not only creating the Dashboard, but for adding stylized elements to provide further customization options. A knowledge and review of Translation Codes is very beneficial prior to starting this project.
Creating the Query
- Click Queries / Reports in the top navigation bar.
- Click New Query.
- Enter the following configurations in the popup window:
- Name - Provide a short, descriptive name, such as "Advisor Snapshot" or "Student Success Dashboard." (The query no longer needs to be named strictly as "Dashboard.")
- Sharing - Select "Share query with other users with the query and query base permissions."
- Folder - Select "System." (If the System folder does not yet exist, select "Other," and then enter "System.")
- Base - Select the population desired. This can be Enrolled, Applications, or a dataset. This is very beneficial in a shared database.
- System Key - If the "System" folder already exists in the database, the "System Key" setting appears automatically. Select "Dashboard" for this setting. If the "System" folder was just created, save the query, go back to the Edit screen, and then select "Dashboard" for this setting.
- Select exports for the data to be displayed. Double-click on each export, and give it a computer-friendly name (no spaces, lower case).
Editing the Dashboard
- Follow the breadcrumbs within the query just created, and click Edit Dashboard.
- Apply CSS to the Source.
If desired, copy and paste the following code:
<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> - Add Style Elements.
