Change dot color selection field

Question

My objective is to add a new state_selection widget (in the same way as the one that is present in the Kanban view of the tasks of the project module) with three (3) options / colors :

• gray
• Orange
• Red

I mean, I want the new state to have a new color, for example, orange.

Preferably, I would like to do it myself if it is not too complicated; otherwise, an existing module will do the trick.

I have no idea how to do it, and I can't find any documentation on it. Can you help me or indicate a module to do this simply?

this is the xml code

<xpath expr="//field[@name='kanban_state']" position="replace">
                <field name="kanban_state_child" widget="state_selection"/>
</xpath> 

and this is the field definition

kanban_state_child = fields.Selection([
        ('on_hold', 'En attente'),
        ('normal', 'En cours'),
        ('done', 'Prêt'),
        ('blocked', 'Bloquée')], string='Status',
        copy=False, default='on_hold', required=True, readonly=False, store=True)

Answer 1

You can extend the selection state widget

JS:

  /** @odoo-module */
  
  import { registry } from '@web/core/registry';
  import { StateSelectionField } from '@web/views/fields/state_selection/state_selection_field';

  
  export class CustomStateSelectionField extends StateSelectionField {
      setup() {
         super.setup();
         this.colors = {
            normal: "orange",
            done: "green",
            blocked: "red",
        };
     }

     get showLabel() {
        return true;
    }
 }
 
 registry.category('fields').add('custom_state_selection', CustomStateSelectionField);

SCSS:

.o_status {
     @extend .o_status;
     &.o_status_orange {
         @extend .bg-warning;
    }
}

Add the fiels under assets entry in the __manifest__.py file:

'assets': {
    'web.assets_backend': [
        "MODULE_NAME/static/src/js/state_selection.js",
        "MODULE_NAME/static/src/scss/state_selection.scss",
    ],
},

And set the widget attribute of the selection field to custom_state_selection