Reportes en PDF¶

Las tablas tienen estructuras complejas y eso ocasiona que algunas veces no se reconozcan como tales. En esos casos, puede modificarlas de forma manual en el XML del reporte. Por ejemplo, una orden de venta podría tener la siguiente estructura en el XML (está simplificada para fines de este documento):

<!-- 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>

Para modificar una tabla debe asegurarse de que cada fila tenga el mismo número de celdas con datos. Por ejemplo, en el caso anterior, necesita agregar una celda en la sección del encabezado (por ejemplo, con el título de la columna) y otra en la sección del cuerpo con el contenido del campo (por lo general con una directiva t-out o t-field).

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

Nota

Las celdas pueden abarcar varias filas o columnas. Consulte el sitio web de Mozilla Developer Network para obtener más información.

Por ejemplo, puede modificar el reporte de cotización y orden para agregar una columna que muestre la categoría de producto en la tabla principal:

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

Para agregar una tabla en XML necesita conocer los nombres de los campos y objetos a los que desea acceder y mostrar. Como ejemplo, consulte la siguiente una tabla que proporciona las etiquetas en una orden de venta:

<!-- 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>

Si desea mostrar u ocultar contenido según condiciones específicas puede agregar declaraciones de control if/else de forma manual al XML del reporte.

Por ejemplo, si desea ocultar una tabla de datos personalizada en caso de que no haya etiquetas, puede utilizar el atributo t-if para definir la condición. Esta se evaluará como True o False y la tabla no aparecerá si no hay etiquetas en la cotización.

<!-- 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>

Si desea mostrar otro bloque en caso de que la declaración t-if se evalúe como False, puede especificarlo con la declaración t-else. El bloque t-else debe estar inmediatamente después del bloque t-if en la estructura del documento. No es necesario que especifique alguna condición en el atributo t-else. Como ejemplo, veamos cómo mostrar un mensaje rápido que explique que la cotización no tiene etiquetas:

<!-- 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>

Al utilizar la notación t-if/t-else, el editor de reportes reconoce que estas secciones se excluyen entre sí y deben aparecer como bloques condicionales:

Puede alternar entre condiciones con el editor para previsualizar los resultados:

En caso de que desee tener varias opciones también puede utilizar las directivas t-elif para agregar condiciones intermedias. Por ejemplo, aquí el título de los reportes de las órdenes de venta cambia según la condición del documento correspondiente.

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

El título Factura proforma se utiliza en función de algunas condiciones contextuales. Si estas condiciones no se cumplen y el estado del documento es draft o sent, entonces se utiliza Cotización. Si ninguna de esas condiciones se cumple, el título del reporte es Orden.

Trabajar con imágenes en un reporte puede ser complicado, ya que es difícil tener control preciso sobre su tamaño y su comportamiento no siempre es obvio. Puede insertar campos de imagen con el editor de reportes (mediante el comando /Campo), pero insertarlos en XML con la directiva t-field y los atributos t-options que la acompañan proporciona un mejor control sobre el tamaño y la posición.

Por ejemplo, el siguiente código muestra el campo image_128 del producto de la línea como una imagen de 64 píxeles de ancho (con una altura automática según la relación de aspecto de la imagen).

<span t-field="line.product_id.image_128" t-options-widget="image" t-options-width="64px"/>

Las siguientes opciones están disponibles para los widgets de imagen:

• width: ancho de la imagen. Por lo general se usan píxeles o unidades de longitud CSS (por ejemplo, rem) (no lo use si desea que el ancho se establezca de forma automática).

• height: altura de la imagen. Por lo general se usan píxeles o unidades de longitud CSS (por ejemplo, rem) (no lo use si desea que la altura se establezca de forma automática).

• class: las clases CSS aplicadas en la etiqueta img. También están disponibles las clases de Bootstrap.

• alt: texto alternativo de la imagen.

• style: atributo de estilo. Le permite anular estilos con mayor libertad que con las clases de Bootstrap.

Estos atributos deben contener cadenas, es decir, texto entrecomillado dentro de otras comillas, por ejemplo, t-options-width="'64px'" (o una expresión Python válida como alternativa).

Por ejemplo, es necesario agregar una columna con la imagen del producto a la tabla de la cotización:

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

El atributo t-options-width restringe el ancho de la imagen a 64 píxeles y las clases de Bootstrap que se utilizan en t-options-class crean un borde similar a una miniatura con las esquinas redondeadas y una sombra.