Vai al contenuto principale
Tutte le collezioniLe venditeLa configurazioni dati
La personalizzazione dei modelli di stampa per i Documenti di Trasporto
La personalizzazione dei modelli di stampa per i Documenti di Trasporto

Come personalizzare le stampe dei documenti di trasporto

Salvatore Guidotto avatar
Scritto da Salvatore Guidotto
Aggiornato oltre 9 mesi fa

I modelli di stampa dei documenti di trasporto possono essere personalizzati utilizzando il tool gratuito jsreport.

Per poter utilizzare il tool è necessario prima effettuare la registrazione gratuita a jsreport oline.

I modelli di stampa sono basati su template in linguaggio HTML. Per effettuare la personalizzazione del modello di stampa è quindi sufficiente modificare il codice HTML del template.

Per maggiori informazioni o per ottenere degli esempi di utilizzo di jsreport è possibile consultare queste risorse:

Utilizzare i modelli standard per la personalizzazione

Per personalizzare il modello di stampa dei documenti di trasporto è necessario effettuare il download del pacchetto di modelli standard qui disponibile:

Pacchetto dei modelli standard

di Contabilità in Cloud

jsreport recipe

Package download

* Modelli DDT vendita e acquisto v6.0 (2024-02)

Chrome-pdf

Modelli DDT vendita e acquisto v5.0 (2023-09)

Phantom-pdf

Modelli DDT di vendita v1.0 (2020-06)

Phantom-pdf

Modelli DDT di vendita v2.0 (2020-09)

Phantom-pdf

Modelli DDT di vendita v3.0 (2020-11)

Phantom-pdf

Modelli DDT di vendita v4.0 (2020-12)

Phantom-pdf

Modelli DDT di acquisto v1.0 (2020-11)

Phantom-pdf

* Informazioni importanti sul pacchetto v6.0 di Febbraio 2024 ...

  • Il Phantom-pdf è stato archiviato in quanto non garantisce appieno i moderni standard di sicurezza, jsreport suggerisce pertanto di utilizzare il Chrome-pdf.

  • Per maggiori informazioni sul formato Chrome-pdf, consigliamo di consultare la guida di jsreport: Learn Chrome pdf recipe

  • I modelli contenuti nel pacchetto v6.0 sono stati tutti progettati adottando Chrome-pdf, in particolare queste le principiali novità:

    • le funzioni js presenti nel report, nell'header e nel footer sono state tutte inglobate nell'asset helper.js

    • le sezioni di header e footer sono state inglobate in un nuovo modello denominato header-footer che adesso è comune a tutti i modelli

    • Il foglio di stile styles.css è stato aggiornato in funzione alle modifiche apportate ai modelli

    • I modelli personalizzati realizzati con phantom-pdf e pubblicati prima della pubblicazione del pacchetto dei modelli standard v6.0 sono stati tutti aggiornati a Chrome-pdf. Se è pertanto necessario apportare utleriori variazioni ai modelli già pubblicati, è necessario richiedere al suppoorto clienti una copia aggiornata dei modelli del cliente per poter così apportare su questi le modifiche richieste dal cliente. Tutti i nuovi modelli, invece, dovranno essere realizzati utilizzando chrome-pdf e il pacchetto dei modelli standard v6.0.

Effettuato il download è necessario accedere alla propria sottoscrizione di jsreport e quindi effettuare l’import del pacchetto dei modelli standard.

Effettuata l’importazione si avranno a disposizione i modelli standard da cui partire per poter effettuare la personalizzazione.

Per procedere ulteriormente suggeriamo di:

  • creare una cartella utilizzando come nome il numero di abbonamento del cliente per cui si vuole personalizzare il modello (es.: 1116965)

  • effettuare la copia (clone) del modello standard specificando un nome specifico e quindi a questo punto spostarlo sulla cartella creata in precedenza

A questo punto si può procedere alla personalizzazione del modello.

