Nikhil Dhiman · 11 Apr 2023 · 1262 views

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.

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.

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’.

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.

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.

The Order Receipt will look like this,

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.

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.

b.) Now select cheque for the popup.

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

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

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.

Also Read: How To Add & Store A Field In Odoo POS

Conclusion

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!