Client Side Scripting
Frappe Client-Side Scripting Documentation
Overview
Client-side scripting in the Frappe framework allows you to enhance the interactivity and functionality of forms in your application. You can use JavaScript to manipulate form data, validate inputs, and respond to user actions.
Methods
1. Form Events
Form events are triggered during different stages of a form's lifecycle.
frappe.ui.form.on
Used to define event handlers for a specific DocType.
frappe.ui.form.on('ToDo', {
refresh: function(frm) {
// Code to execute when the form is refreshed
console.log('Form Refreshed');
},
validate: function(frm) {
// Code to execute before the form is saved
if (!frm.doc.description) {
frappe.msgprint(__('Description is required'));
frappe.validated = false;
}
},
after_save: function(frm) {
// Code to execute after the form is saved
frappe.msgprint(__('Record Saved'));
}
});
### 2. Field Events
Field events are triggered when specific fields are interacted with.
#### `frm.add_fetch`
Automatically fetch values from another linked document.
frappe.ui.form.on('Sales Invoice', {
customer: function(frm) {
frm.add\_fetch('customer', 'customer\_name', 'customer\_name');
}
});
### `frm.set_query`
Set custom filters for link fields.
frappe.ui.form.on('Sales Order', {
supplier: function(frm) {
frm.set\_query('item\_code', 'items', function() {
return {
filters: {
'is\_sales\_item': 1
}
};
});
}
});
### `frm.set_value`
Programmatically set the value of a field.
frappe.ui.form.on('Invoice', {
validate: function(frm) {
frm.set\_value('total', frm.doc.quantity * frm.doc.rate);
}
});
### `frm.get_value`
Retrieve the value of a field.
frappe.ui.form.on('Purchase Order', {
refresh: function(frm) {
var supplier_name = frm.get\_value('supplier\_name');
console.log('Supplier Name:', supplier_name);
}
});
### 3. Custom Scripting
Define custom scripts to enhance form behavior.
### `frappe.call`
Call server-side methods from the client-side.
frappe.ui.form.on('Task', {
refresh: function(frm) {
frappe.call({
method: 'my\_app.api.get\_task\_details',
args: {
task_id: frm.doc.name
},
callback: function(r) {
if (r.message) {
frm.set\_value('details', r.message.details);
}
}
});
}
});
### `frappe.msgprint`
Display a message to the user.
frappe.ui.form.on('Project', { aftersave: function(frm) { frappe.msgprint(_('Project has been saved successfully.')); } });
### `frappe.show_alert`
Show a quick alert message.
frappe.ui.form.on('Employee', { after_save: function(frm) { frappe.show_alert({ message: __('Employee record saved.'), indicator: 'green' }); } });
### 4. Utility Functions
Utility functions to enhance form interactions.
### `frappe.utils.now_datetime`
Get the current date and time.
frappe.ui.form.on('Event', {
refresh: function(frm) {
var current_datetime = frappe.utils.now\_datetime();
console.log('Current Date and Time:', current_datetime);
}
});
### `frappe.datetime.get_day_diff`
Calculate the difference between two dates.
frappe.ui.form.on('Leave Application', {
from_date: function(frm) {
if (frm.doc.from_date && frm.doc.to_date) {
var days = frappe.datetime.get_day_diff(frm.doc.to_date, frm.doc.from_date);
frm.set_value('total_days', days);
}
},
to_date: function(frm) {
if (frm.doc.from_date && frm.doc.to_date) {
var days = frappe.datetime.get_day_diff(frm.doc.to_date, frm.doc.from_date);
frm.set_value('total_days', days);
} } }); ```
Conclusion
Client-side scripting in Frappe is a powerful way to enhance the functionality and user experience of your applications. By leveraging the various events and methods available, you can create dynamic and responsive forms tailored to your business needs.