Dialog API

Frappe provides a group of standard, interactive and flexible dialogs that are easy to configure and use. There's also an API for Python.

frappe.ui.Dialog

new frappe.ui.Dialog({ title, fields, primary_action })

Creates a new Dialog instance.

let d = new frappe.ui.Dialog({
    title: 'Enter details',
    fields: [
        {
            label: 'First Name',
            fieldname: 'first_name',
            fieldtype: 'Data'
        },
        {
            label: 'Last Name',
            fieldname: 'last_name',
            fieldtype: 'Data'
        },
        {
            label: 'Age',
            fieldname: 'age',
            fieldtype: 'Int'
        }
    ],
    primary_action_label: 'Submit',
    primary_action(values) {
        console.log(values);
        d.hide();
    }
});

d.show();

Dialog frappe.ui.Dialog

frappe.msgprint

frappe.msgprint(message) or frappe.msgprint({ title, message, indicator })

Show message in a modal.

// only message
frappe.msgprint(__('Document updated successfully'));

// with options
frappe.msgprint({
    title: __('Notification'),
    indicator: 'green',
    message: __('Document updated successfully')
});

Msgprint frappe.msgprint

You can also bind a primary action to this dialog by passing action(as a method) within primary_action. Alternatively, primary_action can contain server_action or client_action.

The server_action and client_action are dotted paths to the respective methods which will execute on clicking the primary button.

// with primary action
 frappe.msgprint({
    title: __('Notification'),
    message: __('Are you sure you want to proceed?'),
    primary_action:{
        action(values) {
            console.log(values);
        }
    }
});

// with server and client action
frappe.msgprint({
    title: __('Notification'),
    message: __('Are you sure you want to proceed?'),
    primary_action: {
    'label': 'Proceed',
    // either one of the actions can be passed
    'server_action': 'dotted.path.to.method',
    'client_action': 'dotted_path.to_method',
    'args': args
    }
});

Msgprint with Primary Action frappe.msgprint with primary action bound

frappe.throw

frappe.throw(error_message)

Show error_message in a modal and throw exception.

frappe.throw(__('This is an Error Message'))

Throw frappe.throw

frappe.prompt

frappe.prompt(label) or frappe.prompt(df) or frappe.prompt(fields)

Prompt user for a value or list of values.

// prompt for single value of type Data
frappe.prompt('First Name', ({ value }) => console.log(value))

// Set title and button label
frappe.prompt('First Name', console.log, 'Enter First Name', 'Submit');

// prompt for single value of any type
frappe.prompt({
    label: 'Birth Date',
    fieldname: 'date',
    fieldtype: 'Date'
}, (values) => {
    console.log(values.date);
})

// prompt for multiple values
frappe.prompt([
    {
        label: 'First Name',
        fieldname: 'first_name',
        fieldtype: 'Data'
    },
    {
        label: 'Last Name',
        fieldname: 'last_name',
        fieldtype: 'Data'
    },
], (values) => {
    console.log(values.first_name, values.last_name);
})

Prompt frappe.prompt

frappe.confirm

frappe.confirm(message, if_yes, if_no)

Show a confirmation modal, executes if_yes if confirmation is given else executes if_no.

frappe.confirm('Are you sure you want to proceed?',
    () => {
        // action to perform if Yes is selected
    }, () => {
        // action to perform if No is selected
    })

Prompt frappe.confirm

frappe.show_alert

frappe.show_alert(message, seconds) or frappe.show_alert({message, indicator}, seconds)

Alert Dialog is used for showing non-obstructive messages.

Its parameters include message, which can contain the indicator color as well, and its display duration. The default is 7 seconds.

frappe.show_alert('Hi, you have a new message', 5);

//show_alert with indicator
frappe.show_alert({
    message:__('Hi, you have a new message'),
    indicator:'green'
}, 5);

Show Alert frappe.show_alert

frappe.show_progress

frappe.show_progress(title, count, total, description)

Displays a progress bar with count (as current progress) and total (as maximum progress value).

frappe.show_progress('Loading..', 70, 100, 'Please wait');

Show Progress frappe.show_progress

frappe.ui.form.MultiSelectDialog

new frappe.ui.form.MultiSelectDialog({ doctype, target, setters, date_field, get_query, action })

A MultiSelectDialog consists of filter fields followed by a multiple selection list. The primary button will perform the passed action on the selected options.

By default, the Search Term field and Date Range field will compose the filter fields.

The argument list includes:

  • doctype: The source to fetch and display selection entries from.
  • target: The target where the modal is to be displayed.
  • setters: These will compose the filter fields and values to populate them with. These also translate to custom columns for the selection list.
  • date_field: It is necessary to pass the date_field of the DocType in consideration.
  • get_query: A function that returns query and filters to query the selection list. A custom server side method can be passed via query, and filters will be passed to that method.
  • action: Contains the primary action to be performed on the selected options. It takes selections as a parameter, which comprises of the selected options.

Let us assume we want to fetch Material Requests into our dialog. We can then go on to invoke the MultiSelectDialog in the following manner:

new frappe.ui.form.MultiSelectDialog({
    doctype: "Material Request",
    target: this.cur_frm,
    setters: {
        company: "Zoot"
    },
    date_field: "transaction_date",
    get_query() {
        return {
            filters: { docstatus: ['!=', 2] }
        }
    },
    action(selections) {
        console.log(selections);
    }
});

// MultiSelectDialog with custom query method
let query_args = {
    query:"dotted.path.to.method",
    filters: { docstatus: ["!=", 2], supplier: "John Doe" }
}

new frappe.ui.form.MultiSelectDialog({
    doctype: "Material Request",
    target: this.cur_frm,
    setters: {
        company: "Zoot"
    },
    date_field: "transaction_date",
    get_query() {
        return query_args;
    },
    action(selections) {
        console.log(selections);
    }
});

MultiSelectDialog frappe.ui.form.MultiSelectDialog

Here all the Material Requests that fulfill the filter criteria will be fetched into the selection area. The setter company is added to the filter fields along with its passed value. The date_field will be used to fetch and query dates from the DocType mentioned.

The Make Material Request (or Make {DocType}) secondary action button will redirect you to a new form in order to make a new entry into the DocType passed.