Adding a Custom HTML Button Near a Body Field in NetSuite Using UserEvent Script

This article will guide you through the process of adding a custom HTML button near a body field in NetSuite using a UserEvent script. This technique is useful for adding custom functionality to NetSuite forms without modifying the core UI.

Understanding the Use Case

In NetSuite development, you may often need to add custom buttons to perform specific actions related to a record. While NetSuite provides standard buttons for common operations, sometimes you need to implement custom business logic that requires a dedicated interface element.

Implementation Steps

1. Create the UserEvent Script

First, create a UserEvent script that will add the custom button to your form. Here’s the complete code:

/**
 * @NApiVersion 2.1
 * @NScriptType UserEventScript
 */
define(['N/ui/serverWidget'], function(serverWidget) {

    function beforeLoad(context) {
        if (context.type !== context.UserEventType.VIEW) {
            return;
        }

        var form = context.form;
        var record = context.record;

        // Get the body field (adjust the field ID as needed)
        var bodyField = form.getField({
            id: 'custbody_your_body_field_id' // Replace with your actual body field ID
        });
        
        if (bodyField) {
            // Create a custom HTML field for the button
            var buttonField = form.addField({
                id: 'custpage_custom_button',
                type: serverWidget.FieldType.INLINEHTML,
                label: ' '
            });
            
            // HTML content for the button with styling
            var buttonHtml = `
<div style="margin: 10px 0; padding: 5px;">
    <button type="button" 
            id="customActionButton" 
            style="background-color: #4CAF50; 
                   color: white; 
                   padding: 8px 16px; 
                   border: none; 
                   border-radius: 4px; 
                   cursor: pointer;
                   font-size: 14px;"
            onclick="handleCustomButtonClick()">
        Custom Action
    </button>
    <span id="statusMessage" style="margin-left: 10px; color: green;"></span>
</div>
<script type="text/javascript">
    function handleCustomButtonClick() {
        var button = document.getElementById('customActionButton');
        var status = document.getElementById('statusMessage');
        button.disabled = true;
        button.style.backgroundColor = '#cccccc';
        status.innerHTML = 'Processing...';
        
        // Call Suitelet or RESTlet to perform the action
        window.location.href = '/app/site/hosting/scriptlet.nl?script=123&deploy=1&id=' + nlapiGetRecordId();
        
        // Alternative: Use AJAX call for async operation
        /*
        require(['N/https'], function(https) {
            // This would need to be in client script for proper AJAX handling
        });
        */
    }
</script>
            `;
            
            buttonField.defaultValue = buttonHtml;
            
            // Position the button field near the body field
            // You may need to adjust the placement based on your form layout
            form.insertField({
                field: buttonField,
                nextfield: bodyField.id
            });
        }
    }

    return {
        beforeLoad: beforeLoad
    };
});

2. Key Components Explained

• Field Identification: The script first retrieves the body field using its ID. Make sure to replace custbody_your_body_field_id with your actual field ID.
• Inline HTML Field: We create an INLINEHTML type field which allows us to inject custom HTML content into the form.
• Button Design: The button is styled with CSS properties for a professional appearance that matches NetSuite’s UI.
• JavaScript Functionality: The handleCustomButtonClick() function provides visual feedback when the button is clicked and redirects to a Suitelet.
• Positioning: The  insertField method places the button near the body field for logical grouping.

3. Connecting to a Suitelet

The button redirects to a Suitelet when clicked. You’ll need to:

1. Replace the script ID (123) with your actual Suitelet script ID
2. Implement the business logic in your Suitelet to handle the custom action

4. Alternative Approach: Asynchronous Operation

For a smoother user experience, consider using an AJAX call instead of a redirect:

// Alternative implementation using AJAX
require(['N/https'], function(https) {
    // Make an asynchronous call to a Suitelet
    https.get({
        url: '/app/site/hosting/scriptlet.nl?script=123&deploy=1&id=' + nlapiGetRecordId(),
        onSuccess: function() {
            // Handle success
            status.innerHTML = 'Action completed successfully!';
        },
        onFailure: function() {
            // Handle failure
            button.disabled = false;
            button.style.backgroundColor = '#4CAF50';
            status.innerHTML = 'Error occurred. Please try again.';
            status.style.color = 'red';
        }
    });
});

Note: You can use N/currentRecord module in the script to fetch dynamic field values and pass it to the suitelet.

Best Practices

1. Script Deployment: Deploy your UserEvent script to the appropriate record type and set the appropriate contexts.
2. Security: Implement proper permission validation in your Suitelet to prevent unauthorized access.
3. Error Handling: Add comprehensive error handling in both the client-side and server-side components.
4. User Feedback: Provide clear feedback to users about the action’s progress and outcome.
5. Testing: Thoroughly test the functionality in a sandbox environment before deploying to production.

Conclusion

Adding custom buttons to NetSuite forms using UserEvent scripts provides a powerful way to extend standard functionality. By following this approach, you can create intuitive interfaces for users to perform custom actions directly from record pages.

Remember to customize the button styling, positioning, and functionality to match your specific business requirements and maintain consistency with your NetSuite implementation.