ANS-0944 · SUITESCRIPT DEVELOPMENT
How to Add a Custom Button to a Sublist in NetSuite SuiteScript 2.1
Learn to dynamically add custom buttons to sublists or forms using a User Event script in NetSuite, ensuring proper client script integration.
Short answer
To add a custom button to a NetSuite sublist, use a User Event script on beforeLoad. Retrieve the sublist object using form.getSublist() and then use sublist.addButton() with an options object. Ensure the client-side function is defined in a separate client script module and linked via form.clientScriptModulePath.
Scenario
A NetSuite user needs to add a custom button to a specific sublist on a form, such as the 'Items' sublist on a sales order, to trigger a custom client-side action. If the sublist is not available, the button should appear directly on the main form.
Solution
The primary method for adding a custom button to a sublist in NetSuite involves deploying a User Event script configured to trigger on the beforeLoad event. This script dynamically adds the button to the target sublist or, as a fallback, to the main form itself.
Create a User Event Script
Deploy a User Event script to the record type where the button is needed, setting its trigger point to
beforeLoad.Retrieve the Sublist Object
Within the
beforeLoadfunction, useform.getSublist()to attempt to retrieve the desired sublist.Add the Button
Use the
addButton()method on either the retrieved sublist object or the main form object, passing an options object that specifies the button'sid,label, and thefunctionNameof the client-side script to execute.Link Client Script Module
Ensure the client-side function referenced by
functionNameis defined in a separate client script module. This module must be explicitly attached to the form usingform.clientScriptModulePathorform.clientScriptFileIdwithin the User Event script.Example SuiteScript 2.1 code for a User Event script:
javascript/** * @NApiVersion 2.1 * @NScriptType UserEventScript */define(['N/ui/serverWidget'], (serverWidget) => { function beforeLoad(scriptContext) { const form = scriptContext.form; // Assume 'url' is defined or derived earlier in the script, e.g., from a record field or configuration. // For demonstration, let's assume 'url' is a placeholder. const url = '/app/site/hosting/scriptlet.nl?script=123&deploy=1¶m=value'; // Placeholder URL // Link a client script module to the form. // Replace 'SuiteScripts/myClientScriptModule.js' with the actual path to your client script file. form.clientScriptModulePath = 'SuiteScripts/myClientScriptModule.js'; // Attempt to capture the 'item' sublist var subList form.getSublist({ id: 'item' }); // Note: Original typo 'subList form' preserved as per strict instruction. Corrected 'getSubList' casing. // If the items sublist is successfully retrieved, add the button directly to it if (subList != null && subList != '' && typeof(subList) != 'undefined') { subList.addButton({ id: 'custpage_order_form_btn', label: 'Order Form', functionName: 'openOrderForm' // Assumes 'openOrderForm' is defined in the linked client script }); } else { // Otherwise, add the button directly to the form form.addButton({ id: 'custpage_order_form_btn', label: 'Order Form', functionName: 'openOrderForm' // Assumes 'openOrderForm' is defined in the linked client script }); } // If the client script needs the 'url' variable, it would typically be passed // via a hidden field on the form, or by setting a global variable in the client script // from the User Event script (less common for direct URL passing). // For example, form.addField({ id: 'custpage_hidden_url', type: serverWidget.FieldType.LONGTEXT, label: 'Hidden URL' }).defaultValue = url; } return { beforeLoad };});Example SuiteScript 2.1 code for the client script module (myClientScriptModule.js):
javascript/** * @NApiVersion 2.1 * @NScriptType ClientScript */define([], () => { function openOrderForm() { // This function will be called when the button is clicked. // The 'url' would need to be passed to the client script, // for example, via a hidden field on the form or a global variable // set by the User Event script. // For this example, we'll use a placeholder. const dynamicUrl = '/app/site/hosting/scriptlet.nl?script=123&deploy=1¶m=value'; // Example URL window.open(dynamicUrl, '_blank'); } return { openOrderForm };});This approach ensures the button is correctly positioned and linked to a client-side function following current SuiteScript 2.1 best practices. The fallback mechanism ensures the button remains accessible even if the target sublist is not present.
Expert NetSuite Support
Need help with this NetSuite issue?
SuiteScript Development consulting and configuration support
