List component

overview the list component is the primary way to display a collection of items in a purple experience view it fetches data from a data sources https //app archbee com/docs/qtjkvew7g556yo3qfoyay/fumbuabweon oto5wfevf , renders each item using a child component template, and optionally tracks which item is currently selected via a url query parameter templates the template property controls the layout of the list value description vertical stacked vertically (default) horizontal scrolls horizontally tabs renders items as tabs; selection scrolling is disabled for this template grouped groups items under section headers grid arranges items in a css grid selection add a selection object to make a list track which item is currently selected the selected value is stored as a url query parameter (or another scope) and is available to child components as $context selected "selection" { "param" "category", "init" "first", "scrollintoview" { "behavior" "smooth", "block" "nearest" } } selection properties property type default description param string — required url query parameter that stores the selected value paramscope url | userattribute url where the selected value is persisted init boolean | 'first' | 'all' false pre select on load 'first' selects the first item, 'all' selects all items , true behaves like 'first' multi boolean false allow multiple items to be selected simultaneously ripple boolean false show a ripple animation on the selected item scrollintoview (pxp 5 4 0 or higher) scrollintoviewoptions | false { behavior 'smooth' } scroll options when bringing the selected entry into view set to false to disable scrolling not applied when template is 'tabs' behaves like scrollintoview api https //developer mozilla org/en us/docs/web/api/element/scrollintoview confirm object — show a confirm button reset boolean | string — show a reset button use a string to override the button label (default translation key list action reset ) selectall boolean | string — show a "select all" button (default key list action select all ) unselectall boolean | string — show an "unselect all" button (default key list action unselect all ) scrollintoviewoptions these options are passed directly to the browser's scrollintoview() api when the selected entry needs to be brought into view property type default description behavior 'auto' | 'smooth' | 'instant' 'smooth' scroll animation style block 'start' | 'center' | 'end' | 'nearest' — vertical alignment of the element after scrolling inline 'start' | 'center' | 'end' | 'nearest' — horizontal alignment of the element after scrolling container 'all' | 'nearest' — which scroll container(s) to scroll disabling scroll on selection to prevent the view from jumping when a list item is selected for example when a list is already fully visible set scrollintoview to false "selection" { "param" "tab", "init" "first", "scrollintoview" false } confirm button the optional confirm button is shown below the list and triggers an action when clicked useful for filter lists where changes should only take effect once the user confirms property type default description message string 'list action confirm' button label (translation key or literal string) action eventactionconfig — action to execute when the button is clicked see action configuration docid\ oafvnh5bjfzvvgt6g yrd