ERPNext CustomizationJavascript

How to Automatically Fetch Party Contact Details in ERPNext?

Get Contact Details from Party

A Frappe Client Script to auto-populate contact person and email in the Payment Entry form by calling a server method when the party is selected.

In ERPNext, manually entering contact details for a party in transactions like Payment Entry can be tedious and prone to errors. This client script automates the process by fetching the default contact person and email associated with the selected party (Customer or Supplier) and populating the relevant fields.

The script triggers on the 'party' field change and on form load, ensuring the contact information is always up-to-date without user intervention. It leverages the standard `get_party_details` method, making it a reliable and upgrade-safe customization.

javascript
1//Get Contact updated in Payment Entry
2frappe.ui.form.on('Payment Entry', {
3	party: function(frm) {
4		frappe.call({
5			method:"erpnext.accounts.party.get_party_details",
6			args:{
7				party: frm.doc.party,
8				party_type: frm.doc.party_type
9			},
10			callback: function(r){
11				if(r.message){
12					frm.set_value('contact_person', r.message.contact_person)
13					frm.set_value('contact_email', r.message.contact_email)
14					frm.set_value ('party_name', frm.doc.party)
15				}
16			}
17		})
18	},
19	onload: function(frm) {
20		if (frm.doc.party) {
21		frappe.call({
22			method:"erpnext.accounts.party.get_party_details",
23			args:{
24				party: frm.doc.party,
25				party_type: frm.doc.party_type
26			},
27			callback: function(r){
28				if(r.message){
29					frm.set_value('contact_person', r.message.contact_person)
30					frm.set_value('contact_email', r.message.contact_email)
31					frm.set_value ('party_name', frm.doc.party)
32				}
33			}
34		})
35		}
36	},
37	contact_person: function(frm) {
38		erpnext.utils.get_contact_details(frm);
39	},
40	posting_date: function(frm) {
41		frm.set_value ('reference_date', frm.doc.posting_date);
42	}
43});

Understanding This Code

What It Does

Automatically fetches and sets the `contact_person` and `contact_email` fields in the 'Payment Entry' form based on the selected `party`.

When To Use

Use this script on the 'Payment Entry' DocType to streamline data entry and ensure contact details are consistent with the party master.

Prerequisites

  • •Basic understanding of Frappe Client Scripts.
  • •Access to a Frappe/ERPNext instance with developer mode enabled.

Key Concepts

Important ideas to understand in this code

frappe.ui.form.on

The primary API method for attaching event handlers to form fields or DocType events (like onload, refresh, validate). It allows developers to trigger custom logic when a user interacts with a form.

Learn more

frappe.call

An asynchronous JavaScript function used to call server-side Python methods (which must be whitelisted with the `@frappe.whitelist()` decorator) from the client-side. It's essential for fetching data or executing complex logic on the server.

Learn more

frm.set_value

A client-side API function to set the value of a field in the current form. Using this method is preferred over direct manipulation as it correctly triggers any dependent field events (like 'on change').

Learn more

onload Event

A standard DocType client script event that fires exactly once when the form is fully loaded with its data. This script uses it to populate contact details for existing documents when they are opened.

Learn more

Step-by-Step Tutorial

Follow along to understand how this code works

1

Create a New Client Script

Navigate to your ERPNext desk. In the Awesome Bar, search for 'Client Script' and click 'New' to create a new script.

Next Step
2

Select DocType

In the new Client Script form, select 'Payment Entry' from the 'DocType' dropdown list. This links the script to the Payment Entry form.

Next Step
3

Paste the Code

Copy the provided JavaScript code and paste it into the 'Script' text area of the Client Script form.

javascript
// Paste the full code snippet here
frappe.ui.form.on('Payment Entry', {
    party: function(frm) {
        // ...
    },
    onload: function(frm) {
        // ...
    }
    // ... and so on
});
Next Step
4

Save and Test

Click the 'Save' button. The script is now active. To test it, go to the Payment Entry list, open an existing record or create a new one, and select a Party (Customer/Supplier) that has contact details saved. The 'Contact Person' and 'Contact Email' fields should populate automatically.

Common Issues & Solutions

Troubleshoot problems you might encounter