We’ll add a JavaScript file that contains our widget’s logic, and a CSS file to do some styling. Then, we also choose one field on the partner form to use our new widget. Follow the given steps:

1. Add a static/src/js/r1_widgets.js file. For the syntax used here, refer to the Extending CSS and JavaScript for the website recipe from Chapter 16, CMS Website Development:

odoo.define('r1_widgets', function(require) 
{ 
    var registry = require('web.field_registry'), 
        AbstractField = require('web.AbstractField');

2. Create your widget by subclassing AbstractField:

var FieldMany2OneButtons = AbstractField.extend({

3. Set the CSS class for the widget’s root div element:

className: 'oe_form_field_many2one_buttons',

4. Override init to do some initialization:

init: function() 
   { 
       this._super.apply(this, arguments); 
       this.user_list = { 
           1: { 
               name: 'Administrator', 
           }, 
           4: { 
               name: 'Demo user', 
           }, 
       }; 
   },

5. Capture some JavaScript events:

 events: { 
       'click .btn': '_button_clicked', 
   },

6. Override _render to set up DOM elements:

 _render: function() 
   { 
       var self = this; 
       this.$el.empty(); 
       _.each(this.user_list, function(description, id) 
       { 
           self.$el.append( 
               jQuery('<button>').attr({ 
                   'data-id': id, 
                   'class': 'btn btn-default btn-sm', 
               }) 
               .text(description.name) 
               .toggleClass( 
                   'btn-primary', 
                   self.value ? self.value.res_id == id : false 
               ) 
           ); 
       }); 
       this.$el.find('button'). 
           prop('disabled', this.mode == 'readonly'); 
   },

7. Define the handlers we referred to earlier:

_button_clicked: function(e) 
 { 
  this._setValue(parseInt(jQuery(e.target).attr('data-id'))); 
 },

8. Don’t forget to register your widget:

registry.add('many2one_buttons', FieldMany2OneButtons);

9. Make it available for other addons:

    return { 
        FieldMany2OneButtons: FieldMany2OneButtons, 
    }

10. Add some CSS in static/src/css/r1_widgets.css:

.oe_form_field_many2one_buttons button
{
    margin: 0em .2em .2em 0em;
}

11. Register both files in the backend assets in views/templates.xml:

<?xml version="1.0" encoding="UTF-8"?> 
<odoo> 
    <template id="assets_backend" inherit_id="web.assets_backend"> 
        <xpath expr="." position="inside"> 
            <link
                href="/r1_widgets/static/src/css/r1_widgets.css"
                rel="stylesheet" type="text/css"
            /> 
            <script
                src="/r1_widgets/static/src/js/r1_widgets.js"
                type="text/javascript"
            /> 
        </xpath> 
    </template> 
</odoo>

12. Finally, make the partner form use our widget for choosing the sales person:

<?xml version="1.0" encoding="UTF-8"?> 
<odoo> 
    <record id="view_partner_form" model="ir.ui.view"> 
        <field name="model">res.partner</field> 
        <field name="inherit_id" ref="base.view_partner_form" /> 
        <field name="arch" type="xml"> 
            <field name="user_id" position="attributes"> 
                <attribute name="widget">many2one_buttons</attribute> 
            </field> 
        </field> 
    </record> 
</odoo>

When you open a partner form after installing the module, you’ll see two buttons on the sales person field that allow you to select a user. The currently selected user’s button is highlighted.