Working with Client Scripts for Enhanced UI
Overview
Client Scripts in iVendNext allow users to customize and extend the functionality of forms dynamically. These JavaScript-based snippets enable real-time modifications—such as hiding buttons, validating fields, or triggering actions—without altering core system files.
Key Use Cases:
Rename or hide form buttons (e.g., "Create" submenu options).
Validate data before submission (e.g., enforce mandatory fields).
Automate UI updates based on user input.
Accessing Client Scripts
Navigate to: Home > Customization > Custom Script.
Click New to create a script.
Select the DocType (e.g., "Sales Order") to target.
Step-by-Step Implementation
1. Basic Script Structure
Client scripts use the ivendnext.ui.form.on method to bind actions to form events. Example:
ivendnext.ui.form.on('Sales Order', {
refresh: function(frm) {
// Actions to execute when the form loads
console.log("Form refreshed!");
}
});
Key Events:
refresh: Triggers when the form loads or reloads.
onload_post_render: Runs after the form renders completely.
validate: Validates data before submission.
2. Common Customizations
Example 1: Hiding Buttons
To hide the "Update Items" and "Close" buttons in a Sales Order:
ivendnext.ui.form.on('Sales Order', {
refresh: function(frm) {
setTimeout(() => {
frm.remove_custom_button('Update Items');
frm.remove_custom_button('Close', 'Status');
}, 10);
}
});
Note: Use setTimeout to ensure the buttons are loaded before removal.Example 2: Renaming "Create" Submenu Buttons
Replace default options like "Delivery" with custom labels:
ivendnext.ui.form.on('Sales Order', {
onload_post_render: function(frm) {
const buttons = ['Delivery', 'Invoice', 'Work Order'];
buttons.forEach(button => {
frm.page.remove_inner_button(button, 'Create');
});
frm.page.add_inner_button('Generate Invoice', () => {
// Add custom function here
}, 'Create');
}
});
3. Field-Level Validations
Prevent submission if a field is empty:
ivendnext.ui.form.on('Quotation', {
validate: function(frm) {
if (!frm.doc.customer) {
ivendnext.msgprint("Customer field is mandatory!");
frappe.validated = false;
}
}
});
Debugging Tips
Clear Cache: After saving scripts, go to Tools > Clear Cache and refresh.
Browser Console: Use console.log() to debug scripts (press F12 to open DevTools).
Test Incrementally: Add small script portions and verify changes.
Best Practices
Limit Scripts: Overuse can slow down forms.
Backup Scripts: Store copies in a repository for recovery.
Document Changes: Note script purposes for team reference.
Conclusion
Client Scripts unlock powerful UI customizations in iVendNext, from button tweaks to dynamic validations. Start with small changes and gradually explore advanced workflows.
Related Articles
Automating Date Fields with Scripts
Introduction Manually calculating and entering dates in iVendNext documents is error-prone and time-consuming. With custom scripts, you can automate date fields to: ✔ Auto-set deadlines (e.g., Production Due = Delivery Date - 2 days). ✔ Enforce ...Advanced Reporting - Custom Reports and Scripts
Introduction While iVendNext provides pre-built operational reports, businesses often need tailored analytics to address unique challenges. This guide explores advanced reporting tools—including custom Report Builder templates, SQL Query Reports, and ...Working with Child Tables: Enhancing Data Visibility
Introduction Child tables are a powerful feature in iVendNext that allow you to manage multi-row data within a single document—such as line items in a Sales Order or tasks in a Project. However, default settings often limit visibility, showing only a ...Working with Query Reports - Fetching Data Directly from the Database
Introduction Query Reports in iVendNext allow advanced users to extract data directly from the database using SQL (Structured Query Language). Unlike Report Builder, which offers a no-code interface, Query Reports provide granular control over data ...Displaying Full Addresses in Custom Fields
Introduction In iVendNext, addresses are often stored as linked records (e.g., Customer Address), but transactional documents (e.g., Sales Invoices) may only display a truncated reference. This guide explains how to fetch and display complete ...