LIST

El componente LIST renderiza una colección de registros utilizando una plantilla HTML personalizable que se repite para cada registro.

Se utiliza para mostrar datos en diseños flexibles basados en tarjetas, como feeds de actividades, listados de productos o dashboards.

Componente padre

List solo puede existir a nivel de página (no dentro de otros componentes).

PAGE
 └─ LIST
     └─ BUTTON (cero o más)

Propiedades

Propiedad	Tipo	Requerido	Valor predeterminado	Descripción
type	string	Sí	—	Debe ser LIST
name	string	Sí	—	Identificador del componente y nombre de variable
source	string	No	—	Nombre de la variable que contiene el ResultSet. Si no se especifica, usa el nombre del componente
itemTemplate	string	Sí	—	Plantilla HTML renderizada para cada registro. Soporta expresiones Handlebars
itemTemplateName	string	No	—	Nombre de una plantilla global registrada en el sistema
binds	string	No	—	Definición de bindings cuando se usa itemTemplateName
containerCssClass	string	No	""	Clases CSS para el contenedor externo
containerCssStyle	string	No	""	Estilos CSS para el contenedor externo
cssClass	string	No	""	Clases CSS para el wrapper de la lista
cssStyle	string	No	""	Estilos CSS para el wrapper de la lista
visible	boolean	No	true	Indica si el componente es visible

Expresiones Handlebars

La propiedad itemTemplate permite expresiones Handlebars.

Para insertar el valor del campo del registro actual utilizar {{fieldName}}

Esto sirve también para variables: {{varName}}

En el caso que se necesite mostrar el valor de una variable que tiene el mismo nombre que un campo de la fuente de datos prefijar con var. el nombre de la variable: {{var.varName}}

Para insertar un botón que está definido como hijo del componente:

{{button 'buttonName'}}

Ejemplos

Ejemplo 1: campo del registro actual

- type: LIST
    name: customersList
    source: customers
    itemTemplate: |
        <div class="list-group-item">
            <strong>{{customerName}}</strong>
            <div>{{customerEmail}}</div>
        </div>

customerName y customerEmail se leen de la fila actual del ResultSet customers.

Ejemplo 2: variable global

- type: LIST
    name: ordersList
    source: orders
    itemTemplate: |
        <div class="list-group-item">
            <div>Moneda: {{currencySymbol}}</div>
            <div>Total: {{orderTotal}}</div>
        </div>

currencySymbol puede ser una variable global cargada desde Lua, compartida por toda la página.

Ejemplo 3: conflicto de nombre campo vs variable

Si existe un campo status en el ResultSet y también una variable global status, usar var. para referirse a la variable:

- type: LIST
    name: ticketsList
    source: tickets
    itemTemplate: |
        <div class="list-group-item">
            <div>Estado del registro: {{status}}</div>
            <div>Filtro activo: {{var.status}}</div>
        </div>

Ejemplo 4: botón hijo dentro del template

- type: LIST
    name: productsList
    source: products
    itemTemplate: |
        <div class="list-group-item d-flex justify-content-between align-items-center">
            <span>{{productName}}</span>
            {{button 'editProduct'}}
        </div>
    children:
        - type: BUTTON
            name: editProduct
            text: Editar
            onClick: "@INCLUDE(events.lua, editProductOnClick)"

{{button 'editProduct'}} renderiza el botón hijo definido dentro del componente LIST.