List
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.
Settings
Here are some of the properties in Appfarm Create which are custom for a List:
Data Source
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 Object Class Property with Cardinality Many), and iterate the referenced objects.
Data Grouping
Add Data Groups by clicking on the + icon on the right, and display your list items by the Data Groups' titles.
Skip
Skip the first n number of records from the Data Source.
Limit
Limit the maximum number of records shown from the Data Source.
Selection Type
Select the list items. You can choose between:
None
Multi Select
Single Select
Highlight Selected
Click on the checkbox to enable highlighting the selected rows/list items.
Select on Item Click
Turn this on to toggle the checkbox value when clicking the list item in the Multi Select mode.
List Type
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.
Dense
Compact vertical padding will be used for the list and list items.
Disable Padding
Vertical padding will be removed from the list.
Disable Gutters
The left and right padding is removed from the list items.
Enable Divider
Render a divider line between list items.
Insert Divider
The divider line will be shortened and displayed in the length of the list item text.
Visual Type
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.
Primary Text
The text that is primarily displayed in the list item/row. Usually a title of the Data Source being iterated in a list.
Secondary Text
The text displayed below the primary text. Usually a category or a description, with less importance and not in focus.
Allow Three Lines
Check the box to allow a line break on Secondary Text.
Pre 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 (—).
Meta Text
Upper right text for e.g. quantities and dates.
Action Type
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).
Item Disabled
Disables all the list items.
Conditional Properties
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.
On Click
To select an action to run when the List Item is clicked.
On Action Click
To select an action to run when the Right Action Button is clicked.
Container iterating a Data Source
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 here.
Last updated