This question has been flagged
5 Replies
7572 Views
invoicelayoutquotesales.order
Avatar
Scott Hart

I want to create altering white, then shaded, with, background per line item to make reading the invoice easier. Can some give me the code example if I need to change the quote/ sales layout?

Example, something simple like https://www.google.com/search?q=invoices&rlz=1CDGOYI_enUS629US629&hl=en-US&prmd=isavn&source=lnms&tbm=isch&sa=X&ved=0CAcQ_AUoAWoVChMIr-qMg5KVyAIVh9KACh2YOwKE#imgrc=YQZihPSSm5dthM%3A

BUT please not that it will need to be a different grey or blue or what ever from what the "sections" model chooses.

Thank you in advance! 

Avatar
Discard
E.M.

I would love to have such feature too.

Avatar
Shawn Varghese
Best Answer

If I understood your question correctly, you simply require banding of colours on your template. This is easily possible. The default sale or invoice templates loop through the order lines, so you can use the _parity keyword to help with creating bands.

<t t-foreach="p['lines']" t-as="l">
    <tr t-attf-class="row-{{l_parity}}">

Here, at run-time row-{{l_parity}} will automatically be converted to row-odd or row-even. Therefore, if you define your css as below, the corresponding background colours will be applied on the alternate rows.

.row-odd
{
   background-color:rgb(232,232,232);
}

.row-even
{
   background-color:rgb(255,255,255);
}

It is a little difficult to format code and things here. If you need more help, please e-mail me at shawnvarghese.m@gmail.com - I can explain in more detail.

Avatar
Discard
Scott Hart
Author

That is correct! but where exactly do you find the correct css?

Shawn Varghese

Could you clarify what you are referring to as correct css? Did you mean to ask how you can include the css file?

Avatar
Scott Hart
Author Best Answer

OK... So I'm not seeing it brother... 

report_saleorder_document

<?xml version="1.0"?>

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

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

<div class="page">

<div class="oe_structure"/>

<div class="row">

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

<strong t-if="o.partner_shipping_id == o.partner_invoice_id">INVOICE AND SHIPPING ADDRESS:</strong>

<strong t-if="o.partner_shipping_id != o.partner_invoice_id">INVOICE ADDRESS:</strong>

<div t-field="o.partner_invoice_id" t-field-options="{&quot;widget&quot;: &quot;contact&quot;, &quot;fields&quot;: [&quot;address&quot;, &quot;name&quot;, &quot;phone&quot;, &quot;fax&quot;], &quot;no_marker&quot;: true}"/>

<p t-if="o.partner_id.vat">VAT: <span t-field="o.partner_id.vat"/></p>

<div t-if="o.partner_shipping_id != o.partner_invoice_id" class="mt8">

<strong>SHIPPING ADDRESS:</strong>

<div t-field="o.partner_shipping_id" t-field-options="{&quot;widget&quot;: &quot;contact&quot;, &quot;fields&quot;: [&quot;address&quot;, &quot;name&quot;, &quot;phone&quot;, &quot;fax&quot;], &quot;no_marker&quot;: true}"/>

<p t-if="o.partner_id.vat">VAT: <span t-field="o.partner_id.vat"/></p>

</div>

</div>

<div class="col-xs-5 col-xs-offset-1">

<div t-field="o.partner_id" t-field-options="{&quot;widget&quot;: &quot;contact&quot;, &quot;fields&quot;: [&quot;address&quot;, &quot;name&quot;], &quot;no_marker&quot;: true}"/>

</div>

</div>

<h2>

<span t-if="o.state not in ['draft','sent']">ORDER N° </span>

<span t-if="o.state in ['draft','sent']">QUOTATION N° </span>

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

</h2>

<div class="row mt32 mb32" id="informations">

<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.date_order" class="col-xs-3">

<strong t-if="o.state not in ['draft','sent']">DATE ORDERED:</strong>

<strong t-if="o.state in ['draft','sent']">QUOTATION DATE:</strong>

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

</div>

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

<strong>SALESPERSON:</strong>

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

</div>

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

<strong>PAYMENT TERMS:</strong>

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

</div>

</div>

<table class="table table-condensed">

<thead>

<tr>

<th class="text-LEFT">DESCRIPTION</th>

<th class="text-LEFT">TAXES</th>

<th class="text-LEFT">QUANITITY</th>

<th class="text-LEFT">PACK SIZE</th>

<th class="text-right">UNIT PRICE</th>

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

<th class="text-right">EXTENED PRICE</th>

</tr>

</thead>

<t t-foreach="p['lines']" t-as="l">

<tr t-attf-class="row-{{l_parity}}">

<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-LEFTt">

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

</td>

<td class="text-LEFTt">

<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-options="{&quot;widget&quot;: &quot;monetary&quot;, &quot;display_currency&quot;: &quot;o.pricelist_id.currency_id&quot;}"/>

</td>

</tr>

</tbody>

</tr>

</t>

</table>

<div class="row">

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

<table class="table table-condensed">

<tr class="border-black">

<td><strong>TOTAL WITHOUT TAXES</strong></td>

<td class="text-right">

<span t-field="o.amount_untaxed" t-field-options="{&quot;widget&quot;: &quot;monetary&quot;, &quot;display_currency&quot;: &quot;o.pricelist_id.currency_id&quot;}"/>

</td>

</tr>

<tr>

<td>TAXES</td>

<td class="text-right">

<span t-field="o.amount_tax" t-field-options="{&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-options="{&quot;widget&quot;: &quot;monetary&quot;, &quot;display_currency&quot;: &quot;o.pricelist_id.currency_id&quot;}"/>

</td>

</tr>

</table>

</div>

</div>

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

<p t-if="o.payment_term.note">

<strong>PAYMENT:</strong>

<span t-field="o.payment_term.note"/>

</p>

<div class="oe_structure"/>

</div>

</t>

</t>


and in the CSS under addons/report/static/src/css reset.min.css?


/*

HTML5 CSS Reset
Based on Eric Meyer's CSS Reset
and html5doctor.com HTML5 Reset

Copyright (c) 2011 736 Computing Services Limited
Released under the MIT license. http://opensource.736cs.com/licenses/mit

*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, audio, canvas, details, figcaption,
figure, footer, header, hgroup, mark, menu, meter, nav,
output, progress, section, summary, time, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

body {
line-height: 1;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section, blockquote {
display: block;
}

nav ul {
list-style: none;
}

ol {
list-style: decimal;
}

ul {
list-style: disc;
}

ul ul {
list-style: circle;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

ins {
text-decoration: underline;
}

del {
text-decoration: line-through;
}

mark {
background: none;
}

abbr[title], dfn[title] {
border-bottom:1px dotted #000;
cursor:help;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}

input[type="submit"], input[type="button"], button {
padding: 0 !important;
margin: 0 !important;
}

input, select, a img {
vertical-align: middle;
}
.row-odd
{
background-color:rgb(232,232,232);
}

.row-even
{
background-color:rgb(255,255,255);
}




Avatar
Discard