Custom dashboards are a powerful way to analyze workplace data but may require help from a data analyst, especially for more advanced setups. Envoy Support can assist with general questions but will not be able to build or customize dashboards for admins.
Overview
A dashboard usually consists of various elements organized on one page or spread over several pages. There are three element types: UI elements, data elements, and control elements. Each serves a unique purpose, and together, they enable you to display, interact with, and enhance your data with additional context. This article will cover these elements.
✨Before moving on, make sure you've already read Custom Dashboards: Getting started to understand the basics of custom dashboard building!✨
Page overview
The page overview lists all current elements included on the custom dashboard. Clicking on an element listed will highlight the element on the page and open the element properties options on the left-hand side. You can make changes to the element here.
Adding Elements to your custom dashboard
To add a data element to your dashboard:
Select + Add element in the upper left-hand corner of the dashboard builder.
Under Add New Element, select the type of element you want to add.
Click or drag the element onto the dashboard. Don't worry if positioning isn't perfect, you can always make adjustments after the initial placement.
If not automatically selected, you can click on the element to view the Element properties.
UI Elements
Text
Text UI elements allow you to add titles and captions to your dashboards. You can choose the size and style.
The text can include dynamic content from formulas.
Dynamic content
Place your cursor where you want to insert the dynamic text, then enter = or select Formula (fx) in the toolbar. Think of these like the variables used in Visitor emails or in Emergency notifications - they change depending on the context.
An example of this UI type is the figures used on the Strategic Insights dashboard, which are calculated based on the input controls.
Image
You can add an image to your dashboard by uploading or referencing a URL. Go to Images settings to change how images fit within the dashboard container.
Button
A button directs users to an external website URL. There are also customization options for button title and style.
Appearance: Select a button style (filled, outline, or text only).
Text: Add a label or call to action (CTA) to display in the button. Enter
=to include a dynamic value defined by a formula expression.Style: Customize the font weight, font color, and fill color.
Alignment
Horizontal: Aligns or stretches the button relative to the total element width.
Vertical: Aligns the button relative to the total element height.
Shape: Select a button shape (square, round, or pill).
Size: Select a button size (small, medium, or large).
Divider
A divider visually partitions elements or groups of elements on a page. These can be any color.
Dividers are used on most of Envoy's pre-built analytics dashboards to keep visual cleanliness.
Embed Element
An embed element adds a webpage, video, or other dashboard to a page. Any iFrame-enabled URL can be embedded. Use control variables within your embed URL to customize what content is displayed according to different inputs.
Plugins
Not currently available.
Data elements
Data elements are built directly from a data source and include tables, pivot tables, and charts.
Although each data element displays data differently, the underlying data is always tabular and column-based. To understand the structure of visualized or pivoted data, you can view the underlying data for the selected element.
Table
Tables are the fundamental way to interact with data in Envoy's customizable dashboards. If you're familiar with traditional spreadsheet tools, you might be accustomed to working with data and formulas in cells. Envoy's tables resemble spreadsheets, but data is managed at the column rather than the cell level. Consequently, calculations and formatting changes are applied to every cell within a column.
You can also organize columns in tables, simplifying the process of performing aggregations at various levels without the need to create a complicated pivot table.
Creating a table
Select + Add element, then select Table.
Next, you'll need to select the data source.
Suggested: These data options are automatically generated.
Elements: Select from data sets already used on the current page.
Tables and Datasets: Navigate to Workspaces > *Location Data Sources* and select the Product area - Attendance, Deliveries, Desks, Occupancy, Rooms, Strategic Insights, Visitors.
Preview the data to see the columns included.
Pivot table
Pivot tables allow you to organize and summarize your data effectively. They enable you to display your data in two dimensions, automatically summarize it by groups, and explore various hierarchies.
The "Weekly Attendance details by employee" chart on the Attendance dashboard is an example of a pivot chart.
Creating a pivot table
Navigate to + Add element, then select Pivot table.
Next, you'll need to select the data source.
Suggested: These data options are automatically generated.
Elements: Select from data sets already used on the current page.
Tables and Datasets: Navigate to Workspaces > *Location Data Sources* and select the Product area - Attendance, Deliveries, Desks, Occupancy, Rooms, Strategic Insights, Visitors.
Once your data is connected, you'll need to organize it. Drag columns into the Pivot Rows, Pivot Columns, and Values sections.
Charts
See main article: Custom Dashboards: Chart types
Charts and visualizations are wonderful graphical elements that bring your data to life! They help you to create, explore, and view your information in a way that's more engaging and easier to understand.
Creating a chart
Navigate to + Add element, then select Chart.
Next, you'll need to select the data source.
Suggested: These data options are automatically generated.
Elements: Select from data sets already used on the current page.
Tables and Datasets: Navigate to Workspaces > *Location Data Sources* and select the Product area - Attendance, Deliveries, Desks, Occupancy, Rooms, Strategic Insights, Visitors.
Once your data is connected, you'll need to organize the data to be displayed. Click and drag the appropriate columns into the X-Axis or Y-Axis.
Depending on your desired result, you can add data columns as needed.
Creating a chart as a child visualization
If you have an existing table or pivot table you want to visualize, you can create a chart directly from that element.
Navigate to the table you want to base your chart on.
The element controls will appear in the upper right-hand corner. Click on the chart icon.
Select which child element you wish to create: Chart, Table, Pivot table.
Your newly created element will appear under the "parent" table. It won't be populated yet, so you'll need to define the X and Y axes.
Control Elements
Control elements can be added to a dashboard to allow admins to customize the data they see. For example, the Attendance goals input on our Attendance dashboard is a slider input with text input control elements. This allows admins to test different attendance scenarios.
There are many different kinds of control elements you can use to build your dashboards.
Control Element Settings
To configure the control behavior, click Settings, and choose the attributes of the segmented control.
You can populate the values used by a segmented control in different ways:
Create a manual list. For your control to work, the list must correspond with the data in the target data elements.
Ex. Employee names must match to reference 'Host name' data.
Create a list from a preset defined. Options are Weekday, Month, and date parts.
Use a column from your data. The first 7 values in the column are used for the control. You can change the sort order to modify which column values are used.
Ex. Using the table Employee Attendance Entries, you could use columns such as Entry Weekday, Department, Sign-in Method, and Manager.
Targets
After creating a control element, you can define which elements it applies to. For example, our Visitor traffic chart uses a Top N control element to target a pivot table and organize it into 24-hour blocks.
A control element does not require targets, but that is the most common use. For example, you can use a control element without targets as a parameter, passing a selected or inputted value to a formula for a calculated column or a custom SQL statement. This is done on our Strategic Insights dashboard, which uses the control inputs to calculate and display real estate costs.
List values
Include or exclude selected values in a list.
Input type: List of selectable values.
Available lists: Create a manual list, create a list from preset, or use the data sources to build around the data connected to the current dashboard.
Supported data types: Text, Number, Date, Boolean.
The Weekday input is an example of a list value control type.
Text input
Include or exclude text that is input into this control variable.
Input type: Enter text in a text box. If the option is shown, the user can select an operator.
Supported data types: Text
Parameter output type: Single value text string. Operators are not available with the control value.
Operators: Equal to, not equal to, contains, does not contain, starts with, does not start with, ends with, does not end with, like, not like.
Examples:
View data for host names that start with "Jessica".
View data where the visitor_type does not contain "Vendor".
Text area
Search for full and partial matches between the inputted text and the targeted data values. Also useful for providing text input to a formula by referencing the control as a parameter.
Input type: Enter text into a text area.
Supported data types: Text
Parameter output type: Single value text string.
Segmented control
Provide a single-select limited set of options for users to select from.
Input type: Select a segment.
Supported data types: Text, Number, Date, Logical
Parameter output type: Single value of data type selected.
Examples:
Grouping employee sign-ins by method, department, or primary location.
Number input
Enter a single number to filter a data element or use as a parameter in custom SQL or a formula.
Input type: Numeric input box.
Supported data types: Number
Parameter output type: Single value number.
Examples:
Test attendance adherence by setting different onsite goals.
View capacity data for days where over 50 people were onsite.
Number range
Enter a minimum number and/or a maximum number for a range to filter the results in targeted data elements. The range includes the numbers entered.
Input type: Minimum and maximum input boxes.
Supported data types: Number
Parameter output type: One minimum number, one maximum number.
Slider
Select a number from a specific range using a slider. Similar to the number input control, the slider option lets you restrict the available input options.
Input type: Move a slider.
Supported data types: Number
Parameter output type: Single value number.
Examples:
Onsite days per week.
Real Estate cost per Square foot.
Range slider
Specify a number range within a designated range using a slider. Like the number range control, the range slider lets you restrict the available input options.
Input type: Slider with two points.
Supported data types: Number
Parameter output type: One minimum number, one maximum number.
Examples:
Onsite days per week, limited to 0-5.
Date
Choose a single date to filter a column or use as a parameter. Both fixed (2024-12-12) and relative (Now minus 7 days) dates are supported.
Input type: Calendar date picker.
Supported data types: Date
Parameter output type: Single value date.
Examples:
See visitors from June 25 2023.
Date range
Select a date range to use to filter a targeted data element or use the selected date range as a parameter, for example, to filter a custom SQL statement. The selected range includes the endpoints. Fixed and relative date ranges are supported.
Input type: Calendar date picker for minimum and maximum values.
Supported data types: Date
Parameter output type: One minimum date, one maximum date.
Examples:
View visitors from the last 30 days (this is the default on the Visitors analytics dashboard.)
Top N
Limit the available data according to a ranking, such as top 15 or bottom 10%.
Ranks and limits data in the column based on your specifications.
Input type:
Rank order and direction
Numeric input
Supported data types: Text, Number, Date
Parameter output type: Single value of data type inputted. The operator (Top, Bottom) is not included in the output.
Examples:
Top 10 Visitors
Top 10 Hosts
25 Most booked desks
Drill down
This control lets a user drill into a pre-defined data layer, such as one level higher or lower in data granularity. A drill-down control enables double-click to drill.
Input type: Clickable text.
Supported data types: Text, Number, Date, Logical
Parameter output type: Single value, Text. Matches the column name for the selected drill category.
Examples:
Viewing the employee entries chart by Day, week, or month.
Switch
Turn on or turn off a toggle switch to let users choose between True (turned on) or False (turned off) values.
Input type: Toggle switch
Supported data types: Logical
Parameter output type: Logical (Boolean)
Examples:
Choose whether to display a list of all employees, or only employees who have complied with an attendance policy.
Checkbox
Select or deselect a checkbox to represent True (selected) or False (deselected) values.
Input type: Checkbox
Supported data types: Logical
Parameter output type: Logical (Boolean)
Examples:
Choose to display whether an employee checked into the workplace or not.
Legend
Add a legend to use for one or more charts.
Input type: Select legend items.
Supported data types: Text, Number, Date, Logical
Parameter output type: Array of data type selected.
Examples:
Apply the same chart colors across multiple charts.
Moving, re-sizing, and deleting elements
Moving
To move an element, just use the toggle on the right-hand side of the element. You should notice your cursor turn into a hand when selecting the toggle.
Re-sizing
Change the size of an element by clicking and dragging on the edge of the container. When selecting the edge, your cursor will change from a pointer to a horizontal sizer.
Deleting
To remove an element, click on the upper right-hand side of the container and select Delete element.
