Dynamic ERPNext Customizations: Mastering Frappe Form Events

Forms are central to interacting with data in the Frappe Framework. To make them dynamic, intuitive, and user-friendly, Form Events serve as a powerful feature. These events enable developers to hook into different stages of a form's lifecycle, implement custom logic, and create seamless workflows tailored to business needs.

At Techsolvo LLP, we specialize in ERPNext customization, and in this blog, we’ll walk you through how Form Events can be leveraged to fulfill unique requirements, using a recent customization example where we calculated medicine prices dynamically based on quantity changes.

---

What Are Form Events?

Form Events are predefined triggers in Frappe Framework that execute custom logic at specific points during a form’s lifecycle. These triggers allow developers to define actions such as validations, computations, or API calls based on user interactions or form states.

---

Types of Form Events

Here’s a breakdown of the most commonly used Form Events:

1. onload: Triggered when the form is loaded.

Use Case: Pre-fill fields or fetch related data when the form loads.

Example:

frappe.ui.form.on('Sales Invoice', {  
    onload: function(frm) {  
        console.log("Form loaded");  
        frm.set_value('posting_date', frappe.datetime.now_date());  
    }  
});  

---

2. refresh: Fired when the form is rendered or reloaded.

Use Case: Add custom buttons or dynamically update the UI.

Example:

frappe.ui.form.on('Sales Invoice', {  
    refresh: function(frm) {  
        frm.add_custom_button('Generate Report', () => {  
            frappe.msgprint('Report Generated!');  
        });  
    }  
});  

3. validate: Called before the form is saved.

Use Case: Perform client-side validations to ensure data accuracy.

Example:

frappe.ui.form.on('Sales Invoice', {  
    validate: function(frm) {  
        if (!frm.doc.customer) {  
            frappe.throw('Customer is required');  
        }  
    }  
});  

4. before_save: Executed just before saving the document.

Use Case: Adjust calculations or set derived fields before saving.

Example:

frappe.ui.form.on('Sales Invoice', {  
    before_save: function(frm) {  
        frm.set_value('total_discount', frm.doc.discount * frm.doc.total);  
    }  
});  

5. after_save: Triggered after the document is successfully saved.

Use Case: Display success notifications or log events.

Example:

frappe.ui.form.on('Sales Invoice', {  
    after_save: function(frm) {  
        frappe.msgprint('Invoice saved successfully!');  
    }  
});  

6. on_submit: Fired when the document is submitted.

Use Case: Automate workflows or trigger notifications upon submission.

Example:

frappe.ui.form.on('Sales Invoice', {  
    on_submit: function(frm) {  
        console.log('Invoice submitted');  
    }  
});  

 

---

Recent Customization Example: Dynamic Price Calculation

Recently, we implemented a customization to calculate the price of medicines dynamically based on quantity changes in ERPNext.

Requirement:

When a user updates the quantity of a medicine, the price field should be recalculated automatically.

Solution:

We utilized the field_change event to implement this logic.

Code Implementation:

frappe.ui.form.on('Medicine Order', {  
    qty: function(frm) {  
        if (frm.doc.qty && frm.doc.rate) {  
            frm.set_value('price', frm.doc.qty * frm.doc.rate);  
        }  
    }  
});  

How It Works:

1. When the qty field changes, the field_change event is triggered.
2. The custom logic checks for valid values in both the qty and rate fields.
3. It dynamically calculates the price and updates it in real-time.

This simple yet effective customization ensures accuracy and saves users time by automating repetitive calculations.

---

Where to Use Form Events

Form Events can be used in diverse scenarios, such as:

• Field Validations: Enforce rules and ensure data integrity during validate.
• Dynamic Updates: Automatically update related fields using onload or refresh.
• Conditional Field Behavior: Make fields read-only, mandatory, or hidden based on specific conditions.
• Custom Workflows: Simplify processes by automating tasks during on_submit or after_save.
• Data Pre-fetching: Populate fields with related data using the onload event.

---

Advantages of Using Form Events

1. Dynamic Forms: Create responsive, real-time interactions.
2. Error Prevention: Perform client-side validations to reduce errors.
3. Process Automation: Automate calculations and workflows, saving time.
4. Custom Business Logic: Tailor forms to meet unique business needs.

---

Conclusion

Form Events in Frappe Framework provide developers with powerful tools to create interactive, dynamic, and robust forms. Whether it's automating workflows or implementing complex business logic, these events offer extensive customization capabilities.

If you're looking for custom ERPNext solutions to address your business challenges, Techsolvo LLP can help!

Let’s Connect

• Website: Techsolvo LLP
• Email: mradul.mishra@techsolvo.com

Ready to take your ERPNext implementation to the next level? Contact us today!

Don’t forget to watch the video demonstration accompanying this blog to see dynamic price calculation in action.