Dialog Types in Frappe Framework (Frappe v15)

Introduction: Why Dialogs Are Essential in Frappe

Dialogs are a core UI component in Frappe Framework. They allow developers to collect user input, display confirmations, and trigger actions without navigating away from the current form.
In Frappe Framework v15, dialogs are standardized, flexible, and tightly integrated with the Desk UI, making them essential for ERPNext customizations and workflows.

What Is a Dialog in Frappe?

A dialog in Frappe is a modal window created using the frappe.ui.Dialog class.
It is used to:

• Capture structured user input
• Confirm user actions
• Display contextual forms
• Trigger client-side or server-side logic

Dialogs are rendered entirely on the client side and follow Frappe’s form field architecture.

Core Dialog Types in Frappe (v15)

Frappe Framework v15 supports multiple dialog patterns depending on the use case.

Dialog Categories at a Glance

All dialog types are built on top of frappe.ui.Dialog.

How to Create a Standard Dialog in Frappe?

A standard dialog is the most commonly used dialog type and supports multiple fields.

Example: Basic Dialog

let dialog = new frappe.ui.Dialog({
title: 'Enter Details',
fields: [
{
label: 'Customer Name',
fieldname: 'customer_name',
fieldtype: 'Data',
reqd: 1
},
{
label: 'Email',
fieldname: 'email',
fieldtype: 'Data'
}
],
primary_action_label: 'Submit',
primary_action(values) {
console.log(values);
dialog.hide();
}
});
dialog.show();

Key Properties Explained

• title → Dialog header
• fields → Array of standard Frappe field definitions
• primary_action → Executes on submit
• dialog.show() → Renders the dialog

✔ Fully supported in Frappe v15
✔ Uses standard DocField syntax

What Field Types Are Supported in Dialogs?

Dialogs support all standard Frappe fieldtypes, including:

• Data
• Select
• Check
• Date
• Int / Float / Currency
• Link
• Table
• Text / Small Text

This makes dialogs consistent with DocType forms.

How to Create a Confirmation Dialog?

Use frappe.confirm() for confirmation-only dialogs.

Example: Confirmation Dialog

frappe.confirm(
'Are you sure you want to proceed?',
() => {
frappe.msgprint('Confirmed');
},
() => {
frappe.msgprint('Cancelled');
}
);

When to Use

• Deleting records
• Submitting documents
• Irreversible actions

✔ Lightweight
✔ No custom layout needed

How to Create a Prompt Dialog?

Prompt dialogs are used for quick, single-field input.

Example: Prompt Dialog

frappe.prompt(
{
fieldname: 'reason',
fieldtype: 'Small Text',
label: 'Reason',
reqd: 1
},
(values) => {
console.log(values.reason);
},
'Enter Reason',
'Submit'
);

Best Use Cases

• Asking for remarks
• Capturing rejection reasons
• One-time user input

How to Display Message Dialogs?

For informational messages, use frappe.msgprint().

frappe.msgprint({
title: 'Information',
message: 'Process completed successfully',
indicator: 'green'
});

Indicators supported:

• green (success)
• orange (warning)
• red (error)
• blue (info)

Advanced Dialog Configuration (v15)

Setting Default Values

dialog.set_value('customer_name', 'ABC Corp');

Getting Field Values

let values = dialog.get_values();

Disabling Primary Action

dialog.get_primary_btn().prop('disabled', true);

Using Table Fields Inside Dialogs

Dialogs can include Table fields, enabling mini-forms inside modals.

Example: Table Field
{
fieldname: 'items',
fieldtype: 'Table',
label: 'Items',
fields: [
{ fieldname: 'item', fieldtype: 'Data', label: 'Item' },
{ fieldname: 'qty', fieldtype: 'Int', label: 'Qty' }
]
}

✔ Useful for bulk input
✔ Same behavior as DocType child tables

Best Practices for Dialog Usage

UI & UX Best Practices

• Keep dialogs focused and minimal
• Avoid overloading with too many fields
• Use clear titles and button labels

Technical Best Practices

• Reuse dialogs where possible
• Validate inputs inside primary_action
• Avoid heavy logic inside dialog rendering

Common Mistakes to Avoid

Real-World ERPNext Use Cases

Sales & CRM

• Capture rejection reasons
• Collect approval remarks

Manufacturing

• Enter scrap quantities
• Confirm production steps

Accounting

• Capture adjustment notes
• Confirm journal postings

Industry Relevance

Dialogs are widely used in:

• Manufacturing ERP
• Finance & Accounting
• CRM & Sales Automation
• Project Management

They enable faster decisions without page reloads.

Target Audience

• ERPNext Developers
• Frappe Framework Consultants
• UI/UX Customization Teams
• ERP Implementation Engineers

Summary: Choosing the Right Dialog Type

In Frappe Framework v15, dialogs are built using frappe.ui.Dialog and enhanced with helper APIs like frappe.confirm and frappe.prompt.

Choosing the right dialog type ensures:

• Better user experience
• Cleaner workflows
• Maintainable ERP customizations