Record List

1. Record list header: Heading component that contains the title, actions a user can take on the list, and a button to create new records.
2. Presentational list: List component with columns and rows; users are able to sort, filter, and edit items.
3. 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.

Presets and controllers

This component contains a preset configuration that automatically configures properties and event handlers for a component, making the component ready to work when you add it to a page. A preset is designed to suit a specific use case. However, you can override preset property values with a custom configuration if you find it necessary for your design. Preset values that you override aren’t upgraded when updates are available. If you don’t want to use the preset values provided, select the option to configure the component manually. You can apply one preset to a single instance of a component on a page. For more information, see Presets.

A preset is always associated with a controller, which acts as a data resource for the component. Controllers provide the configuration data and event bindings the component needs to function in your experience. By selecting a preset, the required controller is added to the page. By adding a controller to the page, any new applicable components will have that controller's preset. For more information about how controllers work, see Controllers. For instructions on using the data inspector to view the default presets for a component, 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

1. Title: Title of the list
2. Subtitle: Content displaying the elapsed time from the last list refresh
3. Badge: Displays the total number of records in the data result set
4. Search button (optional): Action that opens the search input field for searching items in the list
5. Refresh button (optional): Refreshes the list on demand with the latest data from the data source
6. Edit columns button (optional): Opens the list selector component for editing the columns in the list; you can add, delete, or reorder the columns
7. Filter button (optional): Control for adding filters; count is incremented as filters are added to the filter pane
8. Declarative actions (optional): Actions configured on the instance for the workspace being used; button types could be anything

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 selecting the “Edit columns” button in the header. A modal opens, containing a list selector component. The list selector supports dot-walking. For details, see the usage guidelines for list selector.

Filter condition builder

When the user selects the filter button in the record list header, a modal containing a condition builder opens. Filter conditions are applied to the entire list. For details, see the usage guidelines for condition builder.

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.

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.

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

Presentational list

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

Main anatomy

1. 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.
2. Select all: Checkbox for selecting all the records in the list
3. Select row: Checkbox for selecting an individual row
4. 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.
5. 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.
6. Actionable message (optional): Inline message with an action button which can appear on top of the list or at the bottom.

Grouped rows anatomy

1. Expand or collapse all groups: Iconic button to expand or collapse all groups.
2. Expand or collapse group: Iconic button to expand or collapse a single group.
3. 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.

Row anatomy

12: Parent row: Record that has child records associated with it.**
13: Child rows:** Child records that belong to a parent record.

Configuration

The presentational list 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 configuration panel includes some configurable properties that you might want to set in your page.

List interactions

You can enable or disable the following list interactions:

• Clickable text: Interact with all clickable cell content, such as URLs. When disabled, clickable text is rendered as plain text.
• Inline cell editing: Edit values directly in a cell without having to open the record.
• Column width: Adjust column width with drag handles.
• Live list: Display a toggle for live updates in the list header. By default, if live list is enabled, infinite scroll is as well.
• Infinite scroll: Continuously load content at the bottom of the list.

Text wrapping

You can configure text wrapping for entries that overflow the cell. By default, text wrapping is disabled.

Behavior

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

States

The presentational list has 3 states: hover, focus, and selected.

1. Row hover
2. Row selected
3. Cell hover
4. Column heading hover
5. Cell selected
6. Cell selected-hovered
7. Cell focused

Responsive behaviors

By default column width in a presentational list adjusts automatically to accommodate the longest entry in the column.

Interactions

Learn how the presentational list responds when a user interacts with it.

Column filtering

To filter the list by selected values in individual columns, users select the filter iconic button in the column heading.

1. Popover trigger: Iconic button in the column heading that opens the popover for grouping and selecting filtering conditions.
2. Column heading popover: Popover containing button to group by the column and column filter condition builder.
3. Operator dropdown: Dropdown panel containing the available filter conditions
4. Filter value input: Input field to enter filter value for the column.
5. Apply button: Action to apply the selected filter operator and value to the list; button is enabled when the user enters a filter value.

The list displays the records that match the applied column filter. A filter icon in the column heading indicates that a filter is applied to the column.

Column drag and drop

Column drag and drop in enabled by the preset. To drag and drop a list column, the user selects the drag handle in the column header and drags the column left or right in the list.

An indicator line appears as the column moves to show its current location. The column’s previous location appears in a disabled state. The user releases the drag handle when the column is in the desired position.

Column resizing

This feature is enabled by the preset. Users can adjust the width of a column by dragging the vertical bar that appears on the right side of the column heading when the cursor points to that area.

Column sorting

When this feature is turned on, users can select the label in the column heading cell to sort the list by a column. A caret icon will appear next to the label to indicate that sorting has been established. Selecting the column heading label again will sort the list by that column in the reverse order.

Column grouping

When column grouping is configured to be displayed in the column heading popover, users can group list rows in a list by any column. To do that, users point to the column heading cell to see the column actions button. Selecting it will open a popover containing a button to group list rows by this column.

A folder icon in the column heading indicates that the list has been grouped by the column.

Cell filtering

When cell filtering is turned on, users can quickly show or filter out records matching the field value in a cell. To do that, users point to the cell to reveal the cell actions button and then select an action from the menu that the button triggers.

Inline cell editing

This feature is turned on by the preset. Users can double select a cell to reveal a popover where they can edit the value of the cell.

Quick edit

When the quick edit feature is turned on, users can edit the associated record of each row on a resizable pane by selecting the pencil button in the row actions cell. This cell is by default located at the start of each row but can be customized to be at the end. Quick edit opens a panel to the right of the list showing an editable record form.

Row drag and drop

This feature is turned off by the preset. When turned on, it allows users to reorder list rows by dragging and dropping. Users can select the drag handle at the beginning of a row and drag the row up or down in the list.

The row’s previous location appears in a disabled state. The user releases the drag handle when the row is in the desired position.

Usability

The presentational list complies with all internationalization and accessibility requirements.

Internationalization

When this component is used in a platform configured for a right-to-left language (RTL), the list flips its orientation and aligns on the right.

Accessibility

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

Keyboard interactions

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

• Tab: Moves focus from the last active declarative action in the record list header to the top corner of the list.
• Shift + Tab: Moves focus backward. If focus is in the list, focus moves to the last active declarative action in the record list header. Focus moves into the list if focus is on the first actionable item in the pagination control.
• Arrow up and Arrow down: Moves focus up and down between rows from the selected cell.
• Arrow left and Arrow right: Moves focus between columns and row actions in the selected row.
• Enter: Activates the action or link in the cell in focus.

Screen readers

Screen readers use the built-in table functionality.

Pagination control

The record list bundle uses the pagination control component to navigate pages in the list and set the number of rows per page.

For more information, see usage guidelines for pagination control