Administrateur Linux 

Concept basic des rapports odoo

 MG-BIO  October 26, 2016

Pour op miser Vos rapports, Odoo vous fournit une structure de mise en page globale de lignes
individuelles subdivisées en douze colonnes.

A
Chaque feuille Odoo comporte en haut, en bas, à gauche et à droite une marge spécifiée en millimètres
que vous pouvez l'obtenir à travers les étapes suivantes : Paramètres> Technique> Rapports> Formats
de papier.

B
Odoo subdivise une feuille en lignes (CSS classe "ligne") avec une marge supérieure (CSS classe "mt") et
une marge inférieure (CSS classe "mb"). Par exemple, pour définir une ligne avec 8px marge supérieure
et 32px marge inférieure vous avez besoin du code ci-dessous:

<div class="row mt8 mb32">Votre nouvelle ligne!</div>

Convert web pages and HTML files to PDF in your applications with the Pdfcrowd HTML to PDF API Printed with Pdfcrowd.com
 Comme par exemple dans Reports / Factures / Vues / report_invoice_document

Les marges disponibles sont: mt0, mt4, mt8, mt16, mt32, mt48, mt64, mt92, mt128, mb0, mb4, mb8,
mb16, mb32, mb48, mb64, mb92, mb128.

C
Odoo subdivise chaque ligne dans douze colonnes. Pour spécifier une certaine posi on et une largeur
d'un conteneur <div> il y a deux classes CSS à u liser - pour définir la largeur “col-[screensize]-[column-
factor]” et pour définir la posi on “col-[screensize]-[posi on-type]-[column-factor]”.

Par exemple, pour définir un conteneur div centré de 50% la largeur dont vous avez besoin le code
suivant:

<div class="col-xs-6 col-xs-offset-3"> Grand conteneur centré </div>

Explica on:col-xs-6 : signifie une largeur de 6 colonnes. Parce qu'il y a un total de 12 colonnes, c'est
exactement la moi é de celui-ci, c'est à dire 50%.col-xs-offset-3 : signifie que le conteneur commence à
afficher après une largeur de 3 colonnes. Parce qu'il y a un total de 12 colonnes et le conteneur lui-

Convert web pages and HTML files to PDF in your applications with the Pdfcrowd HTML to PDF API Printed with Pdfcrowd.com
 même comporte exactement 6 colonnes de large, il y a aussi 3 colonnes de gauche dans la par e droite .
C’est pourquoi le conteneur se trouve en milieu de la feuille.

Les tailles d'écran disponibles sont les suivantes:

xs (largeur inférieure à 768px), sm (mini-largeur: 768px), md (mini-largeur: 992px), lg (mini-largeur:
1200px)

Les facteurs de colonne disponibles sont les suivants :

1,2,3,4,5,6,7,8,9,10,11,12

Les types de Posi on disponibles sont les suivants :

offset (posi on horizontale absolue dans une ligne).
pull (posi on rela ve, sur la main gauche du dernier élément <div>).
push (posi on rela ve, sur la main droite du dernier élément <div>).

Exemple: pour posi onner un pe t conteneur (une seule colonne de largeur) sur le côté droit d’un
autre grand conteneur (voir exemple ci-dessus) avec deux colonnes distance, vous avez besoin du code
ci-dessous :

<div class="col-xs-1 col-xs-push-2">Li le container on the right</div>

Comme dans l'exemple suivant:

Enfin, voilà le code qui concré se ce tutoriel:

<?xml version="1.0"?>

<t t-name="sale.report_saleorder_document">

<t t-call="report.external_layout">

Convert web pages and HTML files to PDF in your applications with the Pdfcrowd HTML to PDF API Printed with Pdfcrowd.com
 <div class="page">

<div class="oe_structure"/>

<div class="row">

<div class="col-xs-4" style="text-align:le ">

<strong t-if="o.state in ['dra ','sent','manual']"> le </strong> <span t-field="o.date_order"/>

</div>

</div>

<div class="col-xs-4 col-xs-offset-8" style="text-align:le ">

<span t-if="o.state in ['dra ','sent']"><span t-field="o.partner_id. tle.shortcut"/></span>

<span t-if="o.state not in ['dra ','sent']"><span t-field="o.partner_id. tle.shortcut"/></span><span

t-field="o.partner_id.name"/>

<div t-field="o.partner_id.func on"/>

<div t-field="o.partner_id.parent_id"/>

</div>

<div class="row">

<div class="col-xs-12">

<br></br>

<br>Cher

<span t-if="o.state in ['dra ','sent']"><span t-field="o.partner_id. tle.shortcut"/></span>

<span t-if="o.state not in ['dra ','sent']"><span t-field="o.partner_id. tle.shortcut"/></span></br>

