- Criado por Usuário desconhecido (paola.messidoro), última alteração por Maria Gala Higgins em abr 10, 2024
En este video se detalla el proceso de creación de diseños de comprobantes en la consola de Fiscal Flow
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/./,"/>
- <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"/>
- <field control="label" type="date" entity="fiscalDocument" prop="invoiceDate" prefix="Fecha: " class="company-header"/>
- datetime: aplica formato DD/MM/YYYY HH:mm:ss
- string: un texto. Formatos disponibles:
- 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.
- tag entity: opciones disponibles
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" />
- Logo de la plantila:
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;
}
- Sem rótulos