Nel pacchetto dei modelli standard sono inclusi:

  • il modello dell'header e del footer che è unico e viene renderizzato insieme al modello principale

  • l'helper con le funzioni js comuni utilizzate all'inteno del modello di stampa

  • il foglio di stile (style.css) utilizzato dal modello di stampa (template HTML) e con cui è possibile personalizzare font, colori e stile dei testi del modello,

  • il json con dati di esempio (sales-ddt-sample) utile per poter eseguire l’anteprima del modello via via che verranno effettuate le modifiche.

Pubblicare il modello di stampa personalizzato

Effettuate le modifiche necessarie al modello, per poterlo pubblicare su Contabilità in Cloud è necessario proseguire nella maniera seguente:

  • Effettuare l’esportazione della sola cartella che contiene il modello personalizzato e produrre cosi il file .zip.

  • Rinominare il file .zip prodotto indicando il numero di abbonamento del cliente per cui dovrà essere reso disponibile il modello

  • Inviare il .zip come allegato per e-mail all’indirizzo contabilitaincloud@teamsystem.com specificando il numero di abbonamento del cliente, la ragione sociale e una breve descrizione delle personalizzazioni effettuate.

Il supporto clienti ricevuta l’e-mail prenderà in carico la richiesta e provvederà ad avviare la procedura di pubblicazione e ultimata la quale provvederà quindi a comunicare sempre a mezzo e-mail l’avvenuta pubblicazione del modello personalizzato.

Indicazioni di base per personalizzare il modello di stampa

Aggiungere o rimuovere campi dal modello di stampa

I campi che possono essere aggiunti sono quelli disponibili nel file di dati di esempio sales-ddt-sample. Per aggiungere un campo nel modello è necessario indicare il percorso esatto del campo rispetto a come è esposto nel file di dati di esempio e includendo l’intero valore tra doppie parentesi graffe, ad esempio il valore {{deliveryNote.client.name}} indicato nell’HTML identifica la ragione sociale del cliente specificato nel documento di trasporto.

File con i dati di esempio – percorso del campo da inserire nel modello

Indicazione del campo nel modello HTML

Aggiungere un’altra immagine nel modello

Per aggiungere un’altra immagine nel modello oltre al logo dell’azienda o per sostituire eventualmente quella configurata sui dati dell’azienda nelle impostazioni di Contabilità in Cloud, è possibile importare un’immagine su jsreport aggiungendo un nuovo asset (new entity\asset). L’immagine andrà collocato nella stessa cartella in cui si trova il modello. A questo punto nel codice HTML sarà sufficiente aggiungere un’istruzione come ad esempio la seguente

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

L’istruzione può essere generata in automatico subito dopo aver aggiunto l’immagine su jsreport, utilizzando il pulsante “Copy the embedding code“.

Personalizzare l’intestazione, il piede e il formato del modello [new]

Per personalizzare l’intestazione oppure del piede del modello occorre editare il modello header-footer. Questo modello può essere renderizzato insieme al modello principale grazie alla configurazione possibile dalla sezione pdf utils del modello principale.

Il formato dello del modello come il margine, l'orientamento, il formato pagina e le altrec caratteristiche sono configurabili accedendo al pannello proprietà alla sezione chrome pdf. La configurazione del formato va effettuata sia sul modello principale sia sul modello header-footer affinche le misure combacino e il report venga renderizzato regolarmente.

Personalizzare l’intestazione, il piede e il formato del modello [old]

Quanto qui descritto è valido solo per i report progettati con phantom-pdf. Leggere le informazioni importanti sul pacchetto v6.0 di Febbraio 2024 in testa a quest'articolo.

Per personalizzare l’intestazione oppure del piede del modello oppure il formato dello stesso (margine, orientamento, formato pagina, …) è necessario accedere dal pannello proprietà alla sezione phantom pdf.

Cliccando sui pulsanti Open in tab… delle sezioni Header e Footer è possibile accedere e modificare il codice HTML rispettivamente dell’intestazione e del piede.

Da questa sezione è quindi possibile personalizzare:

  • i margini, il formato e l’orientamento della pagina,

  • l’altezza della pagina da riservare dell’intestazione e al piede del modello.


Torna a

Hai ricevuto la risposta alla tua domanda?