List

Overview

Add a list to the view.

Component Properties

Dimensions — The placement on the canvas (X and Y) and the size (width and height) of the component.

To move a component freely, the View Property tab must have the Free Positioning option checked.

Data

Hide Component — The date picker can be hidden by applying a rule on a certain event.

Alternate Views —  Create alternate presentation of the list based on the content.

Type — Select the type of list to be displayed.

List

List Source — Select the source dataset. Datasets are created in the Datasets view.

List View — The view to display the list.

On Item Select — Select the event when an item is selected.

On End Reached — Select the event when the end of the dataset is reached.

On End Reached Threshold(0-1) — Set a value between 0 and 1 to define at what distance the end is reached, when loading the list.

On Drag — Select the event when an item is dragged.

On Drag Start — Select the event when an item drag is started.

On Drag End — Select the event when an item drag is ended.

Calendar

List Source — Select the source dataset. Datasets are created in the Datasets view.

List View — The view to display the calendar.

On Item Select — Select the event when an item is selected.

On End Reached — Select the event when the end of the dataset is reached.

On End Reached Threshold(0-1) — Set a value between 0 and 1 to define at what distance the end is reached, when loading the calendar.

On Drag — Select the event when an item is dragged.

On Drag Start — Select the event when an item drag is started.

On Drag End — Select the event when an item drag is ended.

Gallery

List Source — Select the source dataset. Datasets are created in the Datasets view.

List View — The view to display the gallery.

On Item Select — Select the event when an item is selected.

On Drag — Select the event when an item is dragged.

On Drag Start — Select the event when an item drag is started.

On Drag End — Select the event when an item drag is ended.

Map

List Source — Select the source dataset. Datasets are created in the Datasets view.

List View — The view to display the calendar.

On Item Select — Select the event when an item is selected.

On Drag — Select the event when an item is dragged.

On Drag Start — Select the event when an item drag is started.

On Drag End — Select the event when an item drag is ended.

Output Data To — Select an output, configured under the View Properties tab, to output the data to.

Filter — Filter the items in the list.

Group By — Select a column to group by.

Sticky Group Headers — Apply persistent headers, so the headers remain in place when scrolling.

Order By Direction — Select a column to order by, select ascending or descending.

Featured Label — Label for featured items or entries.

Featured — Select an item or entry in a dataset, to be featured in a list, for instance a piece of news.

Featured Type — Select how the featured item will be presented.

Carousel Image — Select an image for the carousel.

Carousel Title — Select a title for the carousel.

Carousel Height — The height of the carousel.

Searchable — Make the list searchable.

Searching Label — Set a label when searching.

Loading Property — Select if a spinner should show while loading a dataset from an external source.

Empty List Icon — Select an icon to display when a dataset is empty.

Empty List Text — Select a text to display when a dataset is empty.

Empty List Text Size — Select the text size of the displayed empty list text.

Styling

Override — Override the currently selected style.

Unselected Icon Color — Select the color of an unselected icon.

Selected Icon Color — Select the color of a selected icon.

Empty List Icon Color — Select the color of an empty list icon.

Background Color — Sets the background color of the component.

Background Image — Select an image as the component’s background.

Background Size — Select if the image should cover the component’s background, be centered, repeated or stretched.

Component Width — The width of the component inside the container (the component’s borders).

Component Height — The height of the component inside the container (the component’s borders)

Flex Direction — Select the main axis where flex items will be placed, for instance horizontal or vertical (along a row or in a column).

Justify Content — Select how flex items will be placed in relation to each other, for instance towards the start of the flex direction, or with space between.

Align Content — Select how flex items will be placed in relation to the components border.

Align Items — Select how flex items will be placed in relation to the flex direction.

Border Top Color — The color of the component’s top border.

Border Top Width — The width of the component’s top border.

Border Bottom Color — The color of the component’s bottom border.

Border Bottom Width — The width of the component’s bottom border.

Border Left Color — The color of the component’s left border.

Border Left Width — The width of the component’s left border.

Border Right Color — The color of the component’s right border.

Border Right Width The width of the component’s right border.

Border Top Left Radius — Sets the rounding of the top left corner.

Border Bottom Left Radius — Sets the rounding of the bottom left corner.

Border Top Right Radius — Sets the rounding of the top right corner.

Border Bottom Right Radius — Sets the rounding of the bottom right corner.

Border Radius (All) — Sets the rounding of all corners.

Border Style — Sets the style, solid, dotted or dashed, of the component’s border.

Shadow — Adds a shadow to the component’s borders.

Opacity — Sets the opacity of the component.

Component Padding — Sets the padding, top, bottom, left, right of the component inside the container (the component’s borders).

Component Container Padding — Sets the padding, top, bottom, left, right of the component container (the component’s borders).