AR - Diseñador de comprobantes
Contenido
Fiscal Flow ofrece la posibilidad de diseñar los comprobantes a disponibilizar a los clientes, definiendo plantillas en formato HTML.
Fiscal Flow genera automáticamente una plantilla base por tipo de comprobante, por unidad de negocio. Estas plantillas pueden ser modificadas desde esta sección o se pueden crear plantillas nuevas, las cuales deben ser asociadas a el/los tipos de comprobantes deseados, desde Negocio> Unidades de negocio> Plantillas.
El diseño de las plantillas requiere nociones del lenguaje HTML.
Diagrama conceptual de como se crean los comprobantes PDF's a partir de los datos del comprobante (json) y la definición de una plantilla HTML:
En la siguiente pantalla vemos el listado completo de las plantillas existentes.
Cada plantilla está asociada a un único canal de ventas.
Para crear una nueva plantilla se solicitan los siguientes datos:
Todos los campos son requeridos.
Recordar que luego esta plantilla debe asociarse al tipo de comprobante deseado, de la unidad de negocios correspondientes, desde Negocio> Unidades de negocio> Plantillas.
A continuación se describen las opciones disponibles al seleccionar una plantila en particular.
Permite modificar todos los datos registrados en el alta.
Esta opción permite acceder al listado del histórico de cambios realizados sobre la plantilla seleccionada, indicando nombre de usuario, acción y fecha.
Al acceder a la opción "Detalle" se puede ver la información original y la resultando, identificándose en forma resaltada los datos modificados. Es especialmente útil para recuperar las versiones anteriores de una plantilla modificada, si al hacer cambios no obtuvimos los resultados esperados.
Esta opción está disponible para cada plantilla del listado y permite definir el contenido del comprobante.
La información se solicita en dos secciones:
Primer recuadro: Estilos: tanto el comprobante PDF como el HTML, deberán poseer estilos en formato CSS, respetando la siguiente plantilla:
<html lang="es">
<head>
<style>
<!--todos los estilos-->
</style>
</head>
<body>
{body}
</body>
</html> |
<header>
<table class="table-container">
<!CONTENIDO DE LA CABECERA>
</table>
</header>
<body>
<table class="table-container">
<!CONTENIDO DEL CUERPO>
</table>
</body>
<footer>
<table class="table-container">
<!CONTENIDO DEL PIE DE PAGINA>
</table>
</footer>
NOTA: No remover los tags: <header/>, <body /> y <footer/> ya que permiten la correcta segmentación de las partes del comprobante dentro del PDF generado.
Adicionalmente se pueden incluir los lo siguientes tags, para modelar el contenido del comprobante:
Representa una tabla, igual que en HTML, y puede tener los siguientes atributos:
Representa una fila dentro de una tabla, es en HTML, el atributo TR y debe ir siempre dentro de un tag table, y puede tener los siguientes atributos:
En el caso de que no se reciba el atributo utilizado en el filter o que no tenga valor, se oculta el row.
Ejemplos:
Representa una columna dentro de una tabla, siempre va dentro de un atributo <row> es en HTML, el atributo TD, y puede tener los siguientes atributos:
Representa un contenedor (un DIV), es en HTML, el atributo DIV, y puede tener los siguientes atributos:
Representa una sección de la plantilla que se repite, basada en una colección, por ejemplo, items.
Por ejemplo:
<repeater entity="fiscalDocument" prop="items" max="20" header="itemsHeader"> |
Representa un campo con información, puede ser de una entidad (por ejemplo, de la factura o el cliente) o simplemente un texto (label).
Hay fields de distinto tipo, definidos por el tag "control". Para cada uno de ellos se utilizan distintos tags para modelar el comportamiento, siendo los comunes a todos:
type: tipo de dato que se mostrará, trabaja en conjunto con el atributo "format", siendo disponibles las siguientes opciones:
left: rellena a izquierda con un valor definido. Ejemplo: Muestra el código del tipo de comprobante, completando con "0" a izquierda:
<field control="label" type="string" class="invoice-type-code" entity="invoiceType" prop="code" prefix="COD: " format="left.3.0"/>
number: un numero. Formatos disponibles:
"negative": invierte el signo del número.
money: un importe. Aplica formato '$ 0,0.00'. Formatos disponibles:
"negative": invierte el signo del número. Ejemplo: importe de descuentos en negativo:
Para insertar un texto fijo, se utiliza el siguiente formato:
<field control="label" type="string" entity="text" prop="Contenido a mostrar"/>
Ejemplos:
Punto de venta: <field control="label" type="string" entity="fiscalDocument" prop="pointOfSale" prefix=" N° " suffix =" - " class="inline" format="left.5.0"/>
Razón social del cliente: <field control="label" type="string" entity="customer" prop="businessName"/>
Permite definir imágenes en el comprobante, cuyo valor puede provenir de una entidad o de una url.
Ejemplos:
Permite definir contenido en forma de tabla en el comprobante, cuyo valor puede provenir del resumen del listado de:
<field control="table" type="string" entity="fiscalDocument" prop="discountSummary" format="negative"/>/>
El tag format es opcional, de no informarse se muestran los importes sin signo.
El estilo de este componentes se puede editar en:
.table-discounts{
float:left;
}
Permite realizar operaciones aritméticas entre campos. Las operaciones permitidas son Suma, resta, multiplicación y división ( +, -, * y /). Para poder realizar operaciones entre dos o mas campos se deberá indicar en el atributo entity = "math" y en el valor value la operación de los campos a realizar, por ejemplo:
<field entity="math" value="item.qty * item.unitPrice" type="money"/>
Tener en cuenta que si queremos realizar operaciones en campos donde existe mas de un registro, como puede llegar a ser los items, debe estar contenido dentro de un <repeater> como se explico anteriormente, por ejemplo:
<repeater entity="fiscalDocument" prop="items" max="15">
<field entity="math" value="item.qty * item.unitPrice" type="money"/>
</repeater>
Se podra incluir en los template que llegan por email (Template QR HTML), un boton el cual permitirá descargar el PDF del comprobante.
Para poder incluirlo se deberan agregar el atributo control="button" y download="pdf".
Por ejemplo:
<field control="button" label="Descargar PDF" download="pdf"/>
En el atributo label se le podrá indicar el nombre del boton.
Ejemplo de boton en envio de mail:
