Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.


Aviso
titleClave para acceder al video:
Fiscal1234

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

Conector de Widget
width900px, 90%
urlhttps://vimeo.com/749231075


Painel
borderColor#EBEBEB
titleColor#FFF#ffffff
titleBGColor#2C004B#704581
titleDatos útiles

Nivel de dificultad: baja

Video de 2:41 min

Requisitos previos: No (funcionalidad base del Producto)

Videos relacionados: 

  • Fiscal Flow 1.3 - Asociación de plantillas a tipos de comprobantes
  • Fiscal Flow 1.3 - Configuración de envío de comprobantes por email


    Informações
    titleLinks 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


    Expandir
    titleEstructura básica del segundo recuadro del diseño de comprobante.
    • <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;
        }



    Informações
    titleManual.

    FF - Diseño de comprobantes