HTML Template

Este nodo recibe una plantilla HTML con marcadores {{campo}} y devuelve el HTML renderizado con los valores reales del payload. Ideal para generar tickets, facturas, órdenes de compra, confirmaciones de pedido y cualquier documento HTML parametrizado.

Función

Aplica procesarVariablesDinamicas sobre la plantilla: reemplaza {{campo}}, {{campo.subcampo}} y referencias a variables de memoria del workflow. El resultado es un string HTML listo para enviar por email, generar PDF o almacenar.

Configuración

Campo	Tipo	Requerido	Descripción
template_html	Editor HTML	Sí	Plantilla con marcadores {{campo}}. Soporta HTML completo con CSS inline.

El editor integrado incluye resaltado de sintaxis HTML, vista previa en tiempo real y un explorador de variables dinámicas del payload para insertar marcadores sin escribirlos manualmente.

Output

{
  "html": "<html>...contenido renderizado...</html>"
}

El nodo reemplaza el payload completo por { html }. Para seguir usando los datos originales en nodos posteriores, combina con un nodo Merge o guarda el HTML en una variable de memoria antes.

Sintaxis de variables dinámicas

Sintaxis	Descripción
{{nombre}}	Campo raíz del payload
{{cliente.email}}	Campo anidado (dot-notation)
{{items.0.descripcion}}	Primer elemento de un array
{{$mem.factura_id}}	Variable de memoria del workflow

Ejemplo de uso

Plantilla de factura básica

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body { font-family: Arial, sans-serif; color: #333; }
    .header { background: #1976d2; color: white; padding: 20px; }
    table { width: 100%; border-collapse: collapse; margin-top: 20px; }
    th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
    th { background: #f5f5f5; }
  </style>
</head>
<body>
  <div class="header">
    <h1>Factura #{{numero_factura}}</h1>
    <p>Fecha: {{fecha}}</p>
  </div>
  <p>Cliente: <strong>{{cliente.nombre}}</strong> — {{cliente.email}}</p>
  <table>
    <tr><th>Producto</th><th>Cantidad</th><th>Precio</th></tr>
    <tr>
      <td>{{producto.nombre}}</td>
      <td>{{producto.cantidad}}</td>
      <td>{{producto.precio}}</td>
    </tr>
  </table>
  <p><strong>Total: {{total}}</strong></p>
</body>
</html>

Configuración del workflow

{
  "type": "htmlTemplate",
  "config": {
    "label": "Generar factura HTML",
    "template_html": "<!DOCTYPE html>...",
    "nextModule": "enviar_email"
  }
}

El payload de entrada puede ser:

{
  "numero_factura": "F-2024-0042",
  "fecha": "2024-05-13",
  "cliente": { "nombre": "Acme Corp", "email": "facturacion@acme.com" },
  "producto": { "nombre": "Servicio Premium", "cantidad": 1, "precio": "$299" },
  "total": "$299"
}

Combinaciones habituales

Siguiente nodo	Caso de uso
sendMail	Enviar el HTML como cuerpo de email
generatepdf	Convertir el HTML a PDF vía API2PDF
setVariable	Guardar data.html en memoria para usarlo más adelante
http	Enviar el HTML a una API externa (p.ej. sistema de impresión)

Notas

• Si la plantilla está vacía, el nodo devuelve error y detiene el flujo.
• Las variables que no existan en el payload se dejan como texto literal {{campo}} sin causar error.
• Para añadir una imagen de la biblioteca de Recursos, usa el botón Imagen de la barra del editor: inserta un <img> con su dirección pública. Si la imagen es privada, el selector ofrece hacerla pública, porque quien reciba el HTML no habrá iniciado sesión.
• El CSS inline funciona correctamente; los estilos externos (CDN) solo se cargan si hay conexión a internet en el entorno de ejecución.
• Para bucles o condicionales complejos (ej. listas dinámicas de ítems), se recomienda preprocesar el array con un nodo evaluateExpression que construya el HTML de la tabla y lo inyecte como una sola variable {{tabla_items}}.

Nodos relacionados

• generatepdf — convierte data.html en PDF
• sendMail — envía el HTML por correo
• barcodeGenerator — genera imágenes de código de barras/QR que pueden embeberse en la plantilla vía <img src="{{data.barcode}}">
• evaluateExpression — preprocesa datos complejos antes de renderizar la plantilla