Hi, i like to change the layout of invoices in Odoo 13. The address field should be on the left side. I know, that i had to change some reports or views, but i dont know which one exactly, now it is trial and error (with more error than success). thanks!
Odoo is the world's easiest all-in-one management software.
It includes hundreds of business apps:
- CRM
- e-Commerce
- Accounting
- Inventory
- PoS
- Project
- MRP
This question has been flagged
3
Replies
13865
Views
In order to manipulate the position of such content elements, you need to understand Bootstrap's grid system and use the corresponding classes. You should create a module and inherit the corresponding QWeb view using xpath expressions to amend the corresponding classes.
The following example is for Odoo 9.0 and does not exactly what you want, but it shows a good part of manipulating QWeb views according to your custom requirements, you'll get the idea:
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<data>
<template id="tw_twanda_reportdesign.report_invoice_document" name="tw_twanda_design_invoice" inherit_id="account.report_invoice_document" active="True" priority="17">
<xpath expr="//div[@class='page']" position="attributes">
<attribute name="style">font-family: 'Ubuntu', sans-serif;</attribute>
</xpath>
<xpath expr="//div[@class='col-xs-5 col-xs-offset-7']" position="attributes">
<attribute name="style">margin-top: 10mm; margin-bottom: 25mm</attribute>
</xpath>
<xpath expr="//h2" position="attributes">
<attribute name="style">font-size: 24px; color: #e4677f; margin-top: 10mm; margin-bottom: 25mm</attribute>
<attribute name="class">text-epsilon</attribute>
</xpath>
<xpath expr="//div[@t-if='o.date_invoice']" position="attributes">
<attribute name="class">col-xs-3</attribute>
</xpath>
<xpath expr="//span[@t-field='l.quantity']" position="replace">
<t>
<t t-set="mod_qty">
formatLang(l.quantity, digit=0)
</t>
<t t-if="mod_qty == l.quantity">
<span><t t-esc="mod_qty"/></span>
</t>
<t t-if="mod_qty != l.quantity">
<span><t t-esc="('%.0f'% l.quantity * 1)"/></span>
</t>
</t>
</xpath>
</template>
</data>
</odoo>
Recommended reading:
- Yenthe's famous tutorial: https://www.odoo.yenthevg.com/inheriting-and-modifying-qweb-reports/
- Bootstrap grid system: https://getbootstrap.com/docs/4.0/layout/grid/
- Really really helpful for testing your xpath-expressions: https://codebeautify.org/Xpath-Tester
- View Inheritance and xpath locators (position attribute): http://learnopenerp.blogspot.com/2018/01/inheritance-in-models-and-views.html (please be aware that since Odoo 12 there is a new position attribute available: "move", see https://github.com/odoo/odoo/pull/23877)
nice sharing
Also your upvote is welcome.
Hi Jurgen:
To make changes to the location of the address field, you will need to customize one of the web.external_layout_xxxx views depending on which document layout you are using at your site. Note that this change will reflect in all the documents that use this layout. If you need to make the change for just one document, you will need to define a custom layout and use that instead for your document.
Hello Paresh, thank you for the hint. I am going to change the whole layout (the envelopes have the windows for the address on the left side).
I found a short-link to edit the layout (as you mentioned): in developer mode, go to settings, there is a edit-link to the layout. There are to possible lines to achieve my goal - i am grateful for an idea, how and where i need to change the code (add a row or column, new class or whatever..):
external_layout_standard:
....
<div class="article o_report_layout_standard" t-att-data-oe-model="o and o._name" t-att-data-oe-id="o and o.id" t-att-data-oe-lang="o and o.env.context.get('lang')">
<t t-call="web.address_layout"/>
<t t-raw="0"/>
</div>
....
or in address_layout
<t t-name="web.address_layout">
<t t-set="colclass" t-value="('col-md-5' if report_type == 'html' else 'col-5') + ' ml-auto'"/>
<t t-if="address">
<div class="address row">
<t t-if="information_block">
<t t-set="colclass" t-value="'col-5 offset-1'"/>
<div name="information_block" class="col-6">
<t t-raw="information_block"/>
</div>
</t>
<div name="address" t-att-class="colclass">
<t t-raw="address"/>
</div>
</div>
</t>
</t>
You may need to make changes within the <t t-if="address">....</t> block to get what you need.
Just to throw some light on this issue since it is a bit complex....The "address" variable is composed and set in the account.report_invoice_document view and used in web.address_layout. If you are not able to achieve the result you desire, you may need to look at the way web.external_layout_standard, web.address_layout and account.report_invoice_document work together to decide where the changes need to be made.
Ermin has provided a good set of links that describe how the Bootstrap grid system works. As mentioned by him, one needs to understand this to ensure that the reports are designed to work as expected.
Enjoying the discussion? Don't just read, join in!
Create an account today to enjoy exclusive features and engage with our awesome community!
Sign up| Related Posts | Replies | Views | Activity | |
|---|---|---|---|---|
|
multiple invoice layout
Solved
|
|
43
Apr 23
|
48814 | |
|
1
Mar 22
|
5427 | ||
|
1
Oct 20
|
3326 | ||
|
3
Jan 25
|
15900 | ||
|
1
Aug 24
|
3269 |
Because my karma is too low i write this comment to myself - now its easier to look into the right fields, not just playing around with more created errors.. thank you all and merci vielmol, jürgen
My pleasure, but an upvote is very welcome :-)
sorry - not enough karma points for upvoting. But all answers helped a lot!