Create Odoo JS Dialog/pop-up in Odoo 17 

Odoo JS Dialog box or pop-up box is a small window which is displayed on top of  the existing window or screen. This may be alert messages, warning messages,  validation messages, confirmation messages etc. These dialog boxes are also  known as modals or pop-ups. 

These dialog boxes can be made visible based on certain actions such as clicking a  button, changing the values of a field etc.  

These dialogs can be written in 2 methods using web.Dialog and the  web.view_dialogs. 

Some of the common dialog or pop-ups used in Odoo include Alert dialog,  Warning dialog, Confirmation dialog, Form View Dialog and  Message Confirm Dialog. 

Warning dialogIn this blog, let us discuss about the Alert dialog, WarningDialog and  ConfirmationDialog. 

AlertDialog 

This is one of the simplest JS Dialog/Pop-up which is used to display messages.  Alert Dialog is imported from ‘confirmation_dialog’. 

Import the Alert dialog as shown in the image below. 

Specify the following in set up

Executing the above code will result in the following view 

In this case, the user can forcibly close the dialog box or click the ‘OK’ button. 

Confirmation Dialog 

This is used to show the user a message giving them the option to either ‘Confirm’  and proceed or ‘Cancel’. This pop-up has 2 buttons, namely , ‘OK’ and  ‘CANCEL’ buttons. The user can close this pop-up in 2 ways, by clicking on the ‘X’ icon or by clicking on the ‘CANCEL’ button. 

Firstly, we need to import the Confirmation dialog as shown below

And specify the following inside the setup. 

Executing the above code will result in the following view 

Warning Dialog

This is basically a JS Component which is generally used to display warning or error messages to the users as a dialog or pop-up box. This type of dialog box typically includes a title, a message and one or more buttons for user interaction. 

Import the WarningDialog as shown in the image below. 

And specify the following inside the setup. 

Executing the above code will result in the following view

Similarly, we can create other dialog or pop-ups such as FormViewDialog,  MessageConfirmDialog, etc. 

These types of JS features integrated with Odoo’s flexible framework enhances the interface user interaction to a great extent. Displaying messages, warnings, alerts or confirmation actions can be triggered by various user actions. These features will help to develop a more dynamic, responsive and highly efficient user interface which will ultimately contribute to the elevated user experience.