Custom NetSuite subtab UI that loads only when subtab is selected

We had a custom suitelet UI that was displayed inside a custom NetSuite subtab within an inline HTML field. This suitelet UI was used to show data from custom records related to the parent record. This was achieved using an ‘iFrame’ element with a ‘src’ value set as suitelet deployment link with parameter values sourced from the record.

'<iframe src="/app/site/hosting/scriptlet.nl?script=200&deploy=1&folder=file-upload&file=dropbox-index.html&transactionUUID='||{custbody_uuid}||'&recordIdValue='||{id}||'" title="Iframe Azure uploader" height="768" width="100%"></iframe>

Recently, we found that the parent record page is experiencing significantly longer load times when there is a large number of custom records related to the parent record. When there is a large amount of data to be displayed, suitelet takes a lot of time to render whole data resulting in longer loading times for the whole page.

The client requested to look for options to fix the issue. We used the following method to trigger the suitelet only when the subtab is clicked to reduce the initial loading time of the page:

1. Identify the HTML element ID of the subtab. You can do this using the ‘Inspect’ option in every web browser. In my scenario, the custom subtab element ‘id’ was ‘custom229lnk’
2. Add a <script> element inside inline HTML elements and define a JavaScript ‘MutationObserver’ object to watch for the selection of the subtab.
3. Update the ‘src’ value with the suitelet link only when ‘MutationObserver’ catches the selection of the subtab. Initially, ‘src’ can be set as empty.

e.g:

'<iframe id="dropboxIframe" title="Iframe Azure uploader" height="768" width="100%" src=""></iframe>
 
<script>
if (nlapiGetFieldValue("custbody_uuid") == ""){
    document.write("Save Transaction before uploading files")
} else {
var recId = nlapiGetRecordId("");
var uuidValue = nlapiLookupField("transaction", recId, "custbody_uuid");
console.log("Current record ID:", recId, " UUID value:", uuidValue);
var dropboxIframeLoaded = false; // Assuming subtab is not selected initially
var dropboxTab = document.getElementById("custom229lnk");
var dropboxTabObserver = new MutationObserver((value) => {
    console.log("Style changed - Dropbox tab active", value);
    if (!dropboxIframeLoaded){
        console.log("Load Dropbox IFrame");
        document.getElementById("dropboxIframe").src = `/app/site/hosting/scriptlet.nl?script=200&deploy=1&folder=file-upload&file=dropbox-index.html&transactionUUID=${uuidValue}&recordIdValue=${recId}`;
    }
});
dropboxTabObserver.observe(dropboxTab, { attributes: true, attributeFilter: ["class"] });
}
</script>'

I had to also provide some values from the record. So used suitescript 1.0 functions which are accessible inside the script tag.