Enable Dark Mode!
how-to-add-button-inside-dialog-box-in-odoo-17.jpg
By: Jumana Haseen

How to Add Button Inside Dialog Box in Odoo 17

Technical Odoo 17

In this blog, we are discussing how to add a button inside a dialog box in odoo 17. A dialog box is a small window that is displayed on the existing window on a button click, or on changing fields such as Confirmation Dialog, Alert Dialogs, or Warning Dialogs. It can also be like Modals or Popups. Mostly, Dialogs are used in Websites and also used in the backend.

Here, we are discussing adding buttons inside different Dialogs, namely ConfirmationDialog for asking for confirmation, WarningDialogs for showing error dialogs, and AlertDialogs.

Confirmation

web.ConfirmationDialog is used to show a simple message to the user. web.ConfirmationDialog has two buttons, that is the Ok button and the Cancel button. Therefore, we have two ways to close the dialog. By clicking the button with the X icon or by clicking the Cancel button. So, in order to add a new button, the template extends the web.ConfirmationDialog component. It adds buttons after existing buttons, and the button's class and label are dynamically controlled by props. The button's click event is bound to the method.

<?xml version="1.0" encoding="UTF-8" ?>
<templates>
   <t t-name="advanced_many2many_tags.SaveFormDialog"
      t-inherit="web.ConfirmationDialog" t-inherit-mode="extension">
       <xpath expr="//button[hasclass('btn')]" position="after">
           <button class="btn btn-secondary"
                   t-att-class="props.open_form_viewClass"
                   t-on-click="_open_form_view">Open form View
           </button>
       </xpath>
   </t>
</templates>

The code imports various modules and components needed for patch function to extend the behavior of the ConfirmationDialog component.

/** @odoo-module */
import { Dialog } from "@web/core/dialog/dialog";
import { _t, _lt } from "@web/core/l10n/translation";
import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
import { patch } from "@web/core/utils/patch";
import { useService } from "@web/core/utils/hooks";

Add the button function.

patch(ConfirmationDialog.prototype, {
   setup() {
       super.setup();
       this.action = useService("action");
       },
         _open_form_view(ev) {
   return this.props.close();
   },
       });

In this code snippet, the ConfirmationDialog component is being defined

With additional props and default props.

ConfirmationDialog.props = {
   ...ConfirmationDialog.props,
   open_form_viewClass: { type: String, optional: true },
   open_form_view: { type: Function, optional: true },
   open_form_viewLabel: { type: String, optional: true },
   recordResId: {type: Number, optional: true}
};
ConfirmationDialog.defaultProps = {
...ConfirmationDialog.defaultProps,
   open_form_viewLabel: _t("Open Form View"),
   open_form_viewClass: "btn-primary",
};

Here is the ConfirmationDialog and message, and we can see the added button along with other buttons.

This is the view.

How to Add Button Inside Dialog Box in Odoo 17-cybrosys

Likewise, we can add buttons inside in odoo , different dialogs like WarningDialogs, and AlertDialogs through the same method inside the website.


If you need any assistance in odoo, we are online, please chat with us.



0
Comments



Leave a comment

 


whatsapp_icon
location

Calicut

Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635

location

Kochi

Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.

location

Bangalore

Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message