This article is also available in:
Cómo funciona

Si no tienes una plantilla adjunta a tu proceso, cuando cliquees el ícono de impresión en una instancia de proceso, se abrirá la ventana de impresión por defecto de tu navegador.

Para configurarla, puedes adjuntar un archivo en HTML en la pestaña de "Configuración". Una vez subida la plantilla de impresión, cada vez que hagas clic en el ícono de la impresora, se descargará un archivo en pdf con la estructura definida en la plantilla.



La plantilla debe ser un archivo HTML con la estructura deseada (se requiere conocimiento básico en HTML).

A pesar de que es un archivo HTML, en Flokzu utilizamos iText library, por ende, es posible que no todas las funcionalidades de HTML se encuentren disponibles.

Atajo: Diseña tu plantilla en Excel primero

Lo que hacemos normalmente es definir la estructura en Excel. Esto resulta particularmente útil porque cualquier persona puede realizar esta tarea, incluso si no tiene experiencia técnica. Luego utilizamos este sitio web para convertir el archivo de Excel en HTML. Finalmente, agregamos los campos deseados y realizamos los ajustes necesarios. Para pulir el documento final en HTML y asegurarnos que todo funcione, 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 }}.

Ten en cuenta que los campos de tipo firma no pueden incluirse en plantillas de impresión.

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

{{-Identifier-}} : ID de la instancia de proceso
{{-Process 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.
¿Este artículo te resultó útil?
¡Gracias!