🧩 Adding Custom Buttons and Form Actions in NetSuite

Introduction

NetSuite allows developers to enhance record forms with custom buttons that perform specific actions — like opening Suitelets, triggering approvals, or calling REST APIs.

Adding custom buttons and form actions improves user experience by reducing clicks and automating routine tasks directly from the record interface.

You can add buttons using SuiteScript 2.x User Event Scripts or through form customization.

💡 Why Use Custom Buttons?

⚙️ Methods for Adding Buttons

1. User Event Script (beforeLoad):
   Add buttons dynamically when a record loads.
2. Form Customization (via UI):
   Add static buttons manually under Customization → Forms.
3. Workflow Action:
   Add workflow-driven buttons for approvals or record changes.

🧱 Step-by-Step: Adding a Button via User Event Script

Step 1: Create a New Script File

Go to:
Customization → Scripting → Scripts → New → User Event Script

Step 2: Paste the SuiteScript 2.1 Example

/**
 * @NApiVersion 2.1
 * @NScriptType UserEventScript
 */
define(['N/ui/serverWidget', 'N/url', 'N/record'], (ui, url, record) => {

    const beforeLoad = (context) => {
        if (context.type === context.UserEventType.VIEW) {
            const form = context.form;
            const rec = context.newRecord;

            // Add a custom button
            form.addButton({
                id: 'custpage_generate_pdf',
                label: 'Generate Custom PDF',
                functionName: 'openCustomSuitelet'
            });

            // Add client script to handle button click
            form.clientScriptModulePath = './CS_GeneratePDF.js';
        }
    };

    return { beforeLoad };
});

Step 3: Create the Client Script (CS_GeneratePDF.js)

/**
 * @NApiVersion 2.1
 * @NScriptType ClientScript
 */
define(['N/url', 'N/currentRecord'], (url, currentRecord) => {

    const openCustomSuitelet = () => {
        const rec = currentRecord.get();
        const recordId = rec.id;

        const suiteletUrl = url.resolveScript({
            scriptId: 'customscript_suitelet_generate_pdf',
            deploymentId: 'customdeploy_suitelet_generate_pdf',
            params: { id: recordId }
        });

        window.open(suiteletUrl, '_blank');
    };

    return { openCustomSuitelet };
});

✅ Result:
A “Generate Custom PDF” button appears on the record form (e.g., Sales Order). Clicking it opens a Suitelet that dynamically renders a PDF for that record.

🧰 Example: Trigger RESTlet from Button

You can also trigger a RESTlet call directly from the client script:

fetch('/app/site/hosting/restlet.nl?script=1234&deploy=1&id=' + recordId, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ recordId })
}).then(res => res.json())
  .then(result => alert('Result: ' + result.status));

This is useful for sending data to third-party systems like Boomi, Celigo, or Salesforce.

🧠 Example Use Cases

🧩 Adding Buttons with Dynamic Conditions

You can control button visibility using conditions in the beforeLoad function:

if (rec.getValue('status') === 'Pending Approval') {
    form.addButton({
        id: 'custpage_approve_now',
        label: 'Approve Now',
        functionName: 'triggerApproval'
    });
}

This ensures the button only appears when specific criteria are met (e.g., pending transactions).

⚡ Adding Form Actions (Custom Menu Items)

You can add new form-level menu actions instead of buttons:

form.addPageInitMessage({
    type: ui.Message.Type.CONFIRMATION,
    title: 'Success',
    message: 'Button actions have been initialized!'
});

form.addSubmitButton({ label: 'Submit & Notify' });
form.addResetButton({ label: 'Clear Form' });
form.addButton({ id: 'custpage_export', label: 'Export to CSV', functionName: 'exportCSV' });

These options can enhance usability without cluttering the header bar.

📈 UI Example: Combine Buttons + Suitelet Form

For a professional layout:

1. Use User Event to add button.
2. Trigger Suitelet to show interactive form.
3. Pass the record ID as a parameter.
4. Handle processing logic (PDF, Email, or Integration).

🧮 Example Workflow

Business Case: Add a button on Invoice form → “Send to Accounting Portal.”

• User clicks button.
• Client Script calls RESTlet → sends data to external API.
• RESTlet logs transaction & updates “Sent to Portal” field.
• Record reloads to show confirmation.

⚙️ Debugging & Maintenance

🧩 Best Practices

• Always add buttons only on VIEW mode, not edit/create.
• Use short, descriptive button labels.
• Combine buttons into dropdown menus if too many actions.
• Avoid long-running logic — redirect to Suitelet or Map/Reduce script.
• Track usage by adding logs (e.g., record who clicked).

📚 Related Tutorials

• 👉 Custom Portlets in NetSuite
• 👉 SuiteAnalytics Workbook for Dashboards
• 👉 Custom Email Templates in NetSuite

❓ FAQ

Q1. Can I add multiple custom buttons on one form?
Yes, you can add as many as you like — just assign unique id values.

Q2. Can I style buttons differently?
No native CSS support — but you can use icons or labels for differentiation.

Q3. Can buttons call external APIs?
Yes — through RESTlets or via fetch() in the client script.

Q4. Can non-admin users see custom buttons?
Yes, if their role has access to the script deployment.

🧭 Summary

Custom buttons and form actions empower users to execute automation directly from records — without navigating through menus.
From generating PDFs to triggering integrations, these buttons bridge the gap between workflows and user interaction, making NetSuite faster, smarter, and more intuitive.