R100 - Configurar plantillas de albaranes - REVISO

Los albaranes se pueden personalizar con la herramienta gratuita jsreport.

Para utilizar la herramienta, primero debes registrarte de forma gratuita en jsreport en línea.

Los albaranes se basan en plantillas de lenguaje HTML. Para personalizar los albaranes, simplemente, modifica el código HTML de la plantilla.

Para más información o para obtener ejemplos del uso de jsreport puedes consultar estos recursos:

• Introducción a jsreport, es un breve vídeo de introducción;
• Jsreport playground, es un entorno que contiene muchos ejemplos de uso;
• Jsreport learn, es la documentación técnica básica para usar jsreport.

Utiliza plantillas estándar para la personalización

Para personalizar los albaranes, es necesario descargar el paquete de plantillas estándar disponible aquí:

* Información importante sobre el paquete v6.0 de febrero de 2024...

• El Phantom-pdf ha sido archivado, ya que no cumple completamente con los estándares modernos de seguridad, por lo tanto, jsreport sugiere utilizar el Chrome-pdf.
• Para obtener más información sobre el formato Chrome-pdf, recomendamos consultar la guía de jsreport: Aprender la receta de Chrome pdf.
• Todos los modelos incluidos en el paquete v6.0 han sido diseñados utilizando Chrome-pdf, y estas son las principales novedades:
  • Todas las funciones js presentes en el informe, en el encabezado y en el pie de página han sido incorporadas en el activo helper.js.
  • Las secciones de encabezado y pie de página se han incorporado en un nuevo modelo llamado header-footer que ahora es común a todos los modelos.
  • El archivo de estilo styles.css ha sido actualizado en función de los cambios realizados en los modelos.

Después de la descarga, debes acceder a tu suscripción jsreport y luego importar el paquete de modelos estándar.

Una vez finalizada la importación, estarán disponibles las plantillas estándar para empezar a realizar la personalización.

Para continuar sugerimos:

• Crear una carpeta utilizando el número de suscripción del cliente para el que desea personalizar el modelo como nombre (p. ej.: 1116965)
• Copiar (duplicar) el modelo estándar especificando un nombre específico y luego, en este punto, moverlo a la carpeta creada previamente

En este punto se puede proceder a personalizar el modelo.

El paquete de modelos estándar incluye:

• El modelo del encabezado y del pie de página, que es único y se renderiza junto con el modelo principal.
• El helper con las funciones js comunes utilizadas dentro del modelo de impresión.
• La hoja de estilo (style.css) utilizada por el modelo de impresión (plantilla HTML) y con la que es posible personalizar la fuente, los colores y el estilo de los textos del modelo.
• El archivo JSON con datos de ejemplo (sales-ddt-sample), útil para previsualizar el modelo a medida que se realizan los cambios.

Publicar la plantilla personalizada

Después de realizar los cambios necesarios en el modelo, para publicarlo en el programa, es necesario proceder de la siguiente manera:

• Exporta solo la carpeta que contiene el modelo personalizado y genera el archivo .zip.
• Renombrar el archivo .zip producido indicando el número de contrato del cliente para el cual el modelo va a estar disponible
• Envía el .zip como archivo adjunto por correo electrónico a la dirección contabilitaincloud@teamsystem.com especificando el número de contrato del cliente, el nombre de la empresa y una breve descripción de las personalizaciones hechas.

Atención al cliente que se hará cargo de la solicitud e iniciará el procedimiento de implementarlo y, una vez completado, comunicará siempre por correo electrónico la publicación del modelo personalizado.

Pautas básicas para personalizar la plantilla de impresión

Agregar o eliminar campos de la plantilla de impresión

Los campos que se pueden agregar son los disponibles en el archivo de datos de muestra sales-ddt-sample. Para agregar un campo en la plantilla, debe indicar la ruta exacta del campo de cómo se expone en el archivo de datos de muestra e incluir el valor completo entre corchetes dobles, por ejemplo, el valor {{deliveryNote.client.name}} indicado en el HTML identifica la razón social del cliente especificada en el documento de transporte.

Archivo de datos de ejemplo: ruta al campo que se insertará en el modelo

Especificación del campo en la plantilla HTML

Agregar otra imagen en el modelo

Para agregar otra imagen en el modelo además del logotipo de la empresa o para eventualmente reemplazar la configurada en los datos de la empresa en la configuración de Contabilidad en la nube, es posible importar una imagen en jsreport agregando un nuevo activo (nueva entidad \ activo). La imagen se colocará en la misma carpeta donde se encuentra el modelo. En este punto del código HTML bastará con añadir una instrucción como la siguiente

<img src="{#asset /IT/Master/DdT/Sales/Custom template/1116965/img.png @encoding=dataURI}"/>

Las instrucciones se puede generar automáticamente inmediatamente después de agregar la imagen a jsreport, usando el botón "Copiar el código de incrustación".

Personalizar el encabezado, pie de página y formato del modelo [nuevo].

Para personalizar el encabezado o pie de página del modelo, es necesario editar el modelo header-footer. Este modelo puede renderizarse junto con el modelo principal gracias a la configuración posible desde la sección de utilidades de PDF del modelo principal.

El formato del modelo, como los márgenes, la orientación, el formato de página y otras características, se pueden configurar accediendo al panel de propiedades en la sección de Chrome PDF. La configuración del formato debe realizarse tanto en el modelo principal como en el modelo de encabezado-pie de página para que las medidas coincidan y el informe se renderice correctamente.

Personalizar el encabezado, pie de página y formato del modelo [antiguo]

Lo descrito aquí es válido solo para los informes diseñados con phantom-pdf. Lee la información importante sobre el paquete v6.0 de febrero de 2024 al comienzo de este artículo.

Lo descrito aquí es válido solo para los informes diseñados con phantom-pdf. Lee la información importante sobre el paquete v6.0 de febrero de 2024 al comienzo de este artículo.

Al hacer clic en Open in tab… delle sezioni Header e Footer, puedes acceder y editar el código HTML del encabezado y pie de página respectivamente.

Por lo tanto, desde esta sección es posible personalizar:

• Los márgenes, el formato y la orientación de la página,
• La altura de la página que se utilizará para el encabezado y al pie del modelo.