Record List | Horizon Design System

Shows the anatomy of the record list, consisting of a header, a list, and a pagination control

Record list header: Heading component that contains the title, actions a user can take on the list, and a button to create new records.
Presentational list: List component with columns and rows; users are able to sort, filter, and edit items.
Pagination control: Pagination control component that enables users to navigate pages of records and set the number of records displayed per page.

Usage

You can use the record list bundle in any design that requires a full-featured data list. The list controller provides all cell types and list actions, such as sorting, grouping and reordering row items using drag and drop functionality. In addition, the list controller allows you to display Glide record data in your list. The record list includes a header with actions you can take on list items and a pagination control for navigating the list.

Example of the record list list used with a list menu in an app shell to display a list of incidents — This example of a record list of incidents contains a header with action buttons and declarative actions and a footer with a pagination control.

Presets and controllers

This component has a preset configuration that sets properties and event handlers, making it ready for use. You can override preset values with a custom configuration if needed. Preset values won’t upgrade with updates. To avoid using presets, configure manually. One preset can apply to a single component instance. See presets for more info.

A preset is linked to a controller, which serves as a data resource. Controllers provide configuration data and event bindings for the component. Selecting a preset adds the required controller to the page, allowing new components to use its preset. For more on controllers, see controllers. For default presets, see view properties and events in the controller API.

Record list header

Learn how the record list header component is configured and behaves in the record list bundle.

Anatomy

Title: Title of the list
Record count (optional): Badge for the number of items in the list
Subtitle: Content displaying the elapsed time from the last list refresh
Refresh button (optional): Refreshes the list on demand with the latest data from the data source
Declarative actions (optional): Actions configured on the instance for the workspace being used; button types could be anything
More actions: More actions button and menu containing other standard list actions and any overflow actions
Alert message: Slot for an optional message
Data and layout bar: A bar for secondary list actions related to data and layout; when only one or no button on the left is configured to show, the bar will be hidden and any remaining button will move ot the top
Search button (optional): Action that opens the search input field for searching items in the list
Filter, sort and group (optional): Condition builder actions that allow users to filter, sort and group the list
Layout switcher: When more than one layout is available in the list, this option enables users to switch between them

Configuration

The record list header component provides preset property values that are intended to satisfy most use cases. You can override any preset value to suit your needs, but overridden properties aren’t updated during an upgrade. The only configurable property that is upgrade-safe for the record list header in a record list is the toggle that enables you to show or hide the component in the page.

Behavior

Learn how the record list header behaves when the display changes or a user interacts with the component.

States

The record list header buttons inherit the states of the button component.

See usage guidelines for button

Responsive behaviors

Depending on your use case, you might have multiple button types configured for declarative actions. When the record list header shrinks to fit a smaller container, the actions overflow into a form menu and are organized according to their button type. For details, see the usage guidelines for action bar.

Interactions

Learn how record list header responds when a user interacts with it.

Editing columns

Users can add, delete, and reorder the columns that appear in the list by using the options in the record list header.

Shows the list selector component used in split view to edit columns in the list — Edit columns modal

Declarative actions

User interaction with the declarative actions depends on the types of buttons present. In this example, the user opens a dropdown from a split button to select an action on records selected in the list.

Users select the “New” button in the header to create a new record in the current list. A new tab appears containing a blank record form and a contextual sidebar component, allowing the user to attach a file or select a template for the new record. When the user completes the form, they select Save to save the new record.

Shows the action of creating a new record from the declarative action in the list header

Search

Users can search for keywords to filter records in a list. Selecting the search button opens a popover where they can enter a keyword and press the "Enter" key to execute the search. The original list will be replaced with a filtered version. To clear the search, users can select the “Clear” button in the popover.

Refresh

Users can refresh the list by selecting the refresh button in the record list header. Once the list is refreshed, the subtitle in the header will be updated.

Usability

Record list header complies with all internationalization and accessibility requirements.

Internationalization

When the display translates to a right-to-left (RTL) language, the iconic buttons and list label flip their orientation.

Shows how the list header realigns on the right for a right-to-left language.

Accessibility

Learn how to access the actionable elements of the record list header through keyboard interactions and screen readers.

Keyboard interactions

You can access the actionable elements of record list header with these keyboard keys:

Tab: Moves focus from the first iconic button to the last declarative action in the prescribed tab order, skipping any disabled actions
Shift + Tab: Moves focus backward in the reverse tab order.
Enter: Activates the action in focus

Shows the tab order for the actionable element in the list header — In this example, the tab order includes the split button declarative action, which is enabled. Tabbing skips any declarative action that is disabled and goes to the next active action.

Presentational list

Learn how the presentational list component is configured and behaves in the record list bundle.

Main anatomy

Shows the anatomy of the rows in the presentational list — Presentational list (default view)

Row actions (optional): Iconic buttons that enable users to perform actions on the record; up to 10 actions can be configured. Default action is quick edit, which opens an editable form for the record on a side panel.
Select all: Checkbox for selecting all the records in the list
Select row: Checkbox for selecting an individual row
List column headers: Each column header contains a drag handle button, a label that describes the data in the column, default icons to indicate sort, filter, and group, optional custom icons, and an actions button.
List cells: Cells that allows users to view and interact with the data. Cell types include actionable link, boolean, choice, currency, custom, date/time, empty, error, highlighted value, icon, loading, number, person, pill, string and URL.
Actionable message (optional): Inline message with an action button which can appear on top of the list or at the bottom.

Grouped rows anatomy

Expand or collapse all groups: Iconic button to expand or collapse all groups.
Expand or collapse group: Iconic button to expand or collapse a single group.
Group header row: A special row that contains an expand/collapse button for the group, an optional badge count for the number of records within the group, and an optional action button that can either be a single action or trigger a dropdown menu of actions.