We'll add a JavaScript file that contains our widget's logic, and an SCSS file to do some styling. Then, we will add one integer field on the books form to use our new widget. Follow these steps to add a new field widget:

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

odoo.define('my_field_widget', function (require) {
"use strict";

var AbstractField = require('web.AbstractField');
var fieldRegistry = require('web.field_registry');

2. Create your widget by extending AbstractField:

var colorField = AbstractField.extend({

3. Set the CSS class, root element tag, and supported field types for the widget:

    className: 'o_int_colorpicker',
    tagName: 'span',
    supportedFieldTypes: ['integer'],

4. Capture some JavaScript events:

    events: {
        'click .o_color_pill': 'clickPill',
    },

5. Override init to do some initialization:

    init: function () {
        this.totalColors = 10;
        this._super.apply(this, arguments);
    },

6. Override _renderEdit and _renderReadonly to set up the DOM elements:

    _renderEdit: function () {
        this.$el.empty();
        for (var i = 0; i < this.totalColors; i++ ) {
            var className = "o_color_pill o_color_" + i;
            if (this.value === i ) {
                className += ' active';
            }
            this.$el.append($('<span>', {
                'class': className,
                'data-val': i,
            }));
        }
    },
    _renderReadonly: function () {
        var className = "o_color_pill active readonly o_color_" + this.value;
        this.$el.append($('<span>', {
            'class': className,
        }));
    },

7. Define the handlers we referred to earlier:

    clickPill: function (ev) {
        var $target = $(ev.currentTarget);
        var data = $target.data();
        this._setValue(data.val.toString());
    }

});     // closing AbstractField

8. Don't forget to register your widget:

fieldRegistry.add('int_color', colorField);

9. Make it available for other add-ons:

return {
    colorField: colorField,
};
}); // closing 'my_field_widget' namespace

10. Add some SCSS in static/src/scss/field_widget.scss:

.o_int_colorpicker {
    .o_color_pill {
        display: inline-block;
        height: 25px;
        width: 25px;
        margin: 4px;
        border-radius: 25px;
        position: relative;
        @for $size from 1 through length($o-colors) {
            &.o_color_#{$size - 1} {
                background-color: nth($o-colors, $size);
                &:not(.readonly):hover {
                    transform: scale(1.2);
                    transition: 0.3s;
                    cursor: pointer;
                }
                &.active:after{
                    content: "f00c";
                    display: inline-block;
                    font: normal normal normal 14px/1 FontAwesome;
                    font-size: inherit;
                    color: #fff;
                    position: absolute;
                    padding: 4px;
                    font-size: 16px;
                }
            }
        }
    }
}

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

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

12. Finally, add the color integer field in the library.book model:

 color = fields.Integer()

13. Add the color field in the book's form view, and also add widget="int_color":

...
<group>
    <field name="date_release"/>
    <field name="color" widget="int_color"/>
</group>
...

Update the module to apply the changes. After the update, open the book's form view and you will see the color picker, as shown in the following screenshot: