Function Description: showCustomModal
The showCustomModal function is dynamically added to the HTML during page rendering. It is designed to display custom alert messages such as warnings or errors without redirecting the user. The function is included in the HTML output, making it callable anytime within the page.
Function Purpose
This function creates a pop-up modal that appears over the page to inform users about important messages. It is primarily used for alerts, notifications, or warnings, ensuring a smooth and interactive user experience.
Parameters
Parameter : title
Type : String
Description:The heading of the modal (e.g., “Warning”, “Error”, “Success”)
Parameter :message
Type: String
Description: The message inside the modal describing the alert
Key Features
✅ Ensures only one modal is displayed at a time by removing any previous instance.
✅ The modal covers the entire screen (position: fixed) for better visibility.
✅ A semi-transparent background overlay focuses attention on the message.
✅ The modal centers itself on the page dynamically.
✅ Clicking “Okay” removes the modal, allowing users to close it manually.
✅ Auto-closes after 5 seconds to prevent manual interaction if unnecessary.
✅ No page redirection, ensuring a seamless user experience.
How It Works
- If a modal already exists, it is removed to prevent duplicates.
- A new modal container is created with a background overlay.
- The modal displays the title and message provided as parameters.
- The user can click “Okay” to close the modal manually.
- The modal automatically closes after 5 seconds if no action is taken.
/**
* @NApiVersion 2.1
* @NScriptType Suitelet
*
* ********************************************************************************************************************************
*
* ${CRYS-191} : ${Suitelet Page to display the item Price Details}
* ********************************************************************************************************************************
*
* Author : Jobin and Jismi
*
* Date Created : 14-February-2025
*
* Description : Suitelet Page to display the item price details
*
* REVISION HISTORY :
*
* @version 1.0 14-February-2025 : Created the initial build by JJ0325
*
* ********************************************************************************************************************************
*/
define(['N/ui/serverWidget', 'N/search', 'N/url', 'N/redirect', 'N/file'],
(serverWidget, search, url, redirect, file) => {
/**
* Defines the Suitelet script trigger point.
* @param {Object} scriptContext
* @param {ServerRequest} scriptContext.request - Incoming request
* @param {ServerResponse} scriptContext.response - Suitelet response
* @since 2015.2
*/
const onRequest = (scriptContext) => {
try {
let params = scriptContext.request.parameters;
let request = scriptContext.request;
if (request.method == 'GET') {
let form = serverWidget.createForm({
title: 'Item Price Check',
hideNavBar: false
});
let htmlContent = `
<html>
<body>
<script>
function showCustomModal(title, message) {
// Remove existing modal if any
let existingModal = document.getElementById('customModal');
if (existingModal) existingModal.remove();
// Create the modal container
let modalContainer = document.createElement('div');
modalContainer.id = 'customModal';
modalContainer.style = `
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
`;
// Create the modal content
modalContainer.innerHTML = `
<div style="
background-color: white;
padding: 20px;
border-radius: 10px;
width: 300px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
">
<h3 style="margin-top: 0;">${title}</h3>
<p>${message}</p>
<button id="closeModalBtn" style="
padding: 10px 20px;
margin-top: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
">Okay</button>
</div>
`;
// Append modal to the body
document.body.appendChild(modalContainer);
// Close the modal on button click
document.getElementById('closeModalBtn').addEventListener('click', function () {
modalContainer.remove();
});
// Auto-close modal after 5 seconds
setTimeout(function () {
modalContainer.remove();
}, 5000);
}
</script>
</body>
</html>
`;
if(need to show Alert){ //enter valid conditions and showCustomModal parameters
htmlContent += `
<script>
showCustomModal("Warning", "⚠️ Please scan Valid Item.");
</script>`
}
scriptContext.response.write(htmlContent);
}
}
catch(error){
log.error('error @ onRequest',error);
}
}
return {
onRequest: onRequest
};
});