En este video se detalla el proceso de creación de diseños de comprobantes en la consola de Fiscal Flow


Datos útiles

Nivel de dificultad: baja

Video de 2:41 min

Requisitos previos: No (funcionalidad base del Producto)

Links relacionados:

En el siguiente link, se brinda información sombre la creación de API keys en SendGrid: https://docs.sendgrid.com/ui/account-and-settings/api-keys

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

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



Manual.

FF - Diseño de comprobantes



  • Sem rótulos