Adding a custom popup dialog to a NetSuite record form allows you to create interactive UI experiences beyond what the native server widget dialogs provide. With a Client Script, you can fully control the popup’s content, logic, and styling.
This article shows how to use a User Event Script (UE) to add a button, and a Client Script (CS) to display a simple but customizable popup dialog using a <div>. The popup includes a button that updates its own content, demonstrating how you can react to user actions.
Use a custom popup like this when:
- You want to control the popup’s logic and flow in your Client Script.
- You want to update the popup content dynamically based on user actions.
- You want to apply your own styling or UI behavior.
Use the native server widget dialogs for simple alerts, confirmations, or prompts that don’t require custom logic or styling.
/**
* @NApiVersion 2.1
* @NScriptType UserEventScript
*/
define([], () => {
const beforeLoad = (scriptContext) => {
if (scriptContext.type === scriptContext.UserEventType.VIEW) {
scriptContext.form.addButton({
id: 'custpage_show_popup',
label: 'Show Popup',
functionName: 'showCustomPopup'
});
scriptContext.form.clientScriptModulePath = './Simple_CS_Popup.js';
}
}
return { beforeLoad };
});
/**
* @NApiVersion 2.1
* @NScriptType ClientScript
*/
define([], function() {
function showCustomPopup() {
// Only inject once
if (!document.getElementById('custom-popup-overlay')) {
// Overlay
const overlay = document.createElement('div');
overlay.id = 'custom-popup-overlay';
overlay.style.position = 'fixed';
overlay.style.top = 0;
overlay.style.left = 0;
overlay.style.width = '100vw';
overlay.style.height = '100vh';
overlay.style.background = 'rgba(0,0,0,0.3)';
overlay.style.zIndex = 9998;
overlay.onclick = closePopup;
// Popup
const popup = document.createElement('div');
popup.id = 'custom-popup';
popup.style.position = 'fixed';
popup.style.top = '50%';
popup.style.left = '50%';
popup.style.transform = 'translate(-50%, -50%)';
popup.style.background = '#fff';
popup.style.padding = '24px';
popup.style.borderRadius = '8px';
popup.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)';
popup.style.zIndex = 9999;
popup.onclick = function(e) { e.stopPropagation(); };
// Content
popup.innerHTML = `
<div id="popup-message">Hello from your custom popup!</div>
<button id="popup-update-btn">Update Message</button>
<button id="popup-close-btn">Close</button>
`;
document.body.appendChild(overlay);
document.body.appendChild(popup);
// Button logic
document.getElementById('popup-update-btn').onclick = function() {
document.getElementById('popup-message').innerText = 'The message has been updated!';
};
document.getElementById('popup-close-btn').onclick = closePopup;
}
// Show popup
document.getElementById('custom-popup-overlay').style.display = 'block';
document.getElementById('custom-popup').style.display = 'block';
}
function closePopup() {
document.getElementById('custom-popup-overlay').style.display = 'none';
document.getElementById('custom-popup').style.display = 'none';
}
return { showCustomPopup };
});
With a custom popup in a <div>, you can:
- Dynamically update content (as shown with the “Update Message” button).
- Add any HTML, form fields, or interactive elements you need.
- Style the popup however you like with CSS.
- Control the popup’s behavior and flow entirely in your Client Script.
- Allow the user to input some values for you to update the record by suitescript.
This is much more flexible than the built-in NetSuite dialogs, which are limited to simple alerts and confirmations.
This pattern is ideal when you need a more interactive, dynamic, or styled popup experience in your NetSuite customizations.
About Us
Concentrus is a leading provider of innovative cloud-based enterprise resource planning (ERP) solutions, including NetSuite. Our team of NetSuite experts offers a range of services, including NetSuite price analysis, NetSuite training, and NetSuite integration services.
Our goal is to help businesses of all sizes maximize their investment in NetSuite by providing expert NetSuite cost optimization and implementation strategies. With years of experience as a NetSuite partner, our NetSuite administrators and NetSuite consultants are well equipped to help businesses of all sizes with their NetSuite consulting needs.
Whether you're looking for a NetSuite consultant to help with your NetSuite implementation or you need ongoing NetSuite support, Concentrus is here to help.
Read About Our Implementation Methodology
Want more NetSuite Tips and Tricks? Check out our Short & 'Suite videos