In the world of modern Business Management ERP systems, user interface design plays a crucial role in improving usability and efficiency. Odoo 18 continues to evolve in this area with its advanced front-end framework, OWL (Odoo Web Library), which empowers developers to create custom field widgets with ease. These widgets add dynamic, interactive elements to forms, lists, and dashboards — enhancing the user experience significantly.

In this guide, we’ll walk through the complete process of creating a custom Boolean field widget in Odoo 18 called bool_badge. This widget displays a color-coded badge with an icon that visually represents the field’s state. By the end of this tutorial, you’ll understand how to build, register, and use field widgets to enrich your Odoo application.

1. Understanding Field Widgets in Odoo 18

A field widget in Odoo defines how a field is displayed and interacted with in the user interface. For example, a Boolean field can appear as a checkbox, a toggle button, or — as in this tutorial — a circular badge that switches color and icon when clicked.

With Odoo 18’s OWL framework, widgets are developed using JavaScript (for logic) and XML templates (for structure). Once registered, they can be reused in any model and view by simply referencing the widget’s name.

Creating a custom widget provides a way to:

• Improve visual feedback for users.

• Make forms more intuitive and interactive.

• Align UI behavior with your business requirements.

Now, let’s dive into the development steps.

2. Step 1: Define the JavaScript Component

The first step is to define the widget’s logic using a JavaScript component. Create a new file named field_widget.js inside your module at the path:

Here’s the full JavaScript code:

Explanation:

• Component Class: The BoolBadge class extends Odoo’s OWL Component, representing the custom field widget.

• updateValue(): This function updates the field value when the badge is clicked, toggling between True and False.

• value Getter: Retrieves the current field value dynamically from the record.

• BoolBadge.template: Links the JavaScript component to its corresponding XML template.

• registry.category("fields").add: Registers the widget globally, allowing it to be used anywhere in Odoo.

• supportedTypes: Ensures this widget only applies to Boolean fields.

Essentially, this JavaScript file defines the behavior of your widget — how it reacts to user interactions and how it updates data within the Odoo model.

3. Step 2: Create the XML Template

Next, you’ll define the visual structure of the widget using XML. Create a new file named field_widget.xml in the following directory:

Here’s the code:

How It Works:

• The <span> element forms the badge’s circular shape.

• The t-att-class dynamically assigns colors and styles:

  • Green (bg-success) with a checkmark icon when the value is True.

  • Red (bg-danger) with a cross icon when the value is False.

• The t-on-click event toggles the value whenever the badge is clicked.

• The <i> tag renders a Font Awesome icon based on the Boolean value.

This XML structure makes the widget interactive and visually appealing, instantly reflecting changes without needing to reload the page.

4. Step 3: Update the Manifest File

After defining the widget’s logic and layout, you must include these files in your module’s manifest file so Odoo loads them during runtime.

In manifest.py, add the widget assets under the web.assets_backend section:

This ensures that both the JavaScript and XML files are bundled into Odoo’s backend assets. Without this step, your widget will not appear or function correctly.

5. Step 4: Use the Widget in Your Model

Now it’s time to use your new widget in a model. Add a Boolean field to your Python model as follows:

Then, include this field in your form view and apply the widget:

When you open this view, the field will appear as a clickable circular badge. Clicking it will toggle between green (active) and red (inactive), updating the field’s value instantly.

6. Extending the Widget Further

While the bool_badge widget is simple, it provides a strong foundation for more advanced UI components. You can extend it in several ways:

• Custom Colors: Add conditions to display different colors for specific states or models.

• Tooltips: Provide informative hints when hovering over the badge using the title attribute.

• Animations: Integrate CSS transitions for smooth color and icon changes.

• Icons: Replace Font Awesome icons with SVGs for modern, scalable visuals.

• State Mapping: Use props or options to map Boolean values to business-specific statuses like “Enabled/Disabled” or “Approved/Rejected.”

Such enhancements are particularly useful in Business Management ERP environments, where visual indicators improve clarity and user efficiency.

7. Why Custom Widgets Matter in Business Management ERP

Custom field widgets not only improve aesthetics but also add real business value. In an ERP system, users interact with hundreds of fields daily. Replacing standard checkboxes or text fields with meaningful icons, badges, or toggles helps:

• Reduce cognitive load: Users instantly understand data status without reading labels.

• Speed up actions: Clickable, interactive widgets enable faster decisions.

• Enhance consistency: Align visual feedback with business workflows.

• Boost user adoption: An intuitive interface encourages engagement and reduces training time.

By leveraging Odoo’s OWL framework, developers can craft widgets tailored to a company’s workflow, aligning the ERP’s functionality with real-world business operations.

8. Final Thoughts

Building custom widgets in Odoo 18 opens endless possibilities for improving both design and functionality within your Business Management ERP system. With just a few lines of JavaScript and XML, you can transform how users interact with data — making complex systems more intuitive, efficient, and visually engaging.

The bool_badge widget is a great example of how something simple can add meaningful value. From color-coded feedback to instant field updates, it enhances user experience while maintaining Odoo’s modular and flexible design principles.

As Odoo continues to evolve, mastering OWL-based widget development will remain a vital skill for developers and ERP consultants alike. Whether you’re building a new module or customizing existing forms, remember that good design is just as important as good logic — and in Odoo 18, you now have the tools to perfect both.

Booking an implementation consultant today.