Skip to Content
Logo of RG Logo of RG
  • Home
  • Shop
  • Events
  • Courses
  • Company
    • News
    • Success Stories
  • Odoo Docs 19
  • Appointment
  • Jobs
  • Contact us
  • 0
  • 0
  • +1 555-555-5556
  • Sign in
Logo of RG Logo of RG
  • 0
  • 0
    • Home
    • Shop
    • Events
    • Courses
    • Company
      • News
      • Success Stories
    • Odoo Docs 19
    • Appointment
    • Jobs
    • Contact us
  • +1 555-555-5556
  • Sign in
Odoo Docs 19
Home Components Guides Classes Search
418 components
Forms
  • Account Json Checkboxes
  • Ace
  • Ace Field
  • Allowed Qweb Expressions
  • Attachment Image
  • Attachment Image Field
  • Badge
  • Badge Field
  • Badge Selection Field
  • Binary
  • Binary
  • Binary
  • Binary Field
  • Boolean
  • Boolean Favorite
  • Boolean Favorite Field
  • Boolean Field
  • Boolean Icon
  • Boolean Icon Field
  • Boolean Toggle
  • Boolean Toggle
  • boolean Toggle Field
  • calendar Properties Field
  • card Properties Field
  • Char
  • Char Field
  • Code
  • Code Ir Ui View
  • Color
  • Color Field
  • Color Picker
  • Color Picker Field
  • Contact Image
  • contact Image Field
  • Contact Statistics
  • Contact Statistics Field
  • Copyclipboardbutton
  • copy Clipboard Button Field
  • Copyclipboardchar
  • copy Clipboard Char Field
  • Copyclipboardurl
  • copy Clipboard URL Field
  • Dashboard Graph
  • date Field
  • date Range Field
  • Date Time Field
  • Domain
  • Domain Field
  • Dynamic Placeholder Popover
  • Email
  • Email
  • Email Field
  • Field Selector
  • Field Selector Field
  • File Uploader
  • Filterable Selection
  • filterable Selection Field
  • Float
  • Float Factor
  • float Factor Field
  • Float Field
  • Float Time
  • Float Time Field
  • Float Toggle
  • Float Toggle Field
  • form Email Field
  • form Phone Field
  • form Url Field
  • Gauge
  • Gauge Field
  • Google Slide Viewer
  • Handle
  • Handle Field
  • Html
  • html Field
  • Iframe Wrapper
  • Iframe Wrapper Field
  • Image
  • Image Field
  • Image Url
  • Image Url Field
  • Integer
  • Integer Field
  • ir Ui View Ace Field
  • Journal Dashboard Graph Field
  • Json
  • Json Checkboxes
  • Json Field
  • Kanban Color Picker
  • kanban Color Picker Field
  • kanban Many2 Many Tags Avatar Field
  • kanban Many2 Many Tags Field
  • Kanban Many2 One
  • Kanban Many2 One Avatar Field
  • kanban Progress Bar Field
  • Label Selection
  • Label Selection Field
  • list Badge Selection Field
  • list Binary Field
  • list Boolean Toggle Field
  • list Date Field
  • list Date Range Field
  • list Date Time Field
  • list Many2 Many Tags Avatar Field
  • list Text Field
  • List X2 Many Field
  • Many2many
  • Many2many
  • Many2many
  • Many2many Binary
  • Many2 Many Binary Field
  • Many2many Checkboxes
  • Many2 Many Checkboxes Field
  • Many2many Tags
  • Many2many Tags
  • Many2many Tags
  • Many2many Tags Avatar
  • Many2many Tags Avatar
  • Many2many Tags Avatar
  • many2 Many Tags Avatar Field
  • Many2many Tags Avatar Popover
  • Many2 Many Tags Field
  • Many2 One
  • Many2one
  • Many2one Avatar
  • Many2one Avatar
  • Many2 One Avatar Field
  • Many2one Barcode
  • Many2 One Barcode Field
  • Many2 One Field
  • Many2one Reference
  • Many2 One Reference Field
  • Many2one Reference Integer
  • Many2 X Autocomplete
  • Monetary
  • Monetary Field
  • One2many
  • One2many
  • One2many
  • Pdf Viewer
  • Pdf Viewer Field
  • Percentage
  • Percentage Field
  • Percentpie
  • Percent Pie Field
  • Phone
  • Phone
  • Phone Field
  • Priority
  • Priority Field
  • Profiling Qweb View
  • Progressbar
  • Progressbar
  • Progress Bar Field
  • Properties
  • Properties
  • Properties
  • Properties
  • Properties Field
  • Property Definition
  • Property Definition Selection
  • Property Tags
  • Property Tags Field
  • Property Text
  • Property Value
  • Radio
  • Radio
  • Radio Field
  • Reference
  • Reference Field
  • Remaining Days
  • Remaining Days Field
  • Res User Group Ids
  • Res User Group Ids Privilege
  • Selection
  • Selection Badge
  • Selection Badge
  • Selection Badge With Filter
  • Selection Field
  • settings Radio Field
  • Signature Field
  • State Selection
  • State Selection Field
  • Statinfo
  • Stat Info Field
  • Statusbar
  • Status Bar Field
  • Text
  • Text
  • Text Field
  • Timezone Mismatch
  • timezone Mismatch Field
  • Translation Button
  • Translation Dialog
  • Upgrade Boolean
  • upgrade Boolean Field
  • Upgrade Dialog
  • Url
  • Url
  • Url Field
  • X2 Many Field
  • X2 Many Field Dialog
  1. Components
  2. Badge
fields forms

Badge

Odoo 19 fields — Badge (views)

Live preview Interactive
Source excerpt web/static/src/views/fields/badge/badge_field.js
import { _t } from "@web/core/l10n/translation";
import { evaluateBooleanExpr } from "@web/core/py_js/py";
import { registry } from "@web/core/registry";
import { standardFieldProps } from "@web/views/fields/standard_field_props";

import { Component } from "@odoo/owl";
const formatters = registry.category("formatters");

export class BadgeField extends Component {
    static template = "web.BadgeField";
    static props = {
        ...standardFieldProps,
        decorations: { type: Object, optional: true },
        colorField: { type: String, optional: true },
    };
    static defaultProps = {
        decorations: {},
    };

    get formattedValue() {
        const formatter = formatters.get(this.props.record.fields[this.props.name].type);
        return formatter(this.props.record.data[this.props.name], {
            selection: this.props.record.fields[this.props.name].selection,
        });
    }

    get badgeClass() {
        if (this.props.colorField) {
            return `o_badge_color_${this.props.record.data[this.props.colorField]}`;
        }
        const evalContext = this.props.record.evalContextWithVirtualIds;
        for (const decorationName in this.props.decorations) {
            if (evaluateBooleanExpr(this.props.decorations[decorationName], evalContext)) {
                // fallback case for text-bg-muted
                if (decorationName === "muted") {
                    return "text-bg-300";
                }
                return `text-bg-${decorationName}`;
            }
        }
        return "text-bg-300";
    }
}

export const badgeField = {
    component: BadgeField,
    displayName: _t("Badge"),
    supportedTypes: ["selection", "many2one", "char"],
    supportedOptions: [
        {
            label: _t("Color field"),
            name: "color_field",
            type: "field",
            availableTypes: ["integer"],
            help: _t("Set an integer field to use colors with the badge."),
        },
    ],
    extractProps: ({ decorations, options }) => {
        return {
            decorations,
            colorField: options.color_field,
        };
    },
};

registry.category("fields").add("badge", badgeField);
Registry / API
Registry name
badge
Category
fields
Module
web
Slug
badge
Nav group
forms
Follow us

250 Executive Park Blvd, Suite 3400
San Francisco CA 94134

  • +1 555-555-5556
  • info@yourcompany.example.com
Copyright © Company name
Powered by Odoo - The #1 Open Source eCommerce