List
Last updated
Was this helpful?
Last updated
Was this helpful?
The UI component List allows you to easily set up a list of Object Class properties from a specific Data Source. The component performs an iteration over a selection of objects in the Data Source and should be used when we want to display Object Class properties of a specific Data Source. The properties listed in rows are referred to as List Items.
Let us say we want a List of tasks that are stored in an Object Class named Task in Appfarm Create. The object class itself has properties of Task.Title, Task.Date, Task.Status, etc. We want all of these displayed, and we can use the List component with data binding the properties as Primary, Secondary, and Pre Secondary text. We can also use the Meta Text option and add a property at the end of each row in our list, as well as add an After Text Action (for example, if we want to have an icon at the end of each row, which deletes the row when clicked). The list component lets us also tick Select or Multi-select options on the rows, where we can select one or multiple rows and further manipulate the data that is bound to them.
Here are some of the properties in Appfarm Create which are custom for a List:
The Data Source to iterate. One row will be displayed per item in this Data Source (after Filter has been applied).
You may also select a multi-reference property (an ), and iterate the referenced objects.
Add Data Groups by clicking on the + icon on the right, and display your list items by the Data Groups' titles.
Skip the first n number of records from the Data Source.
Limit the maximum number of records shown from the Data Source.
Select the list items. You can choose between:
None
Multi Select
Single Select
Click on the checkbox to enable highlighting the selected rows/list items.
Turn this on to toggle the checkbox value when clicking the list item in the Multi Select mode.
Variations of the list layout. We can choose between:
Normal: A default list layout suitable for mobile and when used in sidebars;
Desktop: A list layout utilizing the larger width of desktops;
Responsive: Adapted layout for your current screen size, using Normal for Small and Extra Small devices, and else using Desktop.
Compact vertical padding will be used for the list and list items.
Vertical padding will be removed from the list.
The left and right padding is removed from the list items.
Render a divider line between list items.
The divider line will be shortened and displayed in the length of the list item text.
Here you can choose what will your list items be sorted by visually. The options are:
Icon: A static icon - will be used as the fallback if Icon Value is defined but does not provide a value; Icon Value - a dynamic icon defined by an ENUM value. Will fallback to Icon (if defined), if the ENUM value does not provide an icon;
Avatar: An avatar at the beginning of each list item/row. It enables data binding to an Image property, as well as setting up an Avatar Background Color;
Thumbnail Image: A thumbnail image at the beginning of each list item/row. We have multiple options here:
Thumbnail Variant: Normal or Large.
Image: Data Bind an Image property or use an Image from the Resource Files, URL, etc.
Image Fit: Sets how the image should be resized to fit the thumbnail box. Here we have:
Cover - Image is scaled to maintain its aspect ratio while fitting within the thumbnail box;
Contain - Image is sized to maintain its aspect ratio while filling the thumbnail box. If the image aspect ratio does not match the aspect ratio of the thumbnail box, then the image will be clipped to fit;
Fill - Image is sized to fill the thumbnail box. The image will be stretched to fit if the aspect ratio does not match the thumbnail box.
The text that is primarily displayed in the list item/row. Usually a title of the Data Source being iterated in a list.
The text displayed below the primary text. Usually a category or a description, with less importance and not in focus.
Check the box to allow a line break on Secondary Text.
As the name says, the text that is displayed before the secondary text, in a row line. This will be automatically divided by an emdash (—).
Upper right text for e.g. quantities and dates.
If we want an implemented functionality of one of the already existing components. The options are:
Action Button: A button selecting and highlighting the list item when clicked;
Checkbox: A built-in Checkbox UI component;
Switch: A built-in Switch UI component;
Toggle Button: An Icon Button that toggles a value of a property (most likely a Boolean or an ENUM).
Disables all the list items.
If you want to set the Property Values conditionally. Note: Conditional Properties will be applied in the same order as listed, so the last rule will win if the same property is overridden multiple times.
To select an action to run when the List Item is clicked.
To select an action to run when the Right Action Button is clicked.
Sometimes, you might need a different setup than the UI Component List supports. In that case, you might create a custom list by iterating a container, i.e. defining the Iterate Data Source setting on a container component. Using such a setup, we might add functionality to our rows such as text buttons, more clickable icons, or for example, visibility groups, that allow us to display the list rows according to a certain filter or condition.
See the difference between the two mentioned ways and how it is set up in Appfarm Create by clicking .