logo del blog

Devproplus

Botón siempre visible en el encabezado de una vista tree en Odoo

3 min de lectura

Odoo nos permite agregar botones en el encabezado de una vista tree o list a través del xml, pero estos botones solo son visibles cuando seleccionamos uno o más registros. En ocasiones queremos agregar un botón que sea visible siempre, independientemente de si se ha seleccionado algún registro o no. Esto se puede lograr en 4 pasos fundamentales. En este artículo veremos como hacerlo.

Pasos para agregar un botón siempre visible en el encabezado de una vista tree en Odoo

Para agregar un botón siempre visible en el encabezado de una vista tree en Odoo, se deben seguir estos pasos:

Agregar el o los botones en un archivo XML

Para agregar un botón en el encabezado de una vista tree en Odoo, se debe agregar el siguiente código en un archivo XML. Este archivo debe estar en la carpeta static/src/xml del módulo.

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="demo_and_expamples.ButtonListController" t-inherit="web.ListView.Buttons" t-inherit-mode="primary">
        <xpath expr="//div[hasclass('o_list_buttons')]" position="inside">
            <button type="button" class="d-none d-md-inline o_button_upload_expense btn btn-primary mx-1" t-on-click="this.buttonInHeader">
                Botón en encabezado
            </button>
        </xpath>
    </t>
</templates>

En el código anterior, a groso modo, lo que se hizo fue crear una plantilla, se heredó la plantilla donde se encuentran los botones en las vistas tree, para poder ubicar el elemento de referencia que nos va a permitir decir donde se agregará en botón. Después de tener ubicado el elemento, agregamos un bótón con sus respectivos atributos y lo vinculamos a un método que crearemos en la extensión de la clase ListController.

Extender la clase ListController en un archivo JavaScript

Para extender la clase ListController en un archivo JavaScript, se debe crear un archivo JavaScript en la ruta static/src/js del módulo. Dentro de este archivo, se debe crear una clase que extienda de ListController y se debe agregar el método que se va a ejecutar al hacer clic en el botón.

/** @odoo-module */

import { registry } from '@web/core/registry';
import { listView } from "@web/views/list/list_view";
import { ListController } from "@web/views/list/list_controller";

export class ButtonInHeaderListController extends ListController {
    setup() {
        super.setup();
    }

    buttonInHeader() {
        console.log("Click en el botón en el controller")
    }

}

registry.category('views').add('button_in_header', {
    ...listView,
    buttonTemplate: 'demo_and_expamples.ButtonListController',
    Controller: ButtonInHeaderListController,
});

En el código anterior, se importó la clase ListController, esto nos permite extender de dicha clase. Dentro de esta clase, se creó un método que se va a ejecutar al hacer clic en el botón, en este caso solo mostrará un mensaje en la consola, pero usted puede definir la lógica que necesite. Este método se vinculó al botón en el archivo XML mediante el atributo t-on-click. Se importó también el método registry, este método nos permite registrar la vista dentro del árbol de vistas de Odoo y le colocamos el nombre con el que queremos que se reconozca la vista, en este caso button_in_header.

Tambíen con la siguiente línea de código ...listView, hacemos una propagación para copiar todas las propiedades de listView en el nuevo objeto que se está registrando en la categoría de vistas. Esto permite que la nueva vista personalizada herede todas las configuraciones y comportamientos de la vista de lista estándar de Odoo. También se añade el template del botón que se creó en el archivo XML y el nuevo controlador que se creó. Noten que el valor de buttonTemplate es el nombre de la plantilla que se creó en el archivo XML. y el valor del Controller es el nombre de la clase que se creó en el archivo JavaScript.

Agregar el archivo JavaScript y el XML al manifest

Para agregar el archivo JavaScript y el XML al manifest, se debe agregar el siguiente código en el archivo __manifest__.py del módulo.

'assets': {
    'web.assets_backend': [
        'demo_and_expamples/static/src/js/list_controller.js',
        'demo_and_expamples/static/src/xml/list_controller.xml'
    ]
}

En el código anterior, se agregó el archivo JavaScript y el XML al manifest. Esto nos permite que Odoo pueda reconocer los archivos y los recursos que se añaden al módulo. Usted debe ajustar la ruta de los archivos para que sean las correctas de su módulo.

Agregar atributo que permite mostrar las modificaciones hechas en la clase ListController al xml donde deseamos que se muestre el botón

Para agregar el atributo que permite mostrar las modificaciones hechas en la clase ListController al xml donde deseamos que se muestre el botón, se debe agregar el siguiente código en el archivo XML de la vista donde deseamos que se muestre el botón.

<record id="notebook_tree_view" model="ir.ui.view">
    <field name="name">Notebooks</field>
    <field name="model">notebook.notebook</field>
    <field name="arch" type="xml">
        <tree js_class="button_in_header">
            <field name="name"/>
            <field name="value"/>
            <field name="description" optional="hide"/>
        </tree>
    </field>
</record>

Como se puede observar, se agregó el atributo js_class al elemento tree y se le asignó el valor button_in_header, que es el nombre que se le asignó a la vista en el archivo JavaScript. Esto nos permite que la vista tree pueda reconocer la clase que se creó en el archivo JavaScript y pueda mostrar el botón en el encabezado.

Veamos el resultado:

Botón en el encabezado de la vista tree en Odoo

Conclusión

En este artículo se ha visto como agregar un botón siempre visible en el encabezado de una vista tree en Odoo.