These three components are fundamental to rendering collections of data in a repeatable and efficient manner. They function as repeater components, taking a data array and iterating through it to display a custom-designed UI for each item.

• Carousel: Renders data as a list of horizontal cards that the user can swipe between.
• Grid: Renders data in a layout with a specified number of columns.
• List: Renders data as a vertical list.
• Virtual List: Optimizes performance for long datasets by rendering only visible items in the viewport, dynamically loading and unloading items as the user scrolls.

💡💡💡 Tip 💡💡💡

Since the List type does not allow for further customization or optimization, the Grid type with a single column is the recommended alternative for list use cases. For multi-column layouts with performance optimization needs, Virtual List is recommended over Grid.

Customizing Items

The Carousel, Grid, and Virtual List components allow you to fully customize how items are displayed. To do so, you drag other components inside of the Carousel, Grid, or Virtual List to build the UI for a single item. This structure is then repeated for every item in your data collection.

Available Properties (Shared)

The primary configuration point is providing the data collection itself.

• Data (Settings Panel): This property defines the collection of data that populates the component.
• • Static Data: Allows you to hard-code an array of values (e.g., URLs, product titles, JSON strings) for each item by clicking the + button to add items.
  • Dynamic Data: The more common use case is to attach data from an API or other source. Hover over the Data label to see the Attach Data button and use the standard Data Picker to select an array of data available in the current context.

Available Properties (Carousel Specific)

These properties, found in the Appearance Panel under the Other section, control the behavior of the scrolling carousel experience.

• Autoplay: If enabled, the Carousel will automatically scroll to the next page.
• Autoplay Timeout Duration: Controls the delay (in milliseconds) before the automatic swipe occurs when Autoplay is enabled.
• Disable Mouse Drag: A toggle that prevents user interaction (dragging) from manually advancing the carousel.
• Hide Scrollbar: Hides any horizontal or vertical scroll bar rendered by the device.
• Is Center Mode: Centers the items horizontally in the Carousel, applying additional whitespace evenly to the left and right margins. (By default, items are left-aligned.)
• Items Per Page: Specifies the number of items that will be displayed on each page.
• Item Width: Specifies the width of each individual item card in the Carousel.
• Peek Size: Shows a specified width (in pixels) of the next Carousel page to inform the user that more items are available.
• Show Arrow: Renders navigation arrows for the user to tap and move between pages.

Available Properties (Grid Specific)

These properties, found in the Appearance Panel under the Other section, control the column layout and item rendering of the grid.

• Column Mode: Controls the calculation of columns:
• • Num Columns: The number of columns is explicitly set by the Num Columns property.
  • Min Column Width: The number of columns is dynamically calculated based on the configurable Min Column Width property.
• Column Gap (Shared with Carousel): Controls the horizontal space between each item of a row.
• Auto-Fit: Controls grid behavior when there is extra space:
• • Auto-Fit: Existing columns are horizontally resized to fill the available space.
  • Auto-Fill: Additional, empty columns are added to fill the available space.
• Featured Items Key: An FQL expression that resolves to true to flag the current item as "featured."
• Featured Items Width: Specifies the number of columns a featured item (flagged by Featured Items Key) should expand to fill.
• Min Column Width: Specifies the minimum width a column can take up when Column Mode is set to Min Column Width.
• Num Columns: Specifies the exact number of columns created when Column Mode is set to Num Columns.
• Initial Num to Render: Specifies how many items are rendered initially to preserve system resources. The rest render as the user scrolls them into View.
• Window Size: Controls the number of "screens" rendered at once (visible screen, plus above and below) to manage resource usage on large lists. A lower value uses fewer resources but may briefly display blank sections on fast scrolls.
• Insert Every Frequency: Specifies the interval at which arbitrary data (defined in Insert Every Values) is inserted into the data set for use cases like promotions (e.g., a value of 1 inserts data every other item).
• Insert Every Values: Specifies the data to be inserted at the interval defined by Insert Every Frequency.
• Scroll Enabled: Controls whether the Grid can be scrollable.

Available Properties (Virtual List Specific)

These properties, found in the Appearance Panel under the Other section, control the performance optimization and layout of the virtual list.

• Initial Num to Render: Specifies how many items are rendered initially to preserve system resources. The rest render as the user scrolls them into view.
• Num Columns: Specifies the exact number of columns for the vertical list layout.
• Scroll Enabled: A boolean toggle that enables or disables the component's built-in scrolling functionality, regardless of content size.
• Display: Controls the layout behavior of the component itself. Options include Flex (default, allows child components to be managed using flex properties) and None (hides the component).
• Elevation: A numeric value that controls the shadow depth on Android and provides a similar shadow effect on iOS and Web. A higher value gives the component a greater sense of depth.
• Window Size: A numeric value that helps optimize performance by defining how many items outside the visible viewport should be rendered for smooth scrolling. A lower value uses fewer resources but may briefly display blank sections on fast scrolls.