AR - Diseñador de comprobantes



Contenido


Descripcion

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.

image2021-5-18_10-58-17.png

Opciones generales

Nuevo

Para crear una nueva plantilla se solicitan los siguientes datos:

  • Canal de Venta
  • Nombre
  • Subject del correo electrónico: asunto que llevará el correo electrónico, en caso de enviar el comprobante por email.
  • From: remitente que llevará el correo electrónico, en caso de enviar el comprobante por email.
  • API (SendGrid)
  • URL Logo: ubicación de donde tomar el logo que se quiera colocar en la plantilla.
  • Activo: utilizar para las plantillas que no se utilicen más.

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.

Opciones por plantilla

A continuación se describen las opciones disponibles al seleccionar una plantila en particular.

Editar

Permite modificar todos los datos registrados en el alta.

Auditoría

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.

HTML y XML

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>
  • Seccion XML: detalle del comprobante en HTML. Permite definir una estructura de encabezado-cuerpo-pie de página. La estructura básica es la siguiente:

    <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:

    <table>

    Representa una tabla, igual que en HTML, y puede tener los siguientes atributos:

    • class: nombre del estilo.

    <row>

    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:

    • class: nombre del estilo.
    • itemsHeader: significa que es la cabecera de la tabla de items, que debe reperitse por cada página.
    • filter: en caso de que no quiera mostrarse la sección bajo determinada condición. Posee 3 componentes:
      • el atributo por el cual filtrar: puede ser cualquier atributo recibido en la colección documentInfo, del fiscalDocument
      • el comparador: 
        • eq para IGUAL
        • ne para DISTINTO
      • el valor con el cual comparar.

    En el caso de que no se reciba el atributo utilizado en el filter o que no tenga valor, se oculta el row.

    Ejemplos:

    • Mostrar una sección si es cliente fidelidado.
      • Para eso, debería haber enviado un tag "clienteFidelizado" dentro de la colección documentInfo con un valor, por ejemplo, "true". 
      • El filtro sería: filter="clienteFidelizado:eq:true"
    • NO mostrar una sección si es cliente fidelidado.
      • Para eso, debería haber enviado un tag "clienteFidelizado" dentro de la colección documentInfo con un valor, por ejemplo: "true".
      • El filtro sería: filter = "clienteFidelizado:ne:true"
    • Mostrar la seccion si el cliente tiene dirección de envío (cualquiera sea).
      • Para eso, debería haber enviado un tag "dirección" dentro de la colección documentInfo con un valor, por ejemplo: "Av. Libertador 32056, Olivos, Buenos Aires".
      • El filtro sería: filter = "dirección:ne:**************************" (colocar cualquier valor que no se recibiría). Si se recibe cualquier cosa, menos estos asteriscos, se muestra el contenido)

    <column>

    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:

    • class: nombre del estilo.
    • colspan: indica cuántas columnas ocupa, dentro de la fila, es el atributo colspan del tag td del html.

    <container>

    Representa un contenedor (un DIV), es en HTML, el atributo DIV, y puede tener los siguientes atributos:

    • class: nombre del estilo.

    <repeater>

    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">
    • entity: la entidad:
      • items
      • paymentMethod
      • relatedTaxes
      • relatedOtherTaxes
      • optionals
      • relatedInvoices
    • prop: el atributo que se repetirá
    • max: la máxima cantidad de lineas por página
    • filter: en caso de que no quiera repetiese toda la colección, se agregará el tag filter, que posee 3 componentes:
      • el campo por el cual filtrar
      • el comparador (eq o ne)
      • Uno o mas valores separados por ";"
    • Ejemplo: filtrar registros cuyo campo code sea igual a 4 | filter="code:eq:4"
    • Ejemplo filtrar registros cuyo campo code NO sea igual a 4 | filter="code:ne:4"
    • Ejemplo: filtrar registros cuyo campo code sea 4 o 8 | filter="code:eq:4;8"

    <field>

    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:

    • control: define el tipo de field. Representa el tipo de contenido que se mostrará en el comprobante, pudiendo ser:
      • label: un texto, por ejemplo, el nombre del cliente, una dirección.
      • image: una imagen, por ejemplo el logo, el qr.
      • table: una tabla, por ejemplo, el listado de productos, detalle de descuentos.
    • class: nombre del estilo.

    • type: tipo de dato que se mostrará, trabaja en conjunto con el atributo "format", siendo disponibles las siguientes opciones:

      • string: un texto. Formatos disponibles:

        • 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"/>

        • replace: permite modificar un caracter por otro. Ejemplo: Muestra la cantidad de un ítem cambiando el signo "." por ","
          •  <field control="label" type="string" entity="item" prop="qty" format="replace/./,"/>

      • number: un numero. Formatos disponibles:

        • "negative": invierte el signo del número. 

        • Ejemplo: <field control="label" type="number" entity="relatedOtherTax" prop="aliquot" class="inline" prefix=" (" suffix=" %)" />

      • money: un importe. Aplica formato '$ 0,0.00'. Formatos disponibles:

        • "negative": invierte el signo del número. Ejemplo: importe de descuentos en negativo:

        • <field control="label" type="money" entity="fiscalDocument" prop="discountAmount" format="negative" />
      • date: una fecha, aplica formato DD/MM/YYYY. Ejemplo: Fecha del comprobante:
        • <field control="label" type="date" entity="fiscalDocument" prop="invoiceDate" prefix="Fecha: " class="company-header"/>
      • datetime: aplica formato DD/MM/YYYY HH:mm:ss
    • format: ver opciones diponibles según atributo "type".

    Campos de texto: <field control="label">

    Permite definir elementos de texto en el comprobante, cuyo valor puede provenir de una entidad o ser un texto fijo. En ambos casos requiere definir una entidad (tag "entity") y la propiedad de dicha entidad (tag "prop").

  • Para insertar un texto fijo, se utiliza el siguiente formato:

    <field control="label" type="string" entity="text" prop="Contenido a mostrar"/>

  • Para obtener el contenido de una entidad se debe definir el tag "entity", basadas en el contenido recibido al autorizar un comprobante (el listado completo de entidades y sus atributos se puede consultar en el detalle del servicio de autorización (Ver: FiscalFlow Server - Servicios Facturación electrónica , sección Servicio Factura Electrónica> Servicios específicos> authorize > Request)
    • tag entity: opciones disponibles
      • company: datos de la compañía.
      • channel: datos de la unidad de negocio.
      • store: datos de la tienda.
      • fiscalDocument: comprobante.
      • invoiceType: datos del tipo de comprobante.
      • customer: datos del cliente.
      • taxCategory: categoría impositiva del cliente
      • documentType: datos del tipo de documento del cliente
      • relatedTax: impuesto.
      • relatedOtherTax: otros impuestos.
      • promotion: promociones
      • benefit: benficios.
      • paymentMethod: medios de pago.
      • optional: opcionales
      • relatedInvoice: comprobantes asociados.
    • tag prop: es el atributo de la entidad que queremos mostrar. Ejemplo, fiscalDocument.authorizationCode para mostrar el CAE o customer.businessName para mostrar el cliente.

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"/>

Campos de imágenes: <field control="image">

Permite definir imágenes en el comprobante, cuyo valor puede provenir de una entidad o de una url.

Ejemplos:

    • Logo de la plantila:
      • <field control="image" type="string" entity="mailTemplate" prop="logoUrl"width="112px" height="60px" alt="logo" />
    • Código QR:
      • <field control="image" type="string" entity="qr" width="120px" height="120px" alt="qr" />
    • Logo de AFIP:
      • <field control="image" type="string" entity="text" prop="logoafip.png"width="90px" height="50px" alt="logo" />
    • Otra imagen:
      •  <field control="image" type="string" url="data:image/png;base64,..." width="200px" height="150px" alt="productLogo" />

Campos de tablas: <field control="table">

Permite definir contenido en forma de tabla en el comprobante, cuyo valor puede provenir del resumen del listado de:

  • Promociones. Ejemplo:

    • <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;
      }


Campos Calculados

        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>

Boton descarga PDF

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:





  • Sem rótulos