Section list element (mobile)
The section list is a pseudo child element of the view element. Rather than being added from the element palette, it's enabled by setting the View type property to Section list in the view element's Configure section. Once set, it appears in the element tree under Overlays.
How grouping works
Grouping properties are set on the child element Section list header.
Exact grouping
The section list groups list items by a shared property — for example, grouping a list of users by their birth year. Grouping is based on exact matches, so two records with similar but not identical values, such as New York and New York City, are treated as separate groups.
There are two exceptions:
Grouping by numbers
Numbers can be grouped as exact matches (e.g. 1, 10, 25) or buckets (e.g. 1-9, 10-19, 20-29). See the configuration section below for more information on setting the start/end number and interval.
Grouping by dates
Dates can be grouped as exact matches, by day, or by month. Day and month groupings support intervals, letting you group ranges of time together — for example, an interval of 12 months to group by year.
Visual
Content
Type of content
Sets the type of content you want to load into the section list.
Data source
Sets the data source of the content you want to load into the section list.
Size
The size of the section list is inherited from the view.
Layout
Gap
Defines the vertical space between child elements inside a container.
If child elements also have margins, the gap and margin values are cumulative. For example, a container with a 10 px gap and a child element with a 10 px margin between items will result in 20 px of total space between those elements.
Padding
Defines the internal spacing between an element’s content and its border in a static pixel value. Padding adds space inside the element, without affecting its position relative to other elements.
Padding is added on the vertical and horizontal axis respectively.
Configure
Separators
Style
Sets the style of the separator line.
Fill
The separator spans the full width of the screen.
Inset
The separator is indented from the left edge.
Inset
Sets the inset width as a pixel value.
Width
Sets the width of the separator line.
Hairline
A hairline is the thinnest line a screen can render, which varies by device — on high-density displays (such as Apple's Retina) it can be thinner than a full pixel.
Pixel value
A pixel width of 1 is always exactly one device-independent pixel, which may appear thicker than a hairline on high-density screens.
Color
Sets the color of the separator line, and the opacity of that color.
Interaction
Workflows
Shows the workflows connected to the selected element. Click the + symbol to create a new workflow associated with that element. The list of available events differs based on which element is selected.
Shortcut: To quickly add a workflow to a selected element, press Cmd+K on macOS or Ctrl+K on Windows. The shortcut defaults to the most likely event for that element type.
Visibility
Visible on view load
Enable this to make the element visible by default. This checkbox makes the element visible every time the view loads. Change the visibility of the element based on certain conditions in the Conditional section in the property editor or with a show/hide element action in a workflow.
Options
Enable reverse scroll
When enabled, the list scrolls in the opposite direction — new items appear at the bottom and the list starts scrolled to the end.
Transitions
Transitions add animation when a style property changes.
Instead of updating instantly, the element gradually shifts from its previous state to the new one over a defined duration. For example, if you reduce an element’s width, a transition can make it smoothly shrink rather than change size immediately.
Transition styles
ease
Starts slowly, speeds up in the middle, and slows down at the end.
ease-in
Starts slowly and accelerates toward the end.
ease-out
Starts quickly and decelerates toward the end.
ease-in-out
Starts slowly, accelerates in the middle, and slows down again at the end.
linear
Moves at a constant speed from start to finish.
step-start
Jumps immediately to the end state at the start of the transition.
step-end
Remains in the start state and jumps to the end state at the very end of the transition.
Transition duration
Transition duration defines how long the transition animation runs, measured in milliseconds.
Advanced
ID attribute
A unique identifier assigned to the element. This can be used to reference the element in custom code, such as JavaScript or CSS, using document.getElementById() or CSS selectors.
For this property to be visible, you need to enable Expose the option to add an ID attribute to HTML elements in Settings – Advanced options.
Last updated
Was this helpful?