Database

The LIST component is an ideal tool for various applications, including CRUD operations (Create, Read, Update, Delete) and displaying analytical data. The list allows configuring different display formats through templates and offers extensive customization options to meet users' specific needs.

2. Cell

In the LIST component, the cell is the first row or column of the list, serving as a model for all subsequent rows and columns. This initial cell is where components are added, configured, and View variables are assigned to display the data.

Template for Subsequent Rows: The initial cell defines the layout and structure replicated across all other rows or columns in the list. Any design or component configuration made in this cell is automatically applied to the entire list.

Cell Components: Within the cell, you can add various components, such as labels, images, video players, or buttons. These components are configured to display specific information for each item in the list using assigned variables.

3. How to Configure

Drag to Screen: Drag the LIST component to the screen where you want to display the data.

3.1. Choose a Template

You can choose from several predefined templates or start with a blank list for complete customization. Below are the available templates, which may be updated over time:

Simple List: Ideal for basic listing and data management operations, like a standard CRUD. This template is simple and straightforward, perfect for minimalist applications.
Simple List with Image: Includes textual data and images for each item, ideal for product catalogs, user profiles, or any application requiring visual representation.
Simple List with Value (Mobile): Displays numerical values associated with the list items, suitable for financial reports or listings where highlighting numbers or values is important.
Two Metrics List (Mobile): Designed for comparing two different metrics per item. Useful for comparative analyses, like year-over-year performance evaluation.
Multiple Attributes List (Mobile): Supports displaying multiple attributes per item, offering a detailed and rich view of the data. Ideal for showing complex item details.
Tasks List (Mobile): Focused on task management, this template includes functionalities to mark items as completed or edit them. Suitable for task lists, projects, or any activity requiring status tracking.

3.2. Data

Configure the View: Set up the View using SQL, Data Analysis View, or Table View to populate the list with database data.

Data: After configuring the View, the data is structured to be displayed in the list but won’t automatically appear in the internal components (image, label, video player, or button). Once the View is configured with the desired data, you need to link it to the specific variables of each internal component in the list. This process is done in the Personalize section of the LIST configuration menu.

3.3. Personalize

3.3.1. How to Enter and Exit Cell Configuration Mode

Double-click anywhere on the list to activate editing mode. When activated, the list will be highlighted with a purple border and gain focus. To exit editing mode, simply double-click any area outside the list. While in editing mode, you can drag components into the list cell and configure each one individually.

3.3.2. Ordering and Spacing

This feature organizes the list items according to the user’s needs. Options are divided into three main types:

Free: Automatically arranges items in a grid format, distributing them into rows and columns.
Horizontal: Aligns items side-by-side in a single row. Useful for sequential displays or horizontal space-prioritized layouts, like navigation menus or horizontal listings.
Vertical: Aligns items in a single vertical column. Default for lists prioritizing linear reading, such as reports, data tables, or task lists.

Additionally, the direction of item organization can be configured:

Default: Items are aligned from top to bottom.
Bottom to Top: Items are arranged from bottom to top, commonly used in contexts like chats, where recent messages appear at the bottom and move up as new ones are added.

The Cell Spacing field allows you to define the distance between items in pixels, enabling a more spaced or compact presentation depending on the desired layout.

3.3.3. List Variables

Within the list components, you can include variables to receive dynamic values from the View. To do this, write the desired variable name in the format $variablename within the component.

List variables connect the View data to the visual components of the selected template. Each variable can be linked to a View column displayed in the list, such as title, image, value, etc.

3.3.4. Dynamic Cell

The “Dynamic Cell” feature customizes item displays in a list based on values returned by the View. It enables creating distinct cells for different conditions or categories, ideal for lists requiring personalized item displays based on specific attributes.

How It Works: When Dynamic Cell is activated, select a View column to differentiate items. This column must return numeric values (IDs or numbers) to determine which cell applies to each list item. Then, create and customize distinct cells independently.

Dynamic Cell Configuration:

Activation: In the list’s personalization tab, enable the Dynamic Cell option and select the View column as a reference for determining each item’s cell type.
Creating Cells: For each numeric value in the selected View column, create a distinct cell by clicking "Add." Each cell functions as a blank list, allowing full customization.
Layout: Drag components (labels, buttons, video players, or images) into each cell and configure them individually. Adjust visual attributes like background color, borders, and shadows to highlight each cell as needed.
Variables: Variables in each cell are unique, configured exclusively for that cell, ensuring View data is displayed correctly for each condition.
Dynamic Behavior: During list display, each item automatically associates with its corresponding cell based on the View’s returned value. This ensures items with different values have personalized cells while coexisting in the same list.

4. Components Allowed in the List

The LIST component supports four main component types: Image, Label, Video Player, and Button. Each of these components can be configured and personalized to meet the application’s needs.

4.1. Configuring Components and Interactions in the List

In editing mode, you can drag multiple components into the list cell. Each component has a specific section for personalization and interactions, allowing individual configuration. Despite the flexibility in customizing components and adding distinct interactions for each, the list operates with a single View associated with all components. This means that while each component can have its logic for interaction and personalization, they all follow the data from the list’s main View.