[IMP] Studio: new report editor

task-3553091

closes odoo/documentation#7518

X-original-commit: cf389c1c3e
Signed-off-by: Audrey Vandromme (auva) <auva@odoo.com>
This commit is contained in:
“Audrey 2023-10-20 16:16:28 +02:00
parent 3fe09dd653
commit 0604fb56f9
22 changed files with 465 additions and 261 deletions

View File

@ -19,6 +19,8 @@ to move to the next line.
later, you must do it manually. To do so, click the name on the top bar and proceed to the
modification.
.. _knowledge/text-editor:
Text editor
-----------
@ -90,6 +92,8 @@ proceed equally and click the red-circled :guilabel:`x`.
- The emoji is also displayed before the corresponding article in the side panel hierarchic tree.
- Click the emoji on the side panel to change it without opening the related article.
.. _knowledge/powerbox:
Commands
========

View File

@ -2,341 +2,541 @@
PDF reports
===========
With Studio, you can edit existing PDF reports (e.g., orders and quotations) or create new ones.
.. important::
To edit a standard PDF report, it is strongly recommended to **duplicate** it and make changes to
the duplicated version, as changes made to standard reports will be overwritten after an Odoo
upgrade. To duplicate a report, go to :menuselection:`Studio --> Reports`. Hover the mouse
pointer on the top right corner of the report, click the vertical ellipsis icon (:guilabel:`⋮`),
and then select :guilabel:`Duplicate`.
.. image:: pdf_reports/duplicate-report.png
:alt: Duplicating a PDF report
With Studio, you can :ref:`edit existing PDF reports <studio/pdf-reports/edit>` (e.g., invoices,
quotations, etc.) or :ref:`create new ones <studio/pdf-reports/edit>`.
.. _studio/pdf-reports/default-layout:
Default layout
==============
The default layout of reports is managed outside Studio. Go to :menuselection:`Settings -->
Companies: Document Layout --> Configure Document Layout`. Layout settings apply to all reports but
only to the current company.
The default layout of reports is managed outside Studio. Go to :menuselection:`Settings`, then, in
the :guilabel:`Companies` section, click :guilabel:`Configure Document Layout`. Layout settings are
company-specific but apply to all reports.
.. tip::
Use :guilabel:`Download PDF Preview` to view how the different settings affect the layout of a
sample invoice.
You can see how the different settings affect the report layout in the report preview on the
right, or download a sample invoice PDF by clicking :guilabel:`Download PDF Preview`.
Use the following settings:
.. _studio/pdf-reports/default-layout/layout:
Layout
------
- :guilabel:`Layout`: Four layouts are available:
Four layouts are available.
.. tabs::
.. tabs::
.. tab:: Light
.. tab:: Light
.. image:: pdf_reports/layout-light.png
:alt: Light report layout sample
.. image:: pdf_reports/light.png
:alt: Light report layout sample
.. tab:: Boxed
.. tab:: Boxed
.. image:: pdf_reports/layout-boxed.png
:alt: Boxed report layout sample
.. image:: pdf_reports/boxed.png
:alt: Boxed report layout sample
.. tab:: Bold
.. tab:: Bold
.. image:: pdf_reports/layout-bold.png
:alt: Bold report layout sample
.. image:: pdf_reports/bold.png
:alt: Bold report layout sample
.. tab:: Striped
.. tab:: Striped
.. image:: pdf_reports/striped.png
:alt: Striped report layout sample
.. image:: pdf_reports/layout-striped.png
:alt: Striped report layout sample
.. _studio/pdf-reports/default-layout/font:
Font
----
Seven fonts are available. Click on the links below to preview them on `Google Fonts
<https://fonts.google.com/>`_.
- `Lato <https://fonts.google.com/specimen/Lato#type-tester>`_
- `Roboto <https://fonts.google.com/specimen/Roboto#type-tester>`_
- `Open Sans <https://fonts.google.com/specimen/Open+Sans#type-tester>`_
- `Montserrat <https://fonts.google.com/specimen/Montserrat#type-tester>`_
- `Oswald <https://fonts.google.com/specimen/Oswald#type-tester>`_
- `Raleway <https://fonts.google.com/specimen/Raleway#type-tester>`_
- `Tajawal <https://fonts.google.com/specimen/Tajawal#type-tester>`_
.. note::
:guilabel:`Tajawal` supports both Arabic and Latin scripts.
- :guilabel:`Font`: Seven fonts are available: Lato, Roboto, Open Sans, Montserrat, Oswald, Raleway,
and Tajawal (which supports Arabic and Latin scripts). Go to the
`Google Fonts website <https://fonts.google.com/>`_ to preview them.
.. _studio/pdf-reports/default-layout/logo:
Company logo
------------
Upload an image file to add a :guilabel:`Company Logo`.
.. note::
This adds the logo to the companys record on the *Company* model, which you can access by going
to :menuselection:`General Settings --> Companies --> Update Info`.
- :guilabel:`Company logo`: Click the :guilabel:`Edit` button to upload or change the logo. This
adds the logo to the companys record on the *Company* model, which you can access by going to
:menuselection:`Settings` and then clicking :guilabel:`Update Info` in the :guilabel:`Companies`
section.
.. _studio/pdf-reports/default-layout/colors:
Colors
------
Change the primary and secondary colors used throughout reports to highlight important elements.
The default colors are automatically generated based on the colors of the logo.
- :guilabel:`Colors`: Change the primary and secondary colors used to structure reports. The default
colors are automatically generated based on the colors of the logo.
.. _studio/pdf-reports/default-layout/background:
Layout background
-----------------
- :guilabel:`Layout background`: The following backgrounds are available:
Change the :guilabel:`Layout Background` of the report:
- :guilabel:`Blank`: nothing is displayed.
- :guilabel:`Geometric`: an image featuring geometric shapes is displayed in the background.
- :guilabel:`Custom`: use a custom background image by uploading one.
- :guilabel:`Blank`: nothing is displayed.
- :guilabel:`Geometric`: an image featuring geometric shapes is displayed in the background.
- :guilabel:`Custom`: upload a custom background image.
.. _studio/pdf-reports/default-layout/tagline:
Company tagline
---------------
The :guilabel:`Company Tagline` is displayed on the header of :ref:`External reports
<studio/pdf-reports/header-footer/external>`. You can add multiple lines of text.
- :guilabel:`Company tagline`: This is displayed in the header of :ref:`external reports
<studio/pdf-reports/header-footer/external>`. You can add multiple lines of text.
.. _studio/pdf-reports/default-layout/details:
Company details
---------------
The :guilabel:`Company Details` are displayed on the header of :ref:`External reports
<studio/pdf-reports/header-footer/external>`. You can add multiple lines of text.
- :guilabel:`Company details`: These are displayed in the header of :ref:`external reports
<studio/pdf-reports/header-footer/external>`. You can add multiple lines of text.
.. _studio/pdf-reports/default-layout/footer:
Footer
------
Use the :guilabel:`Footer` field to put any text in the :ref:`External reports'
<studio/pdf-reports/header-footer/external>` footers. You can add multiple lines of text.
- :guilabel:`Footer`: This text is used in the footer of :ref:`external reports
<studio/pdf-reports/header-footer/external>`. You can add multiple lines of text. You can also
edit the footer using the :ref:`report editor <studio/pdf-reports/edit>`.
.. _studio/pdf-reports/default-layout/paper:
Paper format
------------
- :guilabel:`Paper format`: to define the default paper size of reports. You can select
:guilabel:`A4` (21 cm x 29.7 cm), :guilabel:`US Letter` (21.59 cm x 27.54 cm), or
:guilabel:`QR codes page`. This can also be defined for individual reports in the
:guilabel:`Paper format` field in :ref:`Studio <studio/pdf-reports/create>`.
Use the :guilabel:`Paper format` field to change the paper size of reports. You can either select
:guilabel:`A4` (21 cm x 29.7 cm) or :guilabel:`US Letter` (21.59 cm x 27.54 cm).
.. _studio/pdf-reports/create:
.. tip::
You can change the :guilabel:`Paper format` on individual reports. Open the app containing the
report, then go to :menuselection:`Studio --> Reports --> Select or Create a report --> Report
--> Select a Paper format`.
Creating new PDF reports
========================
.. image:: pdf_reports/default-layout.png
:alt: Configuration pop-up window for the default layout of PDF reports
.. _studio/pdf-reports/header-footer:
Header and footer
=================
When creating a new report in Studio, you must choose between one of three styles of reports first.
This is solely used to determine what is displayed on the header and footer. To do so, go to the app
on which you want to add a new report, click the **Toggle Studio** button, then click
:guilabel:`Reports`. Click :guilabel:`New` and select
:ref:`studio/pdf-reports/header-footer/external`, :ref:`studio/pdf-reports/header-footer/internal`,
or :ref:`studio/pdf-reports/header-footer/blank`.
To create a new report for a model, access the model, click the **Toggle Studio** button, then click
:guilabel:`Reports`. Click :guilabel:`New` and, in the popup window that opens, select the type of
report. This is solely used to determine what is displayed in the header and footer:
.. _studio/pdf-reports/header-footer/external:
External
--------
- :guilabel:`External`:
The header displays the company :ref:`studio/pdf-reports/default-layout/logo` and several values
set on the *Company* model: the :guilabel:`Company Name`, :guilabel:`Phone`, :guilabel:`Email`, and
:guilabel:`Website`.
- The header displays the company's :ref:`logo <studio/pdf-reports/default-layout/logo>`,
:ref:`tagline <studio/pdf-reports/default-layout/tagline>`, and
:ref:`details <studio/pdf-reports/default-layout/details>`.
- The footer displays the values set in the
:ref:`Footer <studio/pdf-reports/default-layout/footer>` field and the page number.
- :guilabel:`Internal`: The header displays the user's current date and time,
:guilabel:`Company Name`, and page number. There is no footer.
- :guilabel:`Blank`: There is neither a header nor a footer. Click in the upper left corner of the
page to edit the report.
Once you have created the report, you can start :ref:`editing it <studio/pdf-reports/edit>`.
.. _studio/pdf-reports/edit:
Editing PDF reports
===================
To access the reports available for a model, access the model (e.g., sales orders), click the
**Toggle Studio** button, then click :guilabel:`Reports`. Select an existing report to open it or
:ref:`create a new one <studio/pdf-reports/create>`.
.. tip::
To change a company's information, go to :menuselection:`Settings --> Companies --> Update Info`.
Alternatively, you can also open Studio, click :guilabel:`Reports`, and search for a specific
report or model.
.. image:: pdf_reports/external-header.png
:alt: Example of an External header
.. important::
It is strongly recommended to **duplicate** the standard report and perform changes in the
duplicated version. To duplicate a report, hover the mouse pointer on the top right corner
of the report, click the vertical ellipsis icon (:guilabel:`⋮`), and then select
:guilabel:`Duplicate`.
The footer displays the values set on the :ref:`studio/pdf-reports/default-layout/footer`,
:ref:`studio/pdf-reports/default-layout/details`, and
:ref:`studio/pdf-reports/default-layout/tagline` fields, as well as the page number.
.. image:: pdf_reports/duplicate-report.png
:alt: Duplicating a PDF report
.. image:: pdf_reports/external-footer.png
:alt: Example of an External footer
Options
-------
.. _studio/pdf-reports/header-footer/internal:
Once you've selected or created a report, you can use the options in the left part of the screen to:
Internal
--------
The header displays the user's current date and time, :guilabel:`Company Name`, and page number.
There is no footer.
.. _studio/pdf-reports/header-footer/blank:
Blank
-----
There is neither a header nor a footer.
.. _studio/pdf-reports/elements:
Add tab
=======
After opening an existing report or creating a new one, go to the :guilabel:`Add` tab to add or edit
elements. The elements are organized into four categories: :ref:`studio/pdf-reports/elements/block`,
:ref:`studio/pdf-reports/elements/inline`, :ref:`studio/pdf-reports/elements/table`, and
:ref:`studio/pdf-reports/elements/column`.
.. _studio/pdf-reports/elements/block:
Block
-----
Block elements start on a new line and occupy the full width of the page.
.. tip::
You can set an element's width by selecting it and going to the :guilabel:`Options` tab.
- :guilabel:`Text`: add any text using small font size by default.
- :guilabel:`Title Block`: add any text using larger font size by default.
- :guilabel:`Image`: add an image. You can either upload one from your device, add one from
an URL, or select one already existing on your database.
- :guilabel:`Field`: dynamically add a field's value.
- :guilabel:`Field & Label`: to dynamically add a field's value and label.
- :guilabel:`Address Block`: to dynamically add the values, if any, of a contact's (`res.partner`
model): *Name*, *Address*, *Phone*, *Mobile*, and *Email*.
.. image:: pdf_reports/address-block.png
:alt: Example of an Address Block
.. _studio/pdf-reports/elements/inline:
Inline
------
Inline elements are used around other elements. They do not start on a new line and the width adapts
to length of the content.
.. tip::
You can set an element's width and margins by selecting it and going to the :guilabel:`Options`
tab.
- :guilabel:`Text`: add any text using small font size by default.
- :guilabel:`Field`: dynamically add a field's value.
.. _studio/pdf-reports/elements/table:
Table
-----
Table elements are used together to create a data table.
- :guilabel:`Data table`: create a table and dynamically add a first column displaying the *Name*
values of a :ref:`Many2Many <studio/fields/relational-fields/many2many>` or :ref:`One2Many
<studio/fields/relational-fields/one2many>` field on your model.
.. image:: pdf_reports/data-table.png
:alt: Example of a Data table
- :guilabel:`Field Column`: add a new column to the table displaying the values of a :ref:`Related
Field <studio/fields/relational-fields/related-field>` to the one used to create the
:guilabel:`Data table`.
- :guilabel:`Text in Cell`: add any text within an existing table cell.
- :guilabel:`Field in Cell`: add, within an existing table cell, the values of a :ref:`Related
Field <studio/fields/relational-fields/related-field>` to the one used to create the
:guilabel:`Data table`.
- :guilabel:`Subtotal & Total`: add an existing :guilabel:`Total` field's value. If a
:guilabel:`Taxes` field exists, the untaxed and taxes amounts are added before the total amount.
.. _studio/pdf-reports/elements/column:
Column
------
Columns are used to add multiple :ref:`blocks <studio/pdf-reports/elements/block>` elements on the
same line.
- :guilabel:`Two Columns`: add any text in two different columns.
- :guilabel:`Three Columns`: add any text in three different columns.
Report tab
==========
Several configuration options are available under the :guilabel:`Report` tab.
- :guilabel:`Name`: change the report name. The new name is applied everywhere (in Studio, under
the :guilabel:`Print` button, and for the PDF file name).
- :guilabel:`Paper format`: change the paper size of the report.
- :guilabel:`Add in print`: add the report under the :guilabel:`🖶 Print` button available on the
- Change the :guilabel:`Report name`. The new name is applied everywhere (in Studio, under
the :guilabel:`Print` button, and in the PDF file name).
- Modify the :guilabel:`Paper format`. If no value is selected, the format defined in the
:ref:`default layout <studio/pdf-reports/default-layout/paper>` is used.
- :guilabel:`Show in print menu`: to add the report in the :guilabel:`Print` menu available from the
record.
- :guilabel:`Limit visibility to groups`: limit the availability of the PDF report to specific
- :guilabel:`Reload from attachment`: to save the report as an attachment on the record the first
time it is generated and reload the original version of the report any subsequent time. This is
legally required for invoices and is mainly used in this case.
- :guilabel:`Limit visibility to groups`: to limit the availability of the PDF report to specific
:doc:`user groups <../../general/users/access_rights>`.
- :guilabel:`Edit sources`: to modify the report directly in the :ref:`XML file
<studio/pdf-reports/XML-editing>`.
- :guilabel:`Reset report`: to discard all changes made to the report and reset it to its standard
version.
- :guilabel:`Print preview`: to generate and download a report preview.
Options tab
===========
Report editor
-------------
Select an element on the report to access the element's options and edit it.
The report editor allows you to modify the formatting and contents of the report.
.. image:: pdf_reports/text-options-tab.png
:alt: The Options tab for a text element
.. tip::
- You can :guilabel:`Undo` or :guilabel:`Redo` changes using the related buttons or the shortcuts
`CTRL Z` and `CTRL Y`.
- Changes are saved automatically when you leave the report or manually using the
:guilabel:`Save` button.
- You can reset the report to its standard version by clicking the :guilabel:`Reset report` button
in the left part of the screen.
.. important::
Editing the header and footer of a report impacts all standard and custom reports.
Conditional blocks
~~~~~~~~~~~~~~~~~~
The dashed rectangles represent **conditional blocks** (*if/else* statements). These are used to
show/hide content based on specific conditions. Click on the block to view the conditions.
.. image:: pdf_reports/conditional-block-if.png
:alt: View conditions applied to a block.
Select a value to preview its corresponding output and edit it if necessary.
.. image:: pdf_reports/conditional-block-else.png
:alt: Preview the output of another condition.
.. note::
You can select and edit multiple elements at the same time by clicking on the different sections
or divisions (e.g., `div`, `table`, etc.).
Conditions can only be edited in :ref:`XML <studio/pdf-reports/XML-editing>`.
Below are presented some of the most common options:
Other content
~~~~~~~~~~~~~
- :guilabel:`Margins`: add spacing at the :guilabel:`top`, :guilabel:`right`, :guilabel:`bottom`,
and :guilabel:`left` of the element.
There are two types of text content in reports:
- :guilabel:`Width`: set the element's maximum width.
- Static text, i.e., the text that's not highlighted in blue, which can be modified directly in the
editor.
- Dynamic text, i.e., the text that's highlighted in blue, which is replaced by field values when
the report is generated, e.g., the SO number or the quotation date.
- :guilabel:`Visible if`: set under which condition(s) the element should be displayed.
You can add content (e.g., fields, lists, tables, images, banners, etc.) to the report using
commands. Type `/` to open the :ref:`powerbox <knowledge/powerbox>`, then type the command's
name or select it from the list.
- :guilabel:`Visible for`: set for which :doc:`users groups <../../general/users/access_rights>`
the element should be displayed.
To add static text to the report, type the text where you want it.
- :guilabel:`Remove from View`: remove the element from the report's view.
For more advanced changes, you can :ref:`edit the report in the XML directly
<studio/pdf-reports/XML-editing>`.
- :guilabel:`Text decoration`: bold, italicize, and underline the font.
.. _studio/pdf-reports/add-field:
- :guilabel:`Alignment`: align the element to the left, center, or right of the report.
Add a field
***********
- :guilabel:`Font style`: use one of the default font styles.
To add a field, type `/` and select the :guilabel:`Field` command. In the list that opens, select
or search for the field; click the right arrow next to the field name to access the list of related
fields if needed. Then, specify the default value and press `Enter`.
- :guilabel:`Colors`: change the font's color and the background color.
.. image:: pdf_reports/powerbox-field.png
:alt: Select a related field.
.. note::
You may need to select a section or division above the element you want to edit to see some of
the options described above.
Formatting
**********
To format text in the report, select it, then format it using the options in the
:ref:`knowledge/text-editor`.
.. image:: pdf_reports/text-editor.png
:alt: Format text using the text editor.
.. _studio/pdf-reports/XML-editing:
Editing the report's XML
------------------------
.. warning::
Modifying the XML directly may result in report issues during :doc:`upgrades
<../../../administration/upgrade>`. If this happens, simply copy your changes from the old
database into your upgraded database.
To edit the report's XML, click :guilabel:`Edit sources` in the left pane.
Examples
~~~~~~~~
.. spoiler:: Modify a non-compliant table
Sometimes, tables are not properly recognized as such due to complex structures. In those cases,
you can still modify them manually in the report XML. For example, with a sales order, you can
find the following structure in the XML (simplified for documentation purposes):
.. code-block:: xml
<!-- table root element -->
<table>
<!-- thead = table header, the row with column titles -->
<thead>
<!-- table row element -->
<tr>
<!-- table header element -->
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<!-- table body, the main content -->
<tbody>
<!-- we create a row for each subrecord with t-foreach -->
<tr t-foreach="record.some_relation_ids" t-as="line">
<!-- for each line, we output the name and price as table cells -->
<td t-out="line.name"/>
<td t-out="line.price"/>
</tr>
</tbody>
</table>
To modify a table, you must ensure that each row has the same number of data cells. For example,
in the case above, you need to add a cell in the header section (with e.g., the column title)
and another one in the body section with the field content (usually, with a `t-out` or
`t-field` directive).
.. code-block:: xml
:emphasize-lines: 6,13
<table> <!-- table root element -->
<thead> <!-- thead = table header, the row with column titles -->
<tr> <!-- table row element -->
<th>Name</th> <!-- table header element -->
<th>Price</th>
<th>Category</th>
</tr>
</thead>
<tbody> <!-- table body, the main content -->
<tr t-foreach="record.some_relation_ids" t-as="line"> <!-- we create a row for each subrecord with t-foreach -->
<td t-out="line.name"/> <!-- for each line, we output the name and price as table cells -->
<td t-out="line.price"/>
<td t-out="line.category_id.display_name"/>
</tr>
</tbody>
</table>
.. note::
Cells can span multiple rows or columns. For more information, go to the
`Mozilla Developer Network website <https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics>`_.
For example, you can modify the **Quotation/Order** report to add a column to display the
product category in the main table:
.. code-block:: xml
:emphasize-lines: 6,13
<table class="table table-sm o_main_table table-borderless mt-4">
<!-- In case we want to repeat the header, remove "display: table-row-group" -->
<thead style="display: table-row-group">
<tr>
<th name="th_description" class="text-start">Description</th>
<th>Product Category</th>
<th name="th_quantity" class="text-end">Quantity</th>
<th name="th_priceunit" class="text-end">Unit Price</th>
[...]
<tr t-att-class="'bg-200 fw-bold o_line_section' if line.display_type == 'line_section' else 'fst-italic o_line_note' if line.display_type == 'line_note' else ''">
<t t-if="not line.display_type">
<td name="td_name"><span t-field="line.name">Bacon Burger</span></td>
<td t-out="line.product_id.categ_id.display_name"/>
<td name="td_quantity" class="text-end">
<span t-field="line.product_uom_qty">3</span>
<span t-field="line.product_uom">units</span>
<span t-if="line.product_packaging_id">
.. image:: pdf_reports/XML-SO-product-category.png
:alt: Add a Product Category column in a SO.
.. spoiler:: Add a data table
To add a table in XML, you need to know the names of the fields and objects you wish to access
and display. As an example, let's add a table that details the tags on a sales order:
.. code-block:: xml
<!-- table root element -->
<table class="table">
<!-- thead = table header, the row with column titles -->
<thead>
<!-- table row element -->
<tr>
<!-- table header element -->
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<!-- table body, the main content -->
<tbody>
<!-- we create a row for each subrecord with t-foreach -->
<tr t-foreach="doc.tag_ids" t-as="tag">
<!-- for each line, we output the name and price as table cells -->
<td t-out="tag.id"/>
<td t-out="tag.name"/>
</tr>
</tbody>
</table>
.. image:: pdf_reports/XML-data-table.png
:alt: Add a data table in XML
.. note::
When adding tables manually, style them using `Bootstrap classes
<https://getbootstrap.com/docs/5.1/content/tables>`_, like the `table` class included in the
example above.
.. spoiler:: Conditional blocks
If you want to show/hide content based on specific conditions, you can manually add `if/else`
control statements in the report XML.
For example, if you want to hide a custom data table if there are no tags, you can use the `t-if`
attribute to define the condition, which is then evaluated as `True` or `False`. The table will
not be displayed if there are no tags in the quotation.
.. code-block:: xml
:emphasize-lines: 2
<!-- table root element -->
<table class="table" t-if="len(doc.tag_ids) > 0">
<!-- thead = table header, the row with column titles -->
<thead>
<!-- table row element -->
<tr>
<!-- table header element -->
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<!-- table body, the main content -->
<tbody>
<!-- we create a row for each subrecord with t-foreach -->
<tr t-foreach="doc.tag_ids" t-as="tag">
<!-- for each line, we output the name and price as table cells -->
<td t-out="tag.id"/>
<td t-out="tag.name"/>
</tr>
</tbody>
</table>
If you want to display another block in case the `t-if` statement is evaluated as `False`, you
can specify it using the `t-else` statement. The `t-else` block must directly follow the `t-if`
block in the document structure. There is no need to specify any condition in the `t-else`
attribute. As an example, let's show a quick message explaining that there are no tags on the
quotation:
.. code-block:: xml
:emphasize-lines: 22
<!-- table root element -->
<table class="table" t-if="len(doc.tag_ids) > 0">
<!-- thead = table header, the row with column titles -->
<thead>
<!-- table row element -->
<tr>
<!-- table header element -->
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<!-- table body, the main content -->
<tbody>
<!-- we create a row for each subrecord with t-foreach -->
<tr t-foreach="doc.tag_ids" t-as="tag">
<!-- for each line, we output the name and price as table cells -->
<td t-out="tag.id"/>
<td t-out="tag.name"/>
</tr>
</tbody>
</table>
<div class="text-muted" t-else="">No tag present on this document.</div>
By using the `t-if/t-else` notation, the report editor recognizes that these sections are
mutually exclusive and should be displayed as conditional blocks:
.. image:: pdf_reports/XML-condition-if.png
:alt: Output preview if there are tags.
You can switch conditions using the editor to preview their output:
.. image:: pdf_reports/XML-condition-else.png
:alt: Output preview if there are no tags.
If you wish to have multiple options, you can also use `t-elif` directives to add intermediary
conditions. For example, this is how the title of sales order reports changes based on the
condition of the underlying document.
.. code-block:: xml
<h2 class="mt-4">
<span t-if="env.context.get('proforma', False) or is_pro_forma">Pro-Forma Invoice # </span>
<span t-elif="doc.state in ['draft','sent']">Quotation # </span>
<span t-else="">Order # </span>
<span t-field="doc.name">SO0000</span>
</h2>
The title *Pro-Forma Invoice* is used depending on some contextual conditions. If these
conditions are not met and the state of the document is either `draft` or `sent`, then
*Quotation* is used. If none of those conditions are met, the report's title is *Order*.
.. spoiler:: Images
Working with images in a report can be challenging, as precise control over image size and
behavior is not always obvious. You can insert image fields using the report editor
(:ref:`by using the /Field command <studio/pdf-reports/add-field>`), but inserting them in XML
using the `t-field` directive and accompanying `t-options` attributes provides better sizing and
positioning control.
For example, the following code outputs the field `image_128` of the line's product as a
64px-wide image (with an automatic height based on the image's aspect ratio).
.. code-block:: xml
<span t-field="line.product_id.image_128" t-options-widget="image" t-options-width="64px"/>
The following options are available for image widgets:
- `width`: width of the image, usually in pixels or CSS length units (e.g., `rem`) (leave empty
for auto-width).
- `height`: height of the image, usually in pixels or CSS length units (e.g., `rem`) (leave empty
for auto-height).
- `class`: CSS classes applied on the `img` tag; `Bootstrap classes
<https://getbootstrap.com/docs/5.1/content/tables>`_ are available.
- `alt`: alternative text of the image
- `style`: style attribute; it allows you to override styles more freely than with
`Bootstrap classes <https://getbootstrap.com/docs/5.1/content/tables>`_.
These attributes must contain strings, i.e., text enclosed within quotes within quotes, e.g.,
`t-options-width="'64px'"` (or, alternatively, a valid Python expression).
.. note::
The image widget cannot be used on an `img` tag. Instead, set the `t-field` directive on a
`span` (for inline content) or `div` (for block content) node.
For example, let's add a column with the product image in the quotation table:
.. code-block:: xml
:emphasize-lines: 4,14-20
<table class="table table-sm o_main_table table-borderless mt-4">
<thead style="display: table-row-group">
<tr>
<th>Image</th>
<th name="th_description" class="text-start">Description</th>
<th>Product Category</th>
<th name="th_quantity" class="text-end">Quantity</th>
<th name="th_priceunit" class="text-end">Unit Price</th>
[...]
<t t-foreach="lines_to_report" t-as="line">
<t t-set="current_subtotal" t-value="current_subtotal + line.price_subtotal"/>
<tr t-att-class="'bg-200 fw-bold o_line_section' if line.display_type == 'line_section' else 'fst-italic o_line_note' if line.display_type == 'line_note' else ''">
<t t-if="not line.display_type">
<td>
<span t-field="line.product_template_id.image_128"
t-options-widget="'image'"
t-options-width="'64px'"
t-options-class="'rounded-3 shadow img-thumbnail'"
/>
</td>
<td name="td_name"><span t-field="line.name">Bacon Burger</span></td>
<td t-out="line.product_id.categ_id.display_name"/>
The `t-options-width` attribute restricts the image width to 64 pixels, and the Bootstrap classes
used in `t-options-class` create a thumbnail-like border with rounded corners and a shadow.
.. image:: pdf_reports/XML-images.png
:alt: Add a column with the product image in the quotation table.

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

View File

Before

Width:  |  Height:  |  Size: 64 KiB

After

Width:  |  Height:  |  Size: 64 KiB

View File

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 60 KiB

View File

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB

View File

Before

Width:  |  Height:  |  Size: 55 KiB

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB