Customizarea rapoartele de tip formular derivate din sursa de date HTML
Customizarea rapoartele de tip formular derivate din sursa de date HTML
Începând cu versiunea v.19.15.0 a aplicației NexusERP, în modulele care au rapoarte de tip HTML, vor fi disponibile rapoarte de tip formular derivate din sursele de date. Astfel, s-au introdus în kit două modele predefinite, de ex., în modulul Facturi clienți vor fi rapoartele: "Formular factura clasic" și "Formular factura produse cu poze". Conținutul acestora se află în tab-ul Texte și este în limbajul HTML și CSS, oferindu-vă posibilitatea de a modifica afișarea acestora.
Textului HTML are urmatoare strunctură:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style></style>
</head>
<body>
</body>
</html>
În cadrul elementelor: <head> </head>, pe langă secvența de cod <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />, va fi inclus și conținutul CSS cuprins între elementele <style> </style>. Astfel, CSS va permite stilizarea elementelor HTML, prin stabilirea unor proprietăți, ce țin de culoare, dimensiune, font, poziționare etc.
Exemplu:
<style>
.div1
{
text-align: center;
vertical-align: middle;
text-align:center;
font-size:25px;
color:#264270;
}
</style>
Pe langă clasele CSS, sunt incluse și tabele care urmează să fie afișate în raport. De exemplu, pentru afișarea tabelului "Tabel produse cu poze" se va folosi urmatoare secvență:
.coloana_imagine img {width:60px;height:60px}
.TabelProduseCuPoze td {border-bottom: 1px solid black;background-color:#f4f8ff;}
.TabelProduseCuPoze th {border-bottom: 1px solid black;border-top: 1px solid black;font-weight:bold;background-color:#b4c9ea;color:#264270;text-align:center;}
.TabelProduseCuPoze td {padding:2px;}
.TabelProduseCuPoze .coloana_nr_crt {width:4%;text-align:center;}
.TabelProduseCuPoze .coloana_imagine {width:15%;text-align:center;}
.TabelProduseCuPoze .coloana_denpr {width:30%;text-align:left;}
.TabelProduseCuPoze .coloana_um {width:8%;text-align:center;}
.TabelProduseCuPoze .coloana_cantitate {width:15%;text-align:right;}
.TabelProduseCuPoze .coloana_puv {width:16%;text-align:right;}
.TabelProduseCuPoze .coloana_valoare {width:15%;text-align:right;}
.TabelProduseCuPoze .coloana_cod_ext {visibility:hidden;display:none ;border:none;padding:0px;}
.TabelProduseCuPoze .coloana_descriere {visibility:hidden;display:none ;border:none;padding:0px;}
Prima parte a acestei secvențe .coloana_imagine img {width:60px;height:60px}, este folosită pentru redimensionarea imaginilor produselor ("width:60px" - lațime 60px; "height:60px" - înalțime 60 px).
Cea dea doua parte a secvenței este:
.TabelProduseCuPoze td {border-bottom: 1px solid black;background-color:#f4f8ff;}
.TabelProduseCuPoze th {border-bottom: 1px solid black;border-top: 1px solid black;font-weight:bold;background-color:#b4c9ea;color:#264270;text-align:center;} , este pentru a stabili proprietățile antetului de tabel, iar ultima parte a secvenței este:
a) Tabel produse cu poze
.TabelProduseCuPoze td {padding:2px;}
.TabelProduseCuPoze .coloana_nr_crt {width:4%;text-align:center;}
.TabelProduseCuPoze .coloana_imagine {width:15%;text-align:center;}
.TabelProduseCuPoze .coloana_denpr {width:30%;text-align:left;}
.TabelProduseCuPoze .coloana_um {width:8%;text-align:center;}
.TabelProduseCuPoze .coloana_cantitate {width:15%;text-align:right;}
.TabelProduseCuPoze .coloana_puv {width:16%;text-align:right;}
.TabelProduseCuPoze .coloana_valoare {width:15%;text-align:right;}
.TabelProduseCuPoze .coloana_cod_ext {visibility:hidden;display:none ;border:none;padding:0px;}
.TabelProduseCuPoze .coloana_descriere {visibility:hidden;display:none ;border:none;padding:0px;}
b) Tabel produse fără poze
.TabelProduse td {border-bottom: 1px solid black;background-color:#f2ffea;}
.TabelProduse th {border-bottom: 1px solid black;border-top: 1px solid black;font-weight:bold;background-color:#c7e0b8;color:#264270;text-align:center;}
.coloana_nr_crt {width:8%;text-align:center;}
.coloana_denpr {width:50%;text-align:left;}
.coloana_cantitate {width:14%;text-align:right; }
.coloana_um {width:14%;text-align:center;}
.coloana_nr_lot {visibility: hidden;display:none; border:none;padding:0px;}
.coloana_garantie {width:14%;text-align:center;}
.coloana_garantie_dep {visibility: hidden;display:none; border:none;padding:0px;}
.coloana_ambalare {visibility: hidden;display:none; border:none;padding:0px;}
.coloana_data_exp {visibility: hidden;display:none; border:none;padding:0px;}
.coloana_cantitate2 {visibility: hidden;display:none; border:none;padding:0px;}
.coloana_um2 {visibility: hidden;display:none; border:none;padding:0px;}
.coloana_cod_ext {visibility: hidden;display:none; border:none;padding:0px;}
.coloana_cod_tara_origine {visibility: hidden;display:none; border:none;padding:0px;}
.coloana_stas {visibility: hidden;display:none; border:none;padding:0px;}
Aceste doua secvențe sunt pentru a stabili coloanele care vor fi afișate în tabel, precum și dimensiunea, alinierea textului din fiecare coloană, etc.
Atenție! Pentru a avea un tabel corect, fără coloane goale, trebuie sa folosiți secvența de cod: {visibility:hidden;display:none;border:none;padding:0px;} , pentru fiecare coloană pe care nu doriți să o afisați în tabel. Ex.: .TabelProduseCuPoze .coloana_cod_ext {visibility:hidden;display:none ;border:none;padding:0pxș}
Dacă prima parte a fost pentru a stabili proprietățile elemetelor, a doua secțiune a conținutului HTML este pentru afișarea efectivă a acestora și se include în cadrul elementelor: <body> </body>.
Primele informații afișate în această secțiune sunt cele despre furnizor și client și afișarea tabelul prin includerea secvenței: #%Tabel produse cu poze%# , urmate de observațiile documentului, datele privind expediția(dacă este cazul) și semnăturile:
<div class="div3">Observa?ii:</br>#%Observatii%#<br>
_______________________________________________________________________________________</div>
<table cellpadding=0 cellspacing=0 border=0 bgcolor="#f4f8ff" width=100%>
<tr>
<td rowspan="4"><h4><i>Date privind expedi?ia:</i></h4>
----------------------------------------------------------------</br>
Numele delegatului: <b>#%Delegat Nume%#</b></br>
Buletinul/Cartea de identitate: seria <b>#%Delegat CI Seria%#</b> nr. <b>#%Delegat CI Numar%#</b> </br>
eliberat: <b>#%Delegat CI Eliberat%#</b> </br>
Mijloc de transport: Nr. <b>#%Delegat Mijloc Transport%#</b></br>
Data expediere:                 ora: </br>
----------------------------------------------------------------</br>
Semnaturi:
</td></tr>
De asemenea, tot în acestă secțiunea a raportului sunt afișate și totaluri documentelor.