Las Plantillas de Impresión sirven para generar documentos finales en PDF con un formato personalizado usando como base un archivo HTML que contiene tags o marcadores vinculados a los datos del formulario o del proceso.

El resultado es un documento con formato profesional que mantiene el branding de tu organización y que luego podrás descargar y utilizar en tu proceso.

¿Para qué podrías usar las Plantillas de Impresión?

Esta característica es muy útil cuando necesitas documentos estandarizados o con formato corporativo, producidos automáticamente a partir de los datos del formulario.

Usos típicos

1. Generar certificados
2. Contratos o acuerdos
3. Reportes
4. Documentos oficiales
5. Recibos, facturas simples o constancias de pago

Cómo funciona

Sin plantilla de impresión personalizada

Si no has adjuntado una plantilla de impresión a tu proceso, al hacer clic en el ícono de impresión en una instancia, se generará un PDF utilizando una plantilla por defecto. Esta plantilla incluirá todos los campos visibles de la tarea actual. Ten en cuenta que también se mostrarán los campos que hayas ocultado mediante scripts, siempre que continúen visibles en la configuración del proceso.

Con plantilla de impresión personalizada

Al momento de imprimir, Flokzu te pedirá que selecciones cuál de ellas deseas usar (en caso de haber varias habilitadas). El PDF se generará con el formato definido en la plantilla elegida.

Crear Plantillas de Impresión

Para crear una plantilla de impresión debes usar un archivo HTML con la estructura que necesites. Es recomendable contar con conocimientos básicos de HTML. Si no estás familiarizado con este lenguaje, puedes apoyarte en una plantilla de Google Docs para diseñar documentos con la información que quieras mostrar sobre tu instancia. Puedes encontrar más información al respecto aquí.

Atajo: Diseña tu plantilla en Excel primero

Un enfoque práctico consiste en definir primero la estructura en Excel. Esto resulta especialmente útil porque cualquier persona puede hacerlo, incluso sin experiencia técnica. Luego, puedes usar este sitio web para convertir el archivo de Excel a HTML. Finalmente, agregas los campos necesarios y realizas los ajustes correspondientes. Para perfeccionar el documento final en HTML y verificar su correcto funcionamiento, utilizamos esta herramienta.

Configurando tu plantilla

Para ingresar los valores de un campo debes utilizar el formato mustache: Una etiqueta "mustache" empieza con dos corchetes curvos {{ y finaliza con otros dos corchetes curvos }}.

A modo de ejemplo, si tienes un campo llamado "Nombre" puedes incluir el valor de ese campo de la siguiente manera:

<div>
      {{Nombre}}
</div>

Puedes diseñar la plantilla en HTML incluyendo todos los campos de formulario que desees (todos ellos, solo algunos, incluso campos que se encuentren ocultos). Para realizar esto, debes incluir los nombres exactos de tus campos entre corchetes curvos. Ejemplo: {{nombreCampo}}.

También tenemos algunos campos especiales para insertar información en tu plantilla:

• {{-Identifier-}} : ID de la instancia de proceso
• {{-Initiator-}} : Correo del usuario que inició la instancia de proceso
• {{-Initiator_name-}} : Nombre completo del usuario que inició la instancia de proceso
• {{-Initiation_date-}} : El formato de fecha es yyyy/mm/dd
• {{-Comments-}} : Incluye todos los comentarios hechos en la instancia de proceso

Para definir una visualización para tu pdf, lo estructuramos como una tabla HTML, definiendo filas y columnas. Aquí debajo verás un extracto de una fila como ejemplo:

<tr>
        <td class="borderL" height="24" align="left" valign="bottom">
          <font color="#000000"><br /></font>
        </td>
        <td colspan="2" rowspan="2" align="right" valign="middle">
          <font color="#000000">Effective Date:</font>
        </td>
        <td class="grayBackground" rowspan="2" align="center" valign="middle" colspan="2">
          <font size="3" color="#000000">{{Effective Date}}</font>
        </td>
        <td colspan="2" rowspan="2" align="right" valign="middle">
          <font color="#000000">Reference:</font>
        </td>
        <td class="grayBackground" rowspan="2" align="center" valign="middle" colspan="4">
          <font size="3" color="#000000">{{-Identifier-}}</font>
        </td>
        <td class="borderR" align="left" valign="bottom">
          <font color="#000000"><br /></font>
        </td>
</tr>

Puedes agregar imágenes, definir una fuente, agregar un logo, tablas, comentarios, etc. En el caso de las imágenes también es posible mostrar imágenes en base al valor de un campo pero requiere configuración avanzada. Contáctanos si necesitas configurar esto y te guiaremos para realizarlo.

Asociar la Plantilla a tu proceso

En la pestaña Configuración de tu proceso, ve a Ajustes adicionales → Plantillas de Impresión y haz clic en el botón Agregar Plantilla.

En la ventana emergente podrás subir el archivo HTML y asignarle un alias, que será el nombre mostrado al momento de imprimir. También deberás seleccionar las Tareas de Usuario en las que la plantilla estará disponible. Opcionalmente, puedes agregar una descripción para recordar su propósito o su versión.

Actualizado el: 04/12/2025