Odoo 18 brings several UI and usability enhancements that make the platform more dynamic and interactive, especially when building custom forms and website components. One such improvement is the ability to open a modal window when the user clicks on a specific field.
This feature adds a layer of flexibility that enriches the user experience by allowing additional data entry or selection without leaving the current page.
Whether you are customizing workflows for your clients or integrating Odoo with a Business Management Software, this guide will walk you step-by-step through how to trigger a modal pop-up from a field in Odoo 18.
Understanding the Purpose of Modal Pop-Ups in Odoo 18
Modals are commonly used in modern web applications to display additional information, collect input, or present selection options while keeping the user on the same page. Instead of redirecting users to separate forms, modals help streamline interaction by presenting information on demand.
In Odoo 18, modal windows can be defined using QWeb templates and controlled using JavaScript widgets. This combination enables developers to create dynamic interfaces for forms, surveys, subscription flows, customer portals, and more.
Scenario Overview
In this example, clicking on the Location field will open a modal. Inside the modal, users can select a State and enter a City. Once the modal is closed, the selected data is automatically inserted back into the Location field.
Before Interaction
The user clicks on the Location input field, and instead of typing directly, a modal appears prompting them to choose a State and City.
After Interaction
Once the user clicks the Submit button inside the modal, the chosen State and City values are displayed in the Location field on the main form.
This functionality is especially useful when you need structured input from users—without overwhelming them with too many fields on the screen.
Defining the Modal Using QWeb Templates
The first step is to create the modal structure inside an XML (QWeb) template. This template includes:
The website form layout
The hidden modal container
State dropdown
City input field
Submit button
The modal is wrapped in a <div id="location_temp"> element, which remains hidden until triggered.
The modal uses Bootstrap’s grid system for alignment, ensuring a clean and professional layout. States are passed from the controller to the template context, allowing dynamic population of the dropdown list.
This structure ensures that the modal loads with the correct values each time the user clicks on the Location field.
Adding a Website Menu to Access the Form
After designing the template, a menu item can be created in the website module so users can access the subscription form easily. This is done by defining a menu XML file that links to the controller route rendering the form.
This ensures that the page is accessible directly from the site’s navigation bar.
Connecting the Modal to the Input Field
The core idea is simple: when the user clicks the Location input field, the hidden modal becomes visible.
In the XML, the Location field looks like this:
These attributes tell Odoo to open the modal whenever the field is clicked. However, to gain full control over the behavior, JavaScript is used instead of relying solely on Bootstrap’s modal behavior.
Handling Modal Logic with JavaScript
Odoo 18 relies on modular JavaScript using ES6 syntax and Odoo’s widget system (publicWidget).
A custom JS file can be used to handle:
Opening the modal
Closing the modal
Passing selected values to the main form
Below is how the widget is structured:
1. Registering the Widget
The widget listens for clicks on specific elements within the template.
This ensures that clicking the Location field triggers the modal, while clicking Submit inside the modal closes it.
2. Opening the Modal
The _onLocationClick function makes the modal visible by modifying its CSS:
This overrides the initial display:none and displays the modal overlay.
3. Closing the Modal and Updating the Field
The _onCloseClick function reads values entered by the user and fills them into the main input field:
This achieves three things:
Reads the city input
Retrieves selected state name
Updates the Location field with "State, City" format
Hides the modal again
This process ensures a smooth, user-friendly experience and maintains data consistency.
Why This Method is Effective
✔ No page reloads
Modals work within the same view, keeping users focused.
✔ Cleaner user interface
Large forms can be broken into interactive pop-ups.
✔ Reusable modal structure
The same modal can be adapted for multiple fields.
✔ Enhanced data integrity
Users choose from predefined options (like states), reducing errors.
✔ Perfect for website forms
Especially subscription forms, customer onboarding, surveys, and configurators.
Best Practices When Using Modals in Odoo 18
Always wrap modals within templates rendered by Odoo controllers.
Use JavaScript widgets for more control instead of depending entirely on Bootstrap.
Avoid placing too many fields inside the modal—keep it simple.
Ensure modal data is validated before closing.
Make sure modals are mobile-responsive.
Conclusion
Opening a modal upon clicking a field in Odoo 18 dramatically improves workflow efficiency and provides a modern, intuitive interface. By combining QWeb templates for modal structure and JavaScript for interactive behavior, developers can create seamless user experiences that keep the user focused without navigating away from the page.
This method is highly useful for complex data entry scenarios such as subscription forms, location inputs, customer details, or configuration selections. With Odoo 18's improved UI framework, implementing such features becomes cleaner, more modular, and significantly easier.
