- 22 Feb 2024
- 11 Minuten zu lesen
Airtable interface layout: Dashboard
- Aktualisiert am 22 Feb 2024
- 11 Minuten zu lesen
All plan types
Please consult this support article for a breakdown of Interface Designer permissions.
Web/Browser, Mac app, and Windows app
Airtable interface dashboards allow users to communicate summaries of important information to various stakeholders across their organization. Another powerful aspect of interface dashboards is the ability to drill down into various charts or tables and get past the high-level information presented at first glance. This is particularly important for the following stakeholder groups:
Leadership: reporting on the progress or status of a workstream via a dashboard gives the leadership a bird’s-eye view of the workstream without having them be bogged down by unnecessary details.
Partner groups or teams: Giving updates to partners via dashboards helps them capture the information at the right altitude without having to know all the details.
There are two high-level use cases for dashboards:
Reporting: Tracking progress at regular intervals and providing clarity, often answering to stakeholders and executives.
Example: initiatives dashboard showing progress against quarterly goals and projects that are behind schedule
Monitoring: Understanding the current state of an initiative or part of a business, with a particular focus on anything unexpected.
Example: capacity planning dashboard that shows the utilization of team members’ time over the next two weeks
Adding a new dashboard interface page
Interface layouts are the design framework within a given interface page. The Dashboard layout provides a way to present data as insights to different audiences across your organization. This layout type is heavily based on numbers and graphs.
With the interface editor open click the + sign on the left side of the screen to add a new interface or page. If you add a new interface, then you need to name the interface and pick an icon before moving to the next step.
Next, you’ll be brought to the layout picker. Choose the Dashboard option and click Next.
Then you will choose the table where the dashboard will source data from the underlying base. After choosing the table from the dropdown, click Finish.
Now is a good time to retitle the interface page and/or allow end users to print the page.
Configuring a dashboard layout
Once you have added a new dashboard, it’s time to customize it. The layout can be comprised of one or more dashboard groups, with each group attached to a single table from the underlying base. Once you have fully configured the interface, remember to click the blue Publish button within the interface editor to make the configured interface page visible to end users.
General dashboard configuration
First, give your dashboard a name and a description.
When hovering over the dashboard you’ll see + buttons appear in different locations on the canvas. There will be different options based on where the + button is on the canvas, but within a dashboard group you can expect these general options:
Number - Show a count or summary of records depending on filters.
Chart - Show a chart to give insights into the underlying records in a connected table.
List - Show a list of records from the underlying table. This is especially useful when grouping records (ex. status field).
Timeline - Show a timeline of events based on a start date field and optional end date field.
We’ll cover more about each option’s settings below, but you can set a title, filters, appearance, and other settings from the properties panel on the right side of the page when you’ve clicked on a particular insight shown on the dashboard.
You can also add groups to the page. These groups can source their data from different tables from the underlying base.
Configuring dashboard groups and adding new dashboard groups
In between existing dashboard groups or at the bottom of the dashboard layout, you’ll see the + Add group option appear when hovering over the line break on the canvas. Click this to create a new dashboard group. Keep in mind that individual dashboard numbers, graphs, lists, and timelines have additional settings to configure. These settings exist at the dashboard group level above those settings:
Data - Here you can choose the source table for all of the dashboard elements that you add to the group.
Appearance - Adjust the width of the entire dashboard group and toggle whether there is a background color for the group.
Filters - Set up one or more conditions or conditional groups to hone the insights of any visualizations in the group. The elements section allows builders to give end-users different views/insights of the information in the dashboard group through tabs or dropdowns. More information about tabs and dropdowns is available in the “Step 3: Configure filters” portion of this article.
Actions - Builders can also allow end users to set their own filtering conditions by toggling the Filter option or configure one or more buttons that end users can click to perform some kind of action (only the “Go to interface page” or “Go to external URL” options are supported in dashboard groups).
Understanding and configuring dashboard visualization properties
Title - Alter the label shown next to the number you are configuring. The title and description of numbers will also appear as the title of the side-sheet whenever users click to see underlying data.
Subtitle - Give the number even more context for end users.
Source - This option can’t be changed for numbers. To change the table for a number you’ll need to add a new group to the dashboard to source data from a different table.
Filters - Set up one or more conditions or conditional groups to hone the insight that the number is showing.
Appearance - Choose whether the number is a Count or a Summary. Counts will be shown as an integer representing the number of records in the underlying table that match the filters you’ve set. A summary will look at the values in a particular field and then summarize them in a certain way depending on what the field type is and which “Summary type” is set. You can also configure the color of the number and whether or not it has a background color enabled.
User actions - You can also allow end users to click on the number to open up a record detail page by toggling the “Click to see underlying records” option. More information is available here.
Title - Alter the label shown next to the chart you are configuring. The title and description of charts will also appear as the title of the side-sheet whenever users click to see underlying data.
Description - Give the chart more context for end users.
Type - Set the type of chart that is shown: Bar, Line, Pie, Donut, or Scatter.
Data - Data configuration options will differ based on the chart type. Line, Bar, and Scatter graph types will have X-axis and Y-axis fields to configure. Pie and Donut graph types will have Categories and Values fields to configure.
Filters - Set up one or more conditions or conditional groups to hone the insight that the chart is showing.
Appearance - Choose a color, size, and whether to show the record count on the chart. Charts also have a size preset that can be used to alter the height of the whole row of charts. It’s not possible to set different heights for charts that are side by side.
User actions - You can also allow end users to click on the chart to open up a record detail page by toggling the “Click to see underlying records” option. More information is available here.
Title - Alter the label shown next to the list you are configuring. You can also toggle whether to show or hide the title.
Data - Configure the Sort by and Group by fields to organize the data shown in the list. You can also choose whether to show a Prefix field and which fields from the underlying table that the list will show.
Filters - Set up one or more conditions or conditional groups to hone the records that the list is showing.
Appearance - There are several options to configure in this section. Color by allows you to conditionally color records depending on conditions or a select field. Max size will change the size of the list on the interface canvas. Adjust Row height to give each record in the list more or less space. Finally, toggle Show field descriptions to show any underlying field descriptions from the base to give end users more context or Collapse all by default to hide all of the records nested below each list grouping.
User actions - You can also allow end users to click on records in the list to open up a record detail page by toggling the “Click to see underlying records” option. More information is available here.
Title - Alter the label shown next to the timeline you are configuring. You can also toggle whether to show or hide the title.
Data - There are many settings to consider when setting up this portion of the properties for the timeline. Consult the timeline view documentation for more specifics on the setup and considerations related to these properties.
Filters - Set up one or more conditions or conditional groups to hone the records that the timeline is showing.
Appearance - There are several options to configure in this section. Color by allows you to conditionally color timeline events depending on conditions or a select field. Size will change the size of the timeline on the interface canvas. Adjust Record height to give each event in the timeline more or less space. You can also decide the Width of records/events to provide more space for event information. Finally, there are several toggles to Stack labels vertically, Wrap labels, Split multiple values into groups, or Collapse groups by default. We recommend experimenting with the various options to see what fits well with your use case.
User actions - You can also allow end users to click on records in the timeline to open up a record detail page by toggling the “Click to see underlying records” option. More information is available here.
Underlying record details
Underlying record details
In the User actions section of a dashboard visualization there is the option to allow end users to "Click to see underlying data" from the interface page. This option is per-visualization, meaning you as a builder have the granularity to toggle this on for individual dashboard insights. The option to turn this feature on can also be enabled by double-clicking on a visualization on the canvas.
The drill-down will only show the underlying records associated with the visualization and builders can configure:
Record details for the records shown
Record details for foreign fields (This is available by clicking on the specific field header)
The option to allow end users to print
Element-based dashboard layouts
While we recommend that you use the dashboard layout as highlighted above in the vast majority of use cases, you can also create an interface by utilizing a blank layout and adding elements to it.
Blank layout dashboard elements
With any interface layout, we try our best to create a layout that will work well with the table you are connecting. Depending upon the design of the table you are connecting to an interface layout, different interface elements may or may not be available.
Filter element - The filter element is the star of the dashboard layout. Filter elements provide your interface users with dynamic filters that they can use to filter other dashboard elements. You can connect some or all of your dashboard elements to filter elements. Because filter elements are dynamic filters and not static filters, the choices each person makes in a filter element will not affect other people using the interface at the same time or in the future. This is why they're so useful when you're building a dynamic dashboard for people to use to analyze your data. We cover the Filter element in depth in this article.
Number element - Number elements are covered more extensively here, but in general, they can display a count of records or a summary of a connected field's records such as the number of records where this field is empty, the percent filled, or the percent empty.
Chart elements - The dashboard shown above includes both bar and pie charts. There are even more chart types to choose from as described here. The nice thing about charts connected to a filter element is that they will dynamically adjust to display information according to the filter(s) a user has chosen. Learn more about the chart element here.
Any of the components listed above can be customized during the initial layout setup or at a later time by clicking on the individual element in Edit mode.
Element-based dashboard layout considerations
With this layout, you can let your collaborators filter data themselves, surface important numbers, and highlight metrics with charts and graphs. Click here to read how to create a product roadmap using the Dashboard Layout.
They also can be used to calculate sum totals, averages, minimums, and maximums for number and currency fields.
When should I use a blank layout versus a dashboard layout?
Blank layouts are useful when you are designing a highly specific layout that the dashboard layout can’t fully support. But in most cases, the dashboard layout is the best option as it is the most feature-rich.
Can a dashboard group be sourced from more than one table?
No, dashboard groups can only be sourced from one table. To show insights from another table in the underlying base, add a new dashboard as outlined here.
Can I move dashboard visualizations or groups around?
Yes. In edit mode, builders can click and drag different dashboard groups around to rearrange them on the canvas. You can also click and drag visualizations around within interface groups. However, dragging a visualization from one dashboard group to another is not possible.