Forem: RayMiles

How to Create a Simple Widget in Odoo 19

RayMiles — Wed, 15 Apr 2026 09:25:43 +0000

Odoo 19 uses the OWL (Odoo Web Library) framework for building frontend components. Widgets are reusable UI elements that allow you to customize how fields are displayed and interacted with in the interface.

This guide explains how to create a simple custom field widget.

1. Create a Custom Module

Start by generating a new module:

odoo-bin scaffold my_widget_module addons/

The structure will look like:

my_widget_module/
├── __init__.py
├── __manifest__.py
├── static/
│   └── src/
│       ├── js/
│       ├── xml/
│       └── css/

2. Update the Manifest

Edit __manifest__.py and include your assets:

'assets': {
    'web.assets_backend': [
        'my_widget_module/static/src/js/my_widget.js',
        'my_widget_module/static/src/xml/my_widget.xml',
        'my_widget_module/static/src/css/my_widget.css',
    ],
},

3. Create the Widget (OWL Component)

Create the file:

static/src/js/my_widget.js

/** @odoo-module **/

import { Component } from "@odoo/owl";
import { registry } from "@web/core/registry";

export class MyWidget extends Component {

    get value() {
        return this.props.record.data[this.props.name] || "No value";
    }
}

MyWidget.template = "my_widget_module.MyWidget";

registry.category("fields").add("my_widget", {
    component: MyWidget,
    supportedTypes: ["char"],
});

4. Create the Template

Create:

static/src/xml/my_widget.xml

<?xml version="1.0" encoding="UTF-8"?>
<templates>

    <t t-name="my_widget_module.MyWidget" owl="1">
        <div class="o_my_widget">
            <span t-esc="value"/>
        </div>
    </t>

</templates>

5. Use the Widget in a View

Apply the widget to a field in your XML view:

<field name="name" widget="my_widget"/>

Example:

<record id="view_form_example" model="ir.ui.view">
    <field name="name">example.form</field>
    <field name="model">res.partner</field>
    <field name="arch" type="xml">
        <form>
            <sheet>
                <group>
                    <field name="name" widget="my_widget"/>
                </group>
            </sheet>
        </form>
    </field>
</record>

6. Add Optional Styling

Create:

static/src/css/my_widget.css

.o_my_widget {
    color: blue;
    font-weight: bold;
}

7. Restart and Upgrade

Run:

./odoo-bin -u my_widget_module -d your_db

Then refresh your browser using a hard reload.

Key Concepts

Widgets in Odoo 19 are OWL components.
Field values are accessed using:

  this.props.record.data[this.props.name]

The widget must be registered in the fields registry.
supportedTypes defines which field types the widget can handle.

Conclusion

Creating a widget in Odoo 19 involves defining an OWL component, linking it to a template, registering it, and using it in a view. With this structure, you can extend the widget to include interactivity, backend communication, or more advanced UI behavior.

Setting Up Nerd Fonts in Alacritty on Ubuntu

RayMiles — Wed, 04 Mar 2026 14:29:00 +0000

1. Download & Install the Nerd Font

# Create fonts directory
mkdir -p ~/.local/share/fonts

# Download JetBrainsMono Nerd Font (or any you prefer)
wget https://github.com/ryanoasis/nerd-fonts/releases/latest/download/JetBrainsMono.zip

# Unzip
unzip JetBrainsMono.zip -d ~/.local/share/fonts/JetBrainsMono

# Refresh font cache
fc-cache -fv

2. Verify the Exact Font Name

fc-list | grep -i "JetBrains"

You should see output like:

~/.local/share/fonts/JetBrainsMono/JetBrainsMonoNerdFont-Regular.ttf: JetBrainsMono Nerd Font:style=Regular
~/.local/share/fonts/JetBrainsMono/JetBrainsMonoNerdFontMono-Regular.ttf: JetBrainsMono Nerd Font Mono:style=Regular

✅ Use → JetBrainsMono Nerd Font
❌ Avoid → JetBrainsMono Nerd Font Mono

3. Configure Alacritty

# Create config directory if it doesn't exist
mkdir -p ~/.config/alacritty

# Open config file
nano ~/.config/alacritty/alacritty.toml

Add this to the file:

[font]
size = 13.0

[font.normal]
family = "JetBrainsMono Nerd Font"
style = "Regular"

[font.bold]
family = "JetBrainsMono Nerd Font"
style = "Bold"

[font.italic]
family = "JetBrainsMono Nerd Font"
style = "Italic"

[font.bold_italic]
family = "JetBrainsMono Nerd Font"
style = "Bold Italic"

Save with Ctrl+O → Enter → Ctrl+X

4. Install Alacritty (if not yet installed)

# Ubuntu 22.04+
sudo apt install alacritty

# Or via snap
sudo snap install alacritty --classic

5. Restart Alacritty

# Simply close and reopen, or:
alacritty &

That's it! Your icons in tools like Starship, lsd, eza, or Neovim should now render at full size. 🎉

[Boost]

RayMiles — Sat, 14 Feb 2026 20:39:54 +0000

Ghassen Ben Hadj Lassoued

Dec 28 '25

Computekit — Reusable heavy computations for JS & React

#react #webassembly #performance #typescript

Comments 1

1 min read