Airtable interface layout: Dashboard
  • 12 Mar 2024
  • 16 Minutes to read
  • Dark
    Light
  • PDF

Airtable interface layout: Dashboard

  • Dark
    Light
  • PDF

Article Summary

Plan availability

All plan types

Permissions

Please consult this support article for a breakdown of Interface Designer permissions.

Platform(s)

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.

  1. 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.

  2. Next, you’ll be brought to the layout picker. Choose the Dashboard option and click Next.

  3. 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.

  4. 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

  1. First, give your dashboard a name and a description.

  2. 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:

    1. Number - Show a count or summary of records depending on filters.

    2. Chart - Show a chart to give insights into the underlying records in a connected table.

    3. List - Show a list of records from the underlying table. This is especially useful when grouping records (ex. status field).

    4. Timeline - Show a timeline of events based on a start date field and optional end date field.

  3. 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.

  4. 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

Numbers

  1. 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.

  2. Subtitle - Give the number even more context for end users.

  3. 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.

  4. Filters - Set up one or more conditions or conditional groups to hone the insight that the number is showing.

  5. 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.

  6. 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.

Charts

  1. 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.

  2. Description - Give the chart more context for end users.

  3. Type - Set the type of chart that is shown: Bar, Line, Pie, Donut, or Scatter.

  4. 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.

  5. Filters - Set up one or more conditions or conditional groups to hone the insight that the chart is showing.

  6. 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.

  7. 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.

Lists

  1. Title - Alter the label shown next to the list you are configuring. You can also toggle whether to show or hide the title.

  2. 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.

  3. Filters - Set up one or more conditions or conditional groups to hone the records that the list is showing.

  4. 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.

  5. 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.

Timeline

  1. Title - Alter the label shown next to the timeline you are configuring. You can also toggle whether to show or hide the title.

  2. 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.

  3. Filters - Set up one or more conditions or conditional groups to hone the records that the timeline is showing.

  4. 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.

  5. 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:

  • Visible fields

  • Default sort

  • 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

Pivot tables in dashboard layouts

Historically, the only way to use pivot tables in Airtable was via the Pivot table extension. Interface builders can now add pivot tables directly to their interface dashboard pages. A pivot table is a powerful tool to calculate, summarize, and analyze data that lets you see comparisons, patterns, and trends in your data. It is a table of values which are aggregations of groups of individual values from records from a more extensive table, categorized by one or more fields in the extensive table.

Note

This feature is only available for paid plan customers in the desktop interface experience.

Adding a pivot table to a dashboard layout

  1. Create a new dashboard page layout or access an existing dashboard layout in Edit mode.

  2. Then, do one of the following:

    • Add a new group to the dashboard by hovering over the canvas, moving the mouse around on the page, and clicking the + Add group button that appears. Then click the + Add pivot table option.

    • Find an existing group, hover over the group, and move your mouse around until you can click on the + button that appears. Then, click the Pivot table option from the menu that appears.

  3. Now you are ready to begin configuring the pivot table from the properties panel on the right side of the screen.

Configuring pivot tables

From the properties panel on the right side of the interface editor, configure the following settings to match your needs/use-case:

  • Title - Alter the label shown for the pivot table you are configuring.

  • Description - Give the pivot table more context to help end users understand the data being shown.

  • Filters

  • Rows

    • Field - Choose the field that will be grouped/sorted in pivot table rows.

    • Sort by - Sorting by “group” will result in the rows in the pivot table being sorted based on the order of the groupings from the field, e.g. alphabetical order for text groupings or numerical order for numerical groupings. Sorting by “value” will result in the rows in the pivot table being sorted based on the summary values (the values in the rightmost column in the pivot table).

      • Note that you must choose a field for the row groupings to build the pivot table. A default field will be selected for you when the pivot table is first added to the dashboard layout.

    • Sort order - Choose an ascending or descending  order in the pivot table.

  • Columns

    • Field - Choose the field that will be grouped/sorted in pivot table columns.

    • Sort by - Sorting by “group” will result in the columns in the pivot table being sorted based on the order of the groupings from the field, e.g. alphabetical order for text groupings or numerical order for numerical groupings. Sorting by “value” will result in the columns in the pivot table being sorted based on the summary values (the values in the bottom row in the pivot table).

      • Note that column grouping is optional. If a field is not selected, the pivot table will simply expose one column with the aggregated values for each row grouping.

    • Sort order - Choose an ascending or descending  order in the pivot table.

  • Appearance

    • Summarize by - You can choose to summarize (aggregate) the data by Count or by a Field.

      • Count displays the number of records that are included in the row (and field) grouping(s).

      • Alternatively, the Field option displays the results of a summary function performed on a specific field. You'll need to select the specific field you want to summarize and a type of summary function (e.g. sum, average, min, max, etc). The available summary functions will depend on the field type that you choose.

    • Size - This setting alters the size that the pivot table will take up on the interface page. Experiment with the options to see what works best for your needs.

  • User actions

Other considerations when configuring pivot tables

  • Splitting multiple values

    • When you select a field for either the row groupings or the column groupings that contains cells that may contain multiple values, e.g. multi-select fields or a linked record field that allows multiple linked records, you will be presented with the option to toggle the “Split multiple values.”

    • Splitting multiple values means that a record containing multiple values in the specified field will be counted/summarized separately for each grouping. For example, a record containing options “A” and “B” will be counted under both “A” and “B.” In contrast, not splitting multiple values means that the pivot table will treat separate compositions of multiple values as different values in themselves; a record containing options “A” and “B” will not be counted under “A” or “B,” but rather, under “A, B”.

  • Viewing underlying records in the pivot table

    • In the top right corner of the pivot table there is an up arrow  button to expand the pivot table into a full-screen view.

    • The full-screen view contains the same pivot table as in the dashboard. However, when the option to “Click to see underlying records” is enabled, it allows end-users to see the list of records that underlie each cell as well as the ability to open a record detail page for each record in the list when “Click into record details” is enabled.

    • Note that you can also enter the full screen view by expanding an individual cell by clicking the expand icon that appears on hover of a cell.

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

Note

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.

  1. 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.


  2. 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.

  3. 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.

Note

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.

FAQs

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.


Was this article helpful?