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 align with business workflows.

Key Scenarios:

• Add a custom button to trigger external APIs or internal functions.

• Rename default buttons (e.g., "Create Invoice" → "Generate Bill").

• Hide buttons for specific user roles (e.g., disable "Submit" for interns).

Step-by-Step Customization

1. Adding a Custom Button

Use frm.add_custom_button() to insert a new button. Example:

ivendnext.ui.form.on("Event", "refresh", function(frm) {

    frm.add_custom_button(__("Send Reminder"), function() {

        // Trigger action when clicked

        ivendnext.call({

            method: "event_management.api.send_reminder",

            args: { event_id: frm.doc.name },

            callback: function(response) {

                ivendnext.msgprint("Reminder sent!");

            }

        });

    });

});

Parameters:

• Label: Button text (e.g., "Send Reminder").

• Function: Action to execute on click.

• Group: Place the button under an existing group (e.g., "Create").

2. Renaming Existing Buttons

Modify default button labels by removing and recreating them. Example for a Sales Order:

ivendnext.ui.form.on("Sales Order", {

    onload_post_render: function(frm) {

        // Remove default button

        frm.page.remove_inner_button("Delivery", "Create");

        // Add renamed button

        frm.page.add_inner_button("Schedule Delivery", () => {

            frm.script_manager.make_delivery_note();

        }, "Create");

    }

});

Note: Use remove_inner_button() before adding a renamed version to avoid duplicates.

3. Hiding Unnecessary Buttons

Improve clarity by hiding buttons irrelevant to certain workflows. Example:

ivendnext.ui.form.on("Purchase Order", {

    refresh: function(frm) {

        // Hide buttons under "Status" and "Create"

        setTimeout(() => {

            frm.remove_custom_button("Close", "Status");

            frm.remove_custom_button("Material Request", "Create");

        }, 100);

    }

});

Why setTimeout? Ensures buttons are loaded before removal.

Advanced Customizations

1. Conditional Button Visibility

Show/hide buttons based on document state. Example: Display "Approve" only for "Draft" status:

ivendnext.ui.form.on("Expense Claim", {

    refresh: function(frm) {

        if (frm.doc.status === "Draft") {

            frm.add_custom_button(__("Approve"), () => {

                frm.set_value("status", "Approved");

                frm.save();

            });

        }

    }

});

2. Button Styling

Use CSS classes to highlight critical actions:

frm.add_custom_button(__("Emergency Cancel"), () => {

    // Action here

}, null, "btn-danger"); // Applies red color

Supported Classes: btn-primary, btn-success, btn-warning.

Troubleshooting

• Buttons Not Appearing? Clear cache (Tools > Clear Cache) and reload.

• Script Errors? Check the browser console (F12) for debugging.

• Duplicate Buttons? Ensure old buttons are removed before adding new ones.

Best Practices

1. Document Changes: Maintain a log of button customizations for audits.

2. Test Thoroughly: Verify scripts in a sandbox before production.

3. Limit Modifications: Over-customization can confuse users.

Conclusion

Customizing buttons in iVendNext forms streamlines workflows and enhances user experience. Start with simple renames or hides, then progress to conditional logic and integrations.