Autobase

Appearance

Templates globales ​

El sistema de templates permite reutilizar bloques de HTML predefinidos en distintas aplicaciones y páginas de Autobase.

Los templates se almacenan y gestionan a nivel de plataforma, y pueden ser:

  • Globales: disponibles para todos los tenants.
  • Propios de un tenant: visibles solo dentro de ese tenant.

Estos templates se referencian desde las propiedades:

  • itemTemplateName del componente LIST.
  • templateName del componente DISPLAY.

De esta forma, una misma plantilla se puede reutilizar en múltiples pantallas cambiando solo los datos que se muestran.

Estructura de un template ​

Un template es un fragmento de HTML que define la estructura visual y zonas de contenido dinámico.

Las zonas dinámicas se expresan con expresiones como {{line1}}, {{imageUrl}}, etc., y pueden estar envueltas en bloques condicionales {{#if ...}} ... {{/if}} para mostrarse solo cuando haya datos.

Ejemplo de template reutilizable:

html
<div class="list-group-item">
	<div class="row">
		{{#if imageUrl}}
		<div class="col-auto">
			<div class="col-auto">
				<span class="avatar avatar-1" style="background-image: url({{imageUrl}})"></span>
			</div>
		</div>
		{{/if}}
		<div class="col text-truncate">
			{{#if line1}}
			<div class="text-body d-block">{{line1}}</div>
			{{/if}}
			{{#if line2}}
			<div class="text-secondary text-truncate mt-n1">{{line2}}</div>
			{{/if}}
		</div>
	</div>
</div>

En este ejemplo, las zonas dinámicas son imageUrl, line1 y line2.

Uso desde LIST y DISPLAY ​

Los templates se usan principalmente desde:

  • LIST: para renderizar cada ítem de una colección.
  • DISPLAY: para renderizar bloques de contenido reutilizables.

En lugar de escribir el HTML completo en la página, se referencia el nombre del template global y se indica cómo se mapean los datos de la aplicación a las variables del template.

Ejemplos de propiedades:

  • En LIST: itemTemplateName
  • En DISPLAY: templateName

Binds: mapeo de datos al template ​

Para conectar los campos del template (line1, line2, imageUrl, etc.) con los datos concretos de la aplicación, se usa la propiedad binds del componente LIST o DISPLAY.

La propiedad binds define un conjunto de asignaciones clave=valor, una por línea, donde:

  • La clave es el nombre de la variable usada en el template (por ejemplo line1).
  • El valor indica de dónde salen los datos en la página (por ejemplo un campo de un ResultSet).

Ejemplo típico de binds para un listado:

yaml
binds: |
	line1=field:TenantName
	line2=field:TenantSlug

En este ejemplo:

  • line1 tomará su valor del campo TenantName del origen de datos asociado al LIST.
  • line2 tomará su valor del campo TenantSlug.

Cada línea sigue la forma general:

text
nombreTemplateVariable=origen

Actualmente, los orígenes más comunes son:

  • field:<NombreCampo>: toma el valor de un campo del ResultSet asociado al componente.

Ventajas del sistema de templates ​

  • Reutilizar estructuras visuales complejas en múltiples páginas.
  • Mantener un diseño consistente entre distintas aplicaciones y tenants.
  • Separar el diseño (HTML de templates) de los datos (pages, ResultSets, variables Lua).
  • Simplificar el YAML de las páginas evitando grandes bloques de HTML inline.

Para más detalles de uso en componentes específicos, ver también la documentación de LIST y DISPLAY en la guía de componentes de UI.