This article is the fifth part of my odoo javascript programming tutorial series. If you haven’t read the first to the fourth part, I suggest you to read them first. You should find the link at the bottom of this page.

In this article, I will discuss how to use odoo’s javascript dialogs. A dialog is a view that appears on top of another view. Sometimes dialogs are also called as modal or popup. An example of a dialog that we usually use in odoo is when we click the Search More button in the Many2one field, for example in the Customer field in the sales order form. When we click that button, odoo will display a list of customers that can be selected by the user. That view is called a dialog, modal, or popup, and it appears on top of another view.

In this article, I will discuss several dialogs that are commonly used in odoo, especially on backend pages. Dialogs in odoo 14 are written in 2 places, it is the web.Dialog and the web.view_dialogs. The final goal of this tutorial is to make odoo display a sales order list in a dialog when the user clicks on the button with the dollar icon. So, the user can choose freely which sales orders that he wants to get the total value. So, the calculated sales orders are no longer hardcoded as we did in the fourth part.

Alert

The first dialog that we will discuss is the Alert, from the web.Dialog module. So, let’s import the web.Dialog module first, with the code below.

var Dialog = require('web.Dialog');

web.Dialog.alert is used to display a simple message, with a button. If you open the odoo source code on github you will know that web.Dialog.alert takes 3 arguments. Always fill the first argument (owner) with the value of this or self. Then in the second argument (message) fill in with the message that you want to show to the user. The third argument (options) is optional. This argument is used to set the action that will be executed by odoo when the user forcibly closes the dialog or clicks the OK button. This is the example of how to use the web.Dialog.alert on a button with a dollar icon.

btn_dollar_action: function(){
    var self = this;
    Dialog.alert(
        this,
        "Are you sure you want to fill this field with a value of 0 ?",
        {
            onForceClose: function(){
                console.log("The user closes the dialog forcibly, by clicking on the button with the close icon");
            },
            confirm_callback: function(){
                console.log("The user clicks on the OK button");
                self._setValue("0");
            }
        }
    );        
},

This is the view of the alert dialog.

Confirm

Next, we will discuss the web.dialog.confirm. Similar to the web.Dialog.alert, the web.Dialog.confirm is also used to display a simple message to the user, the difference is: the web.Dialog.confirm has 2 buttons, it is the Ok button and the Cancel button, so the user has 2 ways to close the dialog. It is by clicks the button with the X icon or clicks the Cancel button. This is the example of how to use the web.Dialog.confirm.

btn_dollar_action: function(){
    var self = this;    

    Dialog.confirm(
        this,
        "Are you sure you want to fill this field with a value of 1000 ?",
        {
            onForceClose: function(){
                 console.log("The user closes the dialog forcibly, by clicking on the button with the close icon");
            },
            confirm_callback: function(){
                console.log("The user clicks on the OK button");
                self._setValue("1000");
            },
            cancel_callback: function(){
                console.log("The user clicks on the Cancel button");
            }
        }
    );         
},

This is the view of the confirm dialog from the code above.

If you read the web.Dialog source code, actually, this module still has one more dialog, namely safeConfirm, but I will not discuss it, please try it yourself, it should not be much different from the two dialogs that we discussed earlier.

Next, we will discuss the dialogs in the web.view_dialogs module, so let’s import it first, with the code below.

var view_dialogs = require('web.view_dialogs');

The web.view_dialogs has 2 dialogs that we can use, it is the FormViewDialog and the SelectCreateDialog.

The FormViewDialog is used to display the form view of a record, for example when we click the external link button in the Customer field on the sales order form. When we click the button, the data from the customer that we have selected will be displayed by odoo, as shown in the image below.

This is an example of how to use the FormViewDialog to display the sales order with the id of 1, when the user clicks the button with the dollar icon.

btn_dollar_action: function(){
    var self = this;
    new view_dialogs.FormViewDialog(this, {
        res_model: 'sale.order', // the model name           
        res_id: 1, // the primary key of the model
        title: "Sale Order with ID of 1", // dialog title, optional
        on_saved: function (record) { // the action that will be executed if user clicks the Save button
            console.log("The user clicks the Save button");
        }
    }).open();     
},

This is the screenshot of the FormViewDialog code above.

Next, let’s discuss the SelectCreateDialog. This dialog is used to display a list view of a model, include the search view. An example of this dialog is when we click the Search More button in the Many2one field, where odoo will display the data in the list view, so, the user can select it. The user can also perform a search first, before selecting the data that he wants. This dialog is the dialog that we need to complete the behavior of our module from the fourth part. With this dialog we can make user can choose which sales orders that he wants to get the total value, so we don’t need to hardcode it like in the fourth part of this tutorial series.

This is the example of how to use the SelectCreateDialog.

btn_dollar_action: function(){
    var self = this;
    new view_dialogs.SelectCreateDialog(this, {
        res_model: 'sale.order', // the model name      
        title: "Select the Sales Order", // dialog title, optional
        domain: [['state','!=', 'draft']], // domain to limit the record that can be selected, optional
        no_create: true, // an option to make sure that user can not create a new record, optional
        on_selected: function (records) {
            console.log(records)
        }
    }).open();      
},

When the user clicks the button with the dollar icon, a dialog will appear, like in the image below.

If the user clicks the Select button, odoo will execute the function of the on_selected option that we wrote above, and will return a list of records that have been selected by the user, like in the image below.

From the picture above, it can be seen that we can get the id of the sale.order model that has been selected by the user. Therefore, we can combine it with the tutorial from the fourth part, so, the sales order data that we sent to the server can be dynamic. Please take a look at the code below.

btn_dollar_action: function(){
    var self = this;
    new view_dialogs.SelectCreateDialog(this, {
        res_model: 'sale.order', // the model name     
        title: "Select the Sales Order", // dialog title, optional
        domain: [['state','!=', 'draft']], // domain to limit the record that can be selected, optional
        no_create: true, // an option to make sure that user can not create a new record, optional
        on_selected: function (records) {
            var record_ids = records.map(function(item){
                return item['id'];
            });
            self._rpc({
                model: self.attrs.relatedModel,
                method: self.attrs.modifiers.relatedAction,
                args: [record_ids,0,0],
                kwargs: {value_3: 0, value_4: 0}                
            }).then(function(result){
                self._setValue(result.toString());
            });   
        }
    }).open();      
},

This is the end of the discussion about odoo dialog this time. I recommend you to read the odoo source code to see the list of what options that you can use in the dialogs. Because in this article I do not discuss all of them. Also, you need to know that the above dialogs can only be used on backend pages. As far as I know the dialog above cannot be used in the Point of Sales or the Website.

Download the Source Code