Introduction: What Does “Improving a Standard Control” Mean?
Improving a standard control in Frappe Framework v15 means extending or enhancing existing UI controls—such as Data, Link, Select, or Date—without modifying core framework files.
This approach ensures:
- Upgrade safety
- Maintainability
- Compatibility with ERPNext updates
What Is a Standard Control in Frappe?
A standard control is a built-in UI field component used in forms and dialogs.
Examples include:
- Data
- Link
- Select
- Date
- Check
All controls inherit from the base Control class.
Why Improve Instead of Modify?
Directly editing core controls is strongly discouraged.
Reasons:
- Core updates overwrite changes
- Breaks upgrade paths
- Causes unpredictable UI behavior
Frappe v15 provides safe extension mechanisms.
How Frappe Controls Are Structured (v15)
Each control is implemented as a JavaScript class inside the Frappe Desk module.
Base hierarchy:
- Control (base)
- ControlData
- ControlLink
- ControlSelect
Controls are registered dynamically via frappe.ui.form.
Recommended Approach: Extending a Control
The correct way to improve a standard control is to extend its prototype using JavaScript.
This allows you to:
- Add new behaviors
- Override specific methods
- Preserve existing functionality
Example: Improving the Data Control
Goal
Add custom behavior when the value changes.
Implementation
frappe.ui.form.ControlData = frappe.ui.form.ControlData.extend({
parse(value) {
value = this._super(value);
if (value) {
return value.trim();
}
return value;
}
});
✔ This safely enhances the Data control without touching core files.
Where to Place Custom Control Code
Custom control improvements should live inside your custom app.
Recommended location:
my_app/public/js/custom_controls.js
Then include it using hooks.
Registering Custom JS via hooks.py
app_include_js = [
"/assets/my_app/js/custom_controls.js"
]
This ensures the control loads across the Desk.
Improving Control Behavior on Forms Only
If the change is form-specific, use Client Scripts instead.
Example:
frappe.ui.form.on("Sales Order", {
refresh(frm) {
frm.fields_dict.customer.$input.on("change", () => {
console.log("Customer changed");
});
}
});
This avoids global side effects.
Best Practices for Improving Controls
- Always call _super() when overriding methods
- Keep logic lightweight
- Avoid DOM-heavy operations
- Test across forms and dialogs
- Scope changes narrowly when possible
These practices ensure stability in production systems.
Common Use Cases
- Input sanitization
- Custom validation
- Enhanced UI interactions
- Auto-formatting values
- Conditional field behavior
Standard control improvement is widely used in ERPNext UI customization.
Troubleshooting Common Issues
Control not updating?
- Clear browser cache
- Restart bench
- Verify JS inclusion
Unexpected UI issues?
- Check method overrides
- Avoid replacing full classes
Conflicts with other apps?
- Namespace your logic carefully
Industry Relevance
Control customization is common in:
- CRM interfaces
- Sales and purchase forms
- Manufacturing dashboards
- Custom ERP workflows
It enables tailored user experiences without core changes.
Target Audience
- Frappe Developers
- ERPNext Consultants
- Frontend Engineers
- Custom App Developers
Technical Prerequisites
- Frappe Framework v15
- Custom App setup
- JavaScript fundamentals
- Understanding of Frappe Desk
Official References (Verified)
Documentation:
https://docs.frappe.io/framework/user/en/guides/app-development/how-to-improve-a-standard-control
Frappe GitHub (v15):
