5 min de lectura Entre las numerosas vistas que nos ofrece Odoo, las vistas tipo lista o también conocidas como tree juegan un papel fundamental. Estas interfaces visuales ofrecen una representación estructurada y jerárquica de los datos, permitiendo a los usuarios explorar y gestionar la información de manera intuitiva. En este artículo, exploraremos en profundidad las vistas tipo tree en Odoo, destacando sus funcionalidades clave y su impacto en la experiencia del usuario. Las vistas están especificadas en XML y las básicas y más utlilizadas en Odoo generalmente comparten una estructura común. En esta entrada veremos como crear una vista tipo lista y principalmente veremos los atributos que soporta su elemento raíz (<tree>) y su visualización en la interfaz de usuario. Para algunos atributos no se verán ejemplos visuales por su facilidad para entender su funcionamiento solamente con la explicación. Veamos la sintaxis de una vista tree básica. Sintaxis: El código anterior es lo básico para crear una vista tipo list y digo básico porque las vistas soportan más campos, pero son opcionales y sirven para otros propositos, ejemplo de ello es cuando quieres heredar una vista, tienes que agregar otro campo El elmento ráiz, como ya mencioné anteriormente es <tree>. Este elemento soporta varios atributos, los cuales permiten agregar o eliminar funcionalidades en la vista. Estos atributos son los siguientes. Atributos: sample: Este atributo es un booleano, por defecto es False. Si se declara el atributo sample en True poblará la vista con registros de ejemplo si no hay registros existentes para el modelo de la vista, en nuestro ejemplo sería notebook.notebook el modelo. string: Es el nombre de la vista cuando la acción que abre la vista no tiene nombre y el tipo de ventana es new (tipo wizard). create: Es un atributo booleano que habilita o desahabilita la creación de registros, en otras palabras, oculta o muestra el botón "CREATE" en la versión 15 o "New" en versiones posteriores. Por defecto el atributo es True, por lo que dichos botenes están visibles. delete: También es un atributo booleano que deshabilita o habilita la eliminación de registros en la vista a través del menú desplegable Acción. Por defecto es True. import: Otro atributo booleano que deshabilita o habilita la importación de datos de registros en la vista a través de archivos .csv o Excel. Por defecto es True. export_xlsx: Un atributo booleano más que deshabilita o habilita la exportación de datos de registros. Por defecto es True. default_order: Este es un atributo opcional y su valor son campos del modelo, puede ser uno o más campos separados por coma, para ordenar los registros según los campos especificados en el valor, cada campo permite el posfijo desc para hacer un orden inverso. Es importante señalar que si se aplica el atributo default_order, el orden anulará al orden establecido en el modelo por el atributo _order. Resultado de default_order. limit: Es un atributo de tipo integer que establece la cantidad de registros que se mostrarán por página, por defecto son 80 registros. edit: Permite deshabilitar o habilitar la edición de registros en la vista. editable: Por defecto cuando se hace click en un registro o en el botón New en la vista tipo list (tree), se abre una vista form para editar o crear el registro según sea el caso. El atributo editable lo que brinda es la posibilidad de crear o editar registros en la propia vista tree, cuando se establece este atributo hay que asignarle top o bottom, son los posibles valores que acepta y según sea el valor que asignemos, los nuevos regristros se crearán en la parte superior o inferior de la vista. Es fundamental tener en cuenta que si el atributo edit está establecido en false, el atributo editable será ignorado. multi_edit: Estableciendo multi_edit="1", permite la función de edición múltiple que permite cambiar el mismo campo al mismo valor para múltiples registros en una sola operación. A continuación un video de ejemplo sobre como funciona multi_edit. open_form_view: Este es un atributo booleano que por defecto es false, si se establece en true, agrega un botón al final de cada registro para permitir abrir la vista de formulario del registro correspondiente. Este atributo solo es útil si la vista es editable, es decir, si también tiene establecido el atributo editable, ya que al tener esta característica activada, no se abre la vista formulario del registro y en ese momento es que entra a relucir la utilidad de open_form_view. default_group_by: Permite que los registros se vean agrupados en la vista. A default_group_by se le pasa como valor el nombre de un campo del modelo por el cual se quiere agrupar los registros. expand: El atributo expand entra a jugar junto con el atributo default_group_by ya que permite que se muestre la agrupación de registros de una manera expandida. Este atributo es booleano y por defecto es false, así que para que funcione debe establecerse en true. groups_limit: El atributo groups_limit es similar al atributo limit solo que es para cuando los registro están agrupados en la vista. Permite establecer la cantidad de registros agrupados que se verán por página. Por defecto es 80. decoration-{$name}: Este atributo es meramente visual, es decir, no ofrece ninguna funcionalidad, pero si es muy útil si queremos remarcar algún registro en la vista por algún motivo. Para que funcione debemos pasarle una expresión Python que evalue a True o False, ya que es un atributo booleano, por defecto es False. La parte {$name} del nombre del atributo se tiene que sustituir por alguna de los siguientes palabras para conformar el nombre del atributo: Las primeras seis palabras son para estilos de colores y las dos últimas para estilos relacionados con la fuente. Veamos un ejemplo. La imgan de abajo es el resultado del código anterior. Se puede observar que solo se aplica los estilos a los registros que cumplen con la condición establecida. banner_route: El valor de banner_route es una dirección URL de un controllador de Odoo que se buscará y se pondrá en la parte superior de la vista. La respuesta JSON del controlador debe contener una clave "html". Si el html contiene una etiqueta de hoja de estilo, se eliminará y se agregará dentro de la etiqueta <head>. Para interactuar con el backend, puede utilizar etiquetas <a type=”action”>. Eche un vistazo a la documentación de useActionLinks (addons/web/static/src/views/view_hook.js) para más detalles, ya que solo pondré un ejemplo sencillo a continuación. Vean el uso de banner_route con ruta a un controller que veremos a continuación. Vean el resultado Este artículo abarca todos los atributos existentes para la vista tree o también conocida como list, los cuales nos brindan la posibilidad de personalizar la vista y de esa manera brindar una mejor experiencia de usario y usabilidad.
<odoo>
<record id="notebook_view_tree" model="ir.ui.view">
<field name="name">notebook.view.tree<field>
<field name="model">notebook.notebook<field>
<field name="arch" type="xml">
<tree>
<field name="brand"/>
<field name="model"/>
</tree>
</field>
</record>
<odoo>
<odoo>
<record id="notebook_view_tree" model="ir.ui.view">
<field name="name">notebook.view.tree<field>
<field name="model">notebook.notebook<field>
<field name="arch" type="xml">
<tree default_order="price desc">
<field name="brand"/>
<field name="model"/>
<field name="price"/>
</tree>
</field>
</record>
<odoo>
<odoo>
<record id="notebook_view_tree" model="ir.ui.view">
<field name="name">notebook.view.tree<field>
<field name="model">notebook.notebook<field>
<field name="arch" type="xml">
<tree decoration-success="price > 500.00" decoration-bf="brand == 'Dell'">
<field name="brand"/>
<field name="model"/>
<field name="price"/>
</tree>
</field>
</record>
<odoo>
<odoo>
<record id="notebook_view_tree" model="ir.ui.view">
<field name="name">notebook.view.tree<field>
<field name="model">notebook.notebook<field>
<field name="arch" type="xml">
<tree banner_route="/store/store/banner">
<field name="brand"/>
<field name="model"/>
<field name="price"/>
</tree>
</field>
</record>
<odoo>
class BannerController(http.Controller):
@http.route('/store/store/banner', auth='public', type='json')
def object(self, **kw):
return {
'html': """
<div>
<link href="/store/static/src/css/banner.css" rel="stylesheet">
<h1 class="text-color">Hola, esto es un banner desde el controller con estilos desde el css.</h1>
<div> """
}
Conclusión