Steps for Creating Custom Float to INT Widget in Odoo17

Hey, Odoo users! Do you feel like using statistics when you only want integer values? Suppose you could look at the float fields of a float and they were rounded automatically to the nearest whole number.very nice, wouldn’t it? It is EXACTLY what you receive whenever you use a custom float to int widget in Odoo17 on your website or application! This guide will also help you through creating a structure from the ground up, developing JavaScript, and adding your own touches. Want to spice up your Odoo deployment a little? Let’s gets in!

 Float to Int widget in a Odoo17

This means to design a Float to Int widget in a Odoo17, it is only possible to enhance the existing framework of Odoo’s web. Here is a guide: To make this widget, follow all the steps below: Any new field in Odoo17 that requires this functionality can be provided with a custom widget, and the float to int widget’s mission therefore has to do mostly with converting a given float value to the closest int value.

To set up the module structure, start by navigating to your module directory and creating the essential files, including a JavaScript file.

custom_float_to_int_module/
├── __init__.py
├── __manifest__.py
├── static/
│   └── src/
│       └── js/
│           └── float_to_int_widget.js
└── views/
    └── your_view.xml

Create the widget using javascript, In float_to_int_widget.js, define your custom widget:

/** @odoo-module **/
import { registry } from "@web/core/registry";
import { useInputField } from "@web/views/fields/input_field_hook";
import { parseFloat } from "@web/views/fields/fields_utils";
import { Component, useRef, onMounted, onWillRender } from "@odoo/owl";

export class FloatInt extends Component {
    static template = "float_int_widget.FloatIntField";
    
    setup() {
        // Reference for the input element
        this.input = useRef("inputFloatInt");

        // Hook to manage input field
        useInputField({
            getValue: () => this.props.record.data[this.props.name] || "",
            refName: "inputFloatInt",
            parse: (v) => parseFloat(v),
        });

        // Round value on render and mount
        onWillRender(() => this.roundValue());
        onMounted(() => this.roundValue());
    }

    roundValue() {
        if (this.input.el) {
            // Parse and round the input value, then update the record
            const value = parseFloat(this.input.el.value);
            this.props.record.data[this.props.name] = Math.round(value);
        }
    }
}

// Register the component in Odoo's registry
FloatInt.component = FloatInt;
FloatInt.supportedTypes = ["float"];
registry.category("fields").add("float_int_widget", FloatInt);

 XML template for custom Float to Int widget

To enhance the XML template for your custom Float to Int widget in Odoo, you can add attributes for better usability, such as event handling for input changes and some additional styling or accessibility features.

<?xml version="1.0" encoding="UTF-8" ?>
<templates id="template" xml:space="preserve">
    <t t-name="float_int_widget.FloatIntField">
        <input type="number"
               class="o_input flex-grow-1 flex-shrink-1"
               t-ref="inputFloatInt"
               t-on-input="roundValue"
               t-on-blur="roundValue"
               step="any"
               aria-label="Float to Int Input"
               placeholder="Enter a number"
               t-att-value="props.record.data[props.name] || ''"/>
    </t>
</templates>

If you need more customization, you can add features to make the widget more powerful based on your requirements. For instance, the multi-method could be configured with the help of event listeners or the GUI could be restyled to be more aesthetically pleasing, while the rounding method could be made more user-friendly by adding new ways of configuring how rounding will be done.

Below is an expansion on the setup() of the Float-to-Int widget as a way of increasing flexibility and the addition of more functions to the widget.

<record id="view_form_custom_model" model="ir.ui.view">
    <field name="name">custom.model.form</field>
    <field name="model">custom.model</field>
    <field name="arch" type="xml">
        <form>
            <sheet>
                <group>
                    <field name="float_int"
                           widget="float_int_widget"
                           placeholder="Enter a float value"
                           required="1"/>
                </group>
            </sheet>
        </form>
    </field>
</record>

Ensure that the file paths and structure are correctly defined.

# custom_float_to_int_module/__manifest__.py

{
    'name': 'Custom Float to Int Widget',
    'version': '1.0',
    'depends': ['base', 'web'],
    'data': [
        'views/res_partner.xml',  # Add the correct XML file path for your views
    ],
    'assets': {
        'web.assets_backend': [
            'custom_float_to_int_module/static/src/js/float_int.js',  # Correct path for JS file
            'custom_float_to_int_module/static/src/xml/float_int.xml',  # Correct path for XML file
        ],
    },
}

And there you have it! You’ve created a Float-to-Int widget that simplifies data entry and keeps things neat and organized. But why stop here? Whether it’s custom widgets, full ERP implementation, or integrating complex workflows, Transines Solutions is here to help you elevate your Odoo game. Head to our Odoo Consultation page to explore how we can support your business goals. From tailored solutions to hands-on guidance, our team is ready to transform how you use Odoo. Got a unique idea in mind? Let’s make it happen together.