<br></br>

<br><p>Nec vox accusatoris ulla licet subdi cii in his malorum quaerebatur acervis ut saltem specie
tenus crimina praescrip s legum</p> <p>commi erentur, quod aliquo ens fecere principes saevi: sed
quicquid Caesaris implacabilita sedisset, id velut fas iusque perpensum</p> confes m urgebatur
impleri.</br>

</div>

</div>

<h2>

Convert web pages and HTML files to PDF in your applications with the Pdfcrowd HTML to PDF API Printed with Pdfcrowd.com
 <table>

<tr>

<div class="col-xs-2 col-xs-offset-2">

<td> OFFRE : </td>

<td><span t-field="o.partner_id.parent_id"/> </td></div>

</tr>

</table>

</h2>

<div class="row mt32 mb32" id="informa ons">

<div t-if="o.client_order_ref" class="col-xs-3">

<strong>Your Reference:</strong>

<p t-field="o.client_order_ref"/>

</div>

<div t-if="o.payment_term" class="col-xs-3">

<strong>Payment Term:</strong>

<p t-field="o.payment_term"/>

</div>

</div>

<table class="table table-condensed" style="border: 5px solid #9999">

<thead>

<tr>

<th>Presta on</th>

<th>Taxes</th>

<th class="text-right">Quan té</th>

<th class="text-right">Prix Unitaire</th>

<th groups="sale.group_discount_per_so_line">Disc.(%)</th>

<th class="text-right">Prix Global</th>

Convert web pages and HTML files to PDF in your applications with the Pdfcrowd HTML to PDF API Printed with Pdfcrowd.com
 </tr>

</thead>

<tbody class="sale_tbody">

<tr t-foreach="o.order_line" t-as="l">

<td>

<span t-field="l.name"/>

</td>

<td>

<span t-esc="', '.join(map(lambda x: x.name, l.tax_id))"/>

</td>

<td class="text-right">

<span t-field="l.product_uom_qty"/>

<span groups="product.group_uom" t-field="l.product_uom"/>

</td>

<td class="text-right">

<span t-field="l.price_unit"/>

</td>

<td groups="sale.group_discount_per_so_line">

<span t-field="l.discount"/>

</td>

<td class="text-right">

<span t-field="l.price_subtotal" t-field-op ons="{&quot;widget&quot;:

&quot;monetary&quot;,

&quot;display_currency&quot;: &quot;o.pricelist_id.currency_id&quot;}"/>

</td>

</tr>

</tbody>

</table>

Convert web pages and HTML files to PDF in your applications with the Pdfcrowd HTML to PDF API Printed with Pdfcrowd.com
 <div class="row">

<div class="col-xs-4 pull-right">

<table class="table table-condensed">

<tr class="border-black">

<td><strong>Offre HT</strong></td>

<td class="text-right">

<span t-field="o.amount_untaxed" t-field-op ons="{&quot;widget&quot;:

&quot;monetary&quot;, &quot;display_currency&quot;: &quot;o.pricelist_id.currency_id&quot;}"/>

</td>

</tr>

<tr class="border-black">

<td><strong>Total</strong></td>

<td class="text-right">

<span t-field="o.amount_total" t-field-op ons="{&quot;widget&quot;:

&quot;monetary&quot;, &quot;display_currency&quot;: &quot;o.pricelist_id.currency_id&quot;}"/>

</td>

</tr>

</table>

</div>

</div>

<br><p>Nec vox accusatoris ulla licet subdi cii in his malorum quaerebatur acervis ut saltem specie
tenus crimina praescrip s legum</p> <p>commi erentur, quod aliquo ens fecere principes saevi: sed
quicquid Caesaris implacabilita sedisset, id velut fas iusque perpensum</p> confes m urgebatur
impleri.</br>

<br></br>

<br></br>

<div class="row">

<div class="col-xs-4 pull-right">

Convert web pages and HTML files to PDF in your applications with the Pdfcrowd HTML to PDF API Printed with Pdfcrowd.com
 <div t-if="o.user_id.name" >

<strong><p t-field="o.user_id.name"/></strong>

</div>

</div>

</div>

</div>

</t>

<t t-call="report.external_layout">

Et voilà ce que ça donne:

Convert web pages and HTML files to PDF in your applications with the Pdfcrowd HTML to PDF API Printed with Pdfcrowd.com
Convert web pages and HTML files to PDF in your applications with the Pdfcrowd HTML to PDF API Printed with Pdfcrowd.com
 Prochain tutoriel “Concep on d’un rapport de A à Z”

Tags Odoo

You might like Show more

Convert web pages and HTML files to PDF in your applications with the Pdfcrowd HTML to PDF API Printed with Pdfcrowd.com