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
Some of the best practices are:
Limit Scripts: Overuse can slow down forms.
Backup Scripts: Store copies in a repository for recovery.
Document Changes: Note script purposes for team reference.
Related Articles
Automating Date Fields with Scripts
Overview 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 business ...Advanced Reporting - Custom Reports and Scripts
Overview This article gives you an overview of advanced reporting in iVendNext, highlighting tools like custom templates, SQL queries, and Python scripts for deeper, tailored insights. When to Use Advanced Reporting Use these tools when you need: ✔ ...Working with Child Tables: Enhancing Data Visibility
Overview 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 few ...Working with Query Reports - Fetching Data Directly from the Database
Overview Query Reports in iVendNext let advanced users pull data using SQL for detailed, custom reporting. Unlike the no-code Report Builder, they offer full control over data queries—ideal for complex needs. However, cloud users can't write SQL ...Adding and Customizing Buttons in Forms
Overview Buttons in iVendNext forms provide quick access to actions like submissions, approvals, or navigation. With Client Scripts, users can customize these buttons—adding new ones, renaming existing options, or hiding irrelevant actions—to better ...