Creating custom widgets

As you've seen in Chapter 8, 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 ch15_r01 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/ch15_r01.js file. For the syntax used here, refer to Chapter 14, CMS Website Development, recipe Extending CSS and JavaScript for the website:

   odoo.define('ch15_r01', function(require)
   {
       var core...