Creating custom widgets

As you saw in Chapter 10, Backend Views, there’s a plethora of widgets that display your data in a certain way. To demonstrate how to create your own widget, we’ll write one that lets the user choose a many2one reference from a predefined selection of values in the form of a list of buttons. The result looks somewhat similar to the many2many_checkboxes widget, but with buttons instead of checkboxes.

Getting ready

You’ll need to create an empty addon that depends on the web module; we call it r1_widgets here.

How to do it...

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