Cómo utilizar un widget de progresión en una vista formulario
Aprenda a utilizar el widget de progresión o gauge en una vista formulario.
15 May, 2024 by
Cómo utilizar un widget de progresión en una vista formulario
Ángel García de la Chica Herrera


En Odoo existen muchos widgets que nos pueden ayudar a hacer nuestros diseños más atractivos y crear interfaces más intuitivas y funcionales. El objetivo de esta entrada del blog es ver como podemos utilizar el widget de progresión o gauge en una vista formulario.

 1. ¿Qué es el widget gauge?



El widget de progresión o ‘gauge’ se utiliza para mostrar un gráfico de progreso, o como en el caso de la imagen de arriba, la carga de iniciativas de los diferentes empleado. 

Este widget es aplicable tanto para campos enteros como flotantes, donde el valor flotante se convertirá en un valor entero.

De forma general para utilizarlo deberemos añadir este código en el archivo XML de la vista:

<field name="lead_month_count"
    widget="gauge"
    options="{'max_field': 'assignment_max'}"
    attrs="{'invisible': [('assignment_max', '=', 0)]}"
/>

 2. Cómo utilizar el widget gauge en la vista form


Supongamos que queremos mostrar el mismo widget que se muestra en la vista kanban de los miembros del equipo de crm en las ficha de cada miembro. Para ello solo tendremos que utilizar el siguiente código:

    <record id="crm_custom_crm_team_member_view_form" model="ir.ui.view">
        <field name="name">crm.custom.crm.team.member.view.form</field>
        <field name="model">crm.team.member</field>
        <field name="inherit_id" ref="crm.crm_team_member_view_form"/>
        <field name="arch" type="xml">
            <xpath expr="//group[@name='group_assign']" position='after'>
                <group name="assignments_state"
                        attrs="{'invisible': ['|', ('assignment_enabled', '=', False), ('assignment_optout', '=', True)]}"
                        colspan="4"> <div class="text-center align-middle"
                        style="width: 50%;" > <field name="lead_month_count_related"
                                widget="gauge"
                                options="{'max_field': 'assignment_max', 'style': 'width:160px; height: 120px;'}"
                        /> </div> </group> </xpath> </field> </record>

Hay que tener en cuenta que para mostrar dos veces el mismo campo en una vista form con distintos widgets debemos crear otro campo relacionado heredando de la clase original (en el caso del ejemplo: crm.team.member):

from odoo import models, fields
class CrmTeamMember(models.Model):
    _inherit = "crm.team.member"
    lead_month_count_related = fields.Integer(
        string='Leads (30 days)',
        related="lead_month_count",
        help="Lead assigned to this member those last 30 days"
    )

 3. Cómo utilizar el widget gauge dentro de un botón


Por último, si queremos insertar la barra de progresión en un botón para realizar alguna acción, como por ejemplo, mostrar las oportunidades asignadas, tendremos que utilizar el siguiente código:

    <record id="crm_custom_crm_team_member_view_form" model="ir.ui.view">
        <field name="name">crm.custom.crm.team.member.view.form</field>
        <field name="model">crm.team.member</field>
        <field name="inherit_id" ref="crm.crm_team_member_view_form"/>
        <field name="arch" type="xml">
            <xpath expr="//group[@name='group_assign']" position='after'>
                 <group name="assignments_state"
                    attrs="{'invisible': ['|', ('assignment_enabled', '=', False), ('assignment_optout', '=', True)]}"
                    colspan="4">
                    <div class="text-center align-middle"
                        style="width: 50%;" >
                        <button class="oe_stat_button"
                            type="object"
                            name="action_view_opportunities">
                            <div>
                                <field name="lead_month_count_related"
                                    widget="gauge"
                                    options="{'max_field': 'assignment_max', 'style': 'width:160px; height: 120px;'}"
                                />
                            </div>
                        </button>
                    </div>
                </group>
            </xpath>
        </field>
    </record>
                                                                 En Sygel trabajamos cada día para adaptar a diferentes escenarios las opciones que tanto Odoo como la Odoo Community Association (OCA) ofrecen. Somos conscientes de que cada empresa tiene unas características específicas y, por ello, el trato personalizado se traduce en la implantación del ERP para que cumpla tanto con las expectativas como con las necesidades de nuestros clientes. A la vez, compartimos nuestros avances con el resto de la comunidad, para que cada día se beneficie más gente.