Home Blog How to Create a Popup in Odoo POS
How to Create a Popup in Odoo POS

How to Generate or Create Pop-up In Odoo

How to generate a popup on clicking a particular button and extract input values from the popup and save it to the backend and show it on Order Receipt.

Creating a popup window template and linking it to the js class

When we create an Owl template, we have to create an Owl JS class associated with its Owl template. 

First, we will create an owl template for the popup. 

Owl template for popup

Here we have created a template named ‘MyPopup’. This will be a new window that will appear on our main window. In the header, we will add the title.

We are creating two new inputs named ‘Cheque Number’ and ‘Cheque Date’.

We are adding the t-model attribute in each input for extracting input data to the js class. We are saving input values in t-model attribute values.

Also, we are creating two buttons in the footer and showing their name by ‘props.confirmText’ and ‘props.cancelText’.

Now we will create the js file associated with this template.

js file

Here we are inheriting a class named ‘AbstractAwaitablePopup’ which is necessary for creating popups.

Then, we are inheriting the constructor method of AbstractAwaitablePopup class and adding a new variable named ‘state’ in ‘this’. We are extracting data from input in an XML file and saving it to the ‘state’ variable. 

Also, we are overriding a method named ‘getPayload’ and we are returning our ‘state’ variable, which will be used in saving input data in the Payload variable. 

We do not have to define the confirm or cancel button because it is already defined in AbstractAwaitablePopup class. If you look into the AbstractAwaitablePopup class, you will see that the confirm button uses the getPayload method. That is why we overridden the getPayload method earlier.

After that, we are assigning the ‘MyPopup’ template to the ‘MyPopup’ class. Also, we are defining some default props that could be accessed in XML.

In the end, we have added the MyPopup popup to the registries for further use.

Now, we have created our required popup. We will now show it on the particular button and extract entered data in the input field of the popup.

Generating Popup, extracting data, exporting it to the backend, and exporting for Order Receipt

We have to generate a popup for a particular type of payment whose is_cheque boolean field is true. So we will look for a function that is called at the time of selection of payment method. 

For this, we have to override a method named ‘add_paymentline’.

add payment line

While overriding, we have to show the popup. We are calling popup in a method named ‘popup’. We store the output of the show popup method is confirmed and Payload.

The input fields on the popup will be returned as output and stored in the payload which can be accessed later.

If we see the default flow in line no. 31, we’ll see the amount is sent through the selected_paymentline. So similarly, we also save the value and send it through selected_paymentline

Also, we have to call popups for particular payment methods. So we will apply the condition and show only the payment method whose is_cheque field is true.

Now we have extracted the entered input in the popup. Now we will export it for the backend as well as for receipt. 

For this, we will inherit Paymentline from models. In this, we will inherit three methods: initialize, export_as_json and export_as_printing.

payment lines from models

We will add new variables in these methods and save the value from ‘this’ which we saved earlier. Export_as_json is for exporting to python and export_as_printing is for showing on Order Receipt.

Also, we have to inherit the Order Receipt template to add the cheque number and cheque date.No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.

order receipt template

The Order Receipt will look like this,

order receipt

Accepting data using the python method

There are some methods in python which accept the exported data from the js file and save it in particular records. So we are going to inherit one of them which is useful for us.

We are inheriting the _payment_fields method.

payment fields

We will add cheque_number and cheque_date using this method. This method can save the cheque number and date in a particular order in the payment section.

Demonstrating through new POS Order

a.) First, we select products, and their quantity and click on payment for payment.

Demonstrating through new POS order

b.) Now select cheque for the popup.

demosntrating through new pos

c.) Enter the cheque number and cheque date then press confirm.

demonstrating throgh new pos

d.) After validating the order, you will see the cheque date and cheque number on the order receipt.

demonstrating through new pos

e.) You can also go into the backend and look into order → in the payment section. Here you will see the cheque number and cheque date entered earlier.

demonstrating through new pos


In a nutshell, generating a popup when a specific button is clicked in Odoo would be a great way to enhance the overall user experience and improve your website's performance. 

With the help of this informative blog, you can easily create customized popups which will cater to your business' needs. 

One should always remember that popups should be used strategically and sparingly to avoid overwhelming the visitors on the website. 

Keep them simple, visually attractive, limited and offer something of value to encourage action on them.

Once learnt about them, it's time to put the newfound knowledge into work and start creating meaningful popups in Odoo. You can always experiment with different styles, information, positioning and actions to see what works best for your website. Make sure to track your results and adjust accordingly.

What are you waiting for? Go and create new popups for your website now!

Check out Our Other Blogs as Well:-

Ready to take your Odoo system to the next level? Contact us today to discuss your customization needs and discover how we can help optimize your business processes. Let's work together to achieve your goals!

Contact Us Today

Get In Touch with Us

Leave a Comment

Your email address will not be published.

Your comment is under review by our moderation team.