Frappe FrontendJavascript

How to Use Alert, Prompt, and Confirm Dialogs in Frappe

Alerts/ Dialogs Types

Learn to implement user-facing dialogs in Frappe, including show_alert, frappe.prompt, frappe.confirm, and custom dialogs using frappe.ui.Dialog.

Effective user interaction is key to building intuitive applications within the Frappe framework. Frappe provides a versatile set of built-in dialogs to communicate with users, gather input, and confirm actions. These tools range from simple, non-obtrusive alerts to complex, custom-built dialog boxes. Mastering these dialog types is essential for any Frappe developer looking to create a seamless and responsive user experience.

javascript
Frappe Dialogs Documentation
1// Simple alert that disappears after 5 seconds
2show_alert('Hi, do you have a new message?', 5);

Understanding This Code

What It Does

Provides a suite of functions to create various modal and non-modal dialogs for user interaction in Frappe applications.

When To Use

Use in Client Scripts to display informational messages, request user input, confirm critical actions, or present complex custom forms without navigating away from the current page.

Prerequisites

  • •Basic understanding of Frappe Client Scripts.
  • •A Frappe development environment.

Key Concepts

Important ideas to understand in this code

frappe.ui.Dialog

The core Dialog class in Frappe. All other dialogs like `prompt` and `confirm` are convenient wrappers around this class. You can instantiate it directly to create highly customized dialogs with multiple fields and custom actions.

Learn more

Callback Functions

Since user interaction is asynchronous, most dialogs rely on callback functions. These functions are executed only after the user interacts with the dialog (e.g., clicks a button or submits data), ensuring your code runs at the appropriate time.

Learn more

Asynchronous UI

Dialogs do not halt code execution. The script continues to run after a dialog is shown. This is why logic that depends on the dialog's result must be placed inside a callback function to handle the asynchronous nature of user input.

Learn more

Step-by-Step Tutorial

Follow along to understand how this code works

1

Displaying a Simple Alert

The `show_alert` function is used for non-obstructive messages. It displays a small notification that automatically fades out. It takes the message string and an optional duration in seconds.

javascript
show_alert('Your document has been saved.', 7);
Next Step
2

Prompting for User Input

Use `frappe.prompt` to collect data from the user. It takes an array of field objects, a callback function to process the entered values, a title, and a primary button label.

javascript
frappe.prompt(
  [
    {
      'fieldname': 'user_email',
      'fieldtype': 'Data',
      'label': 'Enter your Email',
      'reqd': 1
    }
  ],
  function(values) {
    console.log(values.user_email);
    show_alert('Email captured: ' + values.user_email);
  },
  'Email Collection',
  'Submit'
);
Next Step
3

Confirming an Action

`frappe.confirm` is used to get a yes/no confirmation from the user before proceeding. It takes a message and two callback functions: one for a positive confirmation (`onyes`) and one for a negative confirmation (`oncancel`).

javascript
frappe.confirm(
    'Are you sure you want to delete this record?',
    () => {
        // Logic to delete the record
        console.log('Action confirmed');
    },
    () => {
        // Logic if user cancels
        console.log('Action cancelled');
    }
)
Next Step
4

Using `msgprint` for Detailed Messages

The `msgprint` function shows a modal dialog that the user must explicitly close. It is useful for displaying important information or formatted content, as it accepts HTML strings.

javascript
msgprint('<h3>Update Complete</h3><p>All items have been successfully processed.</p>', 'Status Report');
Next Step
5

Building a Custom Dialog

For maximum flexibility, you can instantiate `frappe.ui.Dialog`. This allows you to define multiple fields, set a primary action, and manipulate the dialog's content dynamically.

javascript
let d = new frappe.ui.Dialog({
    title: 'User Details',
    fields: [
        {fieldname: 'full_name', label: 'Full Name', fieldtype: 'Data'},
        {fieldname: 'dob', label: 'Date of Birth', fieldtype: 'Date'}
    ],
    primary_action_label: 'Submit',
    primary_action(values) {
        show_alert('Processing user: ' + values.full_name);
        d.hide();
    }
});

d.show();

Common Issues & Solutions

Troubleshoot problems you might encounter