In NetSuite Suitelets, ensuring a smooth user experience often requires handling multiple interactions and data updates between different pages, especially when dealing with dynamic content. One common challenge is passing data from a secondary page to the main Suitelet page, without triggering unwanted page reloads or data loss. This situation can arise when a user submits information on a secondary page (like a popup window) and expects that data to be reflected on the main page, all while maintaining a seamless user experience.
The Challenge: Preventing Data Loss and Page Reload
In many Suitelet workflows, it’s essential to capture data on a secondary page, such as a popup or form, and pass that data back to the main page. However, if the page reloads when new data is submitted, this can cause any unsaved or dynamically entered data to be lost. A typical example might involve users entering details on a secondary page, and when these details are passed back to the main page, the page reloads, wiping out previous data entries.
The goal is to ensure that the main page is updated with the new data, but without a reload that could erase previously entered information. In such cases, keeping the page dynamic and not triggering a refresh can improve usability and streamline the workflow.
The Solution: Passing Data Dynamically Between Pages
To solve this, we can use a simple yet effective method of passing data from the secondary page (like a popup) back to the main page, and updating the content without triggering a page reload. This method involves using JavaScript’s window.opener functionality, which allows a page to access and interact with the window that opened it. Here’s how we can implement this solution:
1. Updating the Main Page Without Reloading
On the main page, we can define a function that will dynamically update the content (like adding new rows to a table) when data is received from the secondary page. This function ensures that the data is added to the main page’s content without the need for a reload, thus preventing any data loss.
function addItemToTable(item, qty, rate) {
let table = document.getElementById("itemTable");
let row = table.insertRow(-1);
row.innerHTML = `
<td>${item}</td>
<td>${qty}</td>
<td>${rate}</td>
`;
}
This function adds a new row to a table in the main Suitelet page whenever new data is passed from the secondary page.
2. Passing Data from the Secondary Page to the Main Page
On the secondary page (the popup), we need to send the data back to the main page. This is where window.opener comes into play. By calling a function defined on the main page, we can pass the necessary data (such as item details) and ensure it is added to the main page’s table dynamically.
window.opener.addItemToTable(item, qty, rate);
This simple call to the addItemToTable function on the main page sends the data back to the parent window, where it is processed and displayed in the relevant section (like an item table) without triggering a page reload.
3. Handling Data on the Main Page
In some cases, you may need to perform additional data processing on the main page before updating the content. For example, you might need to fetch additional details based on the item ID received. Here’s an example of how you can fetch and process data dynamically from the main page without refreshing it:
window.updateTable = function (itemId) {
console.log('Received item:', itemId);
fetch(window.location.href, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ itemId: itemId })
})
.then(response => response.json())
.then(data => {
if (data.success) {
addItemRow(data.item);
} else {
alert("Error fetching item details.");
}
})
.catch(error => console.error("Error in updateTable:", error));
};
This function sends the item data to the main page and processes it without reloading the page, ensuring the data is fetched and displayed dynamically.