Developer Guide to Modifying JS Dialog Box in Odoo18

Dialog boxes, also known as pop-ups, are essential for displaying alerts, warnings, messages, and action confirmations. When you click buttons, update fields, or interact with Many2many fields, these small windows appear on the main interface. Pop-ups or modals, js dialog box in Odoo18 are key for alerts, warnings, and confirmations, informing users and preventing errors.

This article explores two key areas of Odoo18: the modification of JavaScript dialog boxes and the handling of Kanban card drag-and-drop, the latter achieved through a customized sortRecordDrop() function and adjustments to the KanbanRenderer.

Modify KanbanRenderer to Show a Confirmation Dialog

Create a new JavaScript file:  static/src/js/custom_kanban.js

/** @odoo-module **/
import { patch } from "@web/core/utils/patch";
import { KanbanRenderer } from "@web/views/kanban/kanban_renderer";
import { _t } from "@web/core/l10n/translation";
import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";

patch(KanbanRenderer.prototype, {
    async sortRecordDrop(recordId, sourceGroupId, { element, parent, previous }) {
        element.classList.remove("o_record_draggable");

        const isSameGroup = parent?.dataset.id === element?.parentElement?.dataset.id;
        const isGrouped = this.props.list.isGrouped;
        const isParentHovered = parent?.classList.contains("o_kanban_hover");

        if (!isGrouped || isParentHovered || isSameGroup) {
            if (parent?.classList) {
                parent.classList.remove("o_kanban_hover");
            }

            while (previous && !previous.dataset.id) {
                previous = previous.previousElementSibling;
            }

            const referenceRecordId = previous ? previous.dataset.id : null;
            const targetGroupId = parent?.dataset.id;

            // Show confirmation dialog before executing move
            this.dialog.add(ConfirmationDialog, {
                title: _t("Move Task"),
                body: _t(commentthe reason for moving this task."),
                options: ["Completed", "Blocked", "Requires Review"], // Reason options
                confirm: (selectedReason) => {
                    if (selectedReason) {
                        console.log("User selected reason:", selectedReason);
                        this.props.list.moveRecord(recordId, sourceGroupId, referenceRecordId, targetGroupId);
                    }
                },
                cancel: () => {
                    console.log("Task move cancelled by user.");
                },
            });
        }

        element.classList.add("o_record_draggable");
    },
});

A confirmation dialog appears when the user moves a Kanban card to a new stage.

A reason (such as “Completed” or “Blocked”) must be chosen by the user before the transfer may be confirmed. The job remains in place if it is canceled.

Odoo’s ConfirmationDialog doesn’t save selected values by default and to address this, we need to modify it so that when the user clicks “confirm,” the chosen value will stored, letting us control the state and retrieve it.

Make sure the user sees radio buttons to choose a reason by making changes to the XML template.

Create another JS file

static/src/js/custom_confirmation_dialog.js

/** @odoo-module **/
import { useState } from "@odoo/owl";
import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
import { patch } from "@web/core/utils/patch";

// Extend ConfirmationDialog to support selectable options
ConfirmationDialog.props = {
    …ConfirmationDialog.props,
    options: { type: Array, optional: true }, // Array of selectable options
};

patch(ConfirmationDialog.prototype, {
    setup() {
        super.setup();
        this.dialogState = useState({
            selectedReason: null,  // Stores the currently selected reason
        });
    },

    // Triggered when a reason is selected by the user
    onReasonChange(event) {
        this.dialogState.selectedReason = event.target.value;
    },

    // Handles confirmation logic and passes selected reason to callback
    async execButton(callbackFn) {
        if (this.isProcess) {
            return;
        }
        this.setButtonsDisabled(true);
        const selectedValue = this.dialogState.selectedReason;

        if (callbackFn) {
            let closeDialog;
            try {
                closeDialog = await callbackFn(selectedValue); // Pass reason to caller
            } catch (error) {
                this.props.close();
                throw error;
            }
            if (closeDialog === false) {
                this.setButtonsDisabled(false);
                return selectedValue;
            }
        }

        this.props.close();
        return selectedValue;
    },

    // Called when user confirms action
    async _confirm() {
        const reason = await this.execButton(this.props.confirm);
        return reason;
    }
});

Make sure the user sees radio buttons to choose a reason by making changes to the XML template.

static/src/xml/custom_confirmation_dialog.xml

<?xml version="1.0" encoding="UTF-8" ?>

<templates xml:space="preserve">

    <t t-name="custom_dialog_modification.CustomConfirmationDialog" t-inherit="web.ConfirmationDialog" t-inherit-mode="extension">

        <xpath expr="//p[@class='text-prewrap']" position="after">

            <div class="custom-dialog-content" style="margin-top: 10px;">

                <!-- Radio selection for options -->

                <t t-if="props.options and props.options.length">

                    <t t-foreach="props.options" t-as="option" t-key="option">

                        <div class="form-check my-1">

                            <label class="form-check-label">

                                <input type="radio"

                                       class="form-check-input"

                                       name="selection"

                                       t-att-value="option"

                                       t-on-change="onReasonChange"

                                       t-att-checked="dialogState.selectedReason === option"/>

                                <t t-esc="option" />

                            </label>

                        </div>

                    </t>

                </t>

            </div>

        </xpath>

    </t>

</templates>

Add these files to manifest.py.

Now, when a user in Dubai (or anywhere) moves a Kanban card to a new stage in Odoo on this April 21st, 2025, a confirmation popup appears, requiring them to select a reason to proceed. Clicking “OK” after choosing a reason advances the task. Canceling keeps the task in its original location.

So, as we’ve seen, modifying JS Dialog Box in Odoo18 offers a clear path to both implementing business rules and improving user satisfaction. Need help to implement these enhancements? Bassam Infotech has the expertise you need. For any queries about the process or related matters, please feel free to contact us our team