Odoo Help

Welcome!

This community is for beginners and experts willing to share their Odoo knowledge. It's not a forum to discuss ideas, but a knowledge base of questions and their answers.

1

Quote and invoice layout

By
Scott Hart
on 9/26/15, 12:15 PM 1,157 views

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! 

I would love to have such feature too.

E.M.
on 9/26/15, 12:34 PM
1
Shawn Varghese
On 9/27/15, 3:44 AM

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.

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

Scott Hart
on 9/27/15, 2:17 PM

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

Shawn Varghese
on 9/27/15, 3:54 PM
0
Scott Hart
On 9/30/15, 4:19 PM

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);
}




Your Answer

Please try to give a substantial answer. If you wanted to comment on the question or answer, just use the commenting tool. Please remember that you can always revise your answers - no need to answer the same question twice. Also, please don't forget to vote - it really helps to select the best questions and answers!

About This Community

This community is for professionals and enthusiasts of our products and services. Read Guidelines

Question tools

1 follower(s)

Stats

Asked: 9/26/15, 12:15 PM
Seen: 1157 times
Last updated: 9/30/15, 4:19 PM