How to Embed and Display Custom HTML Content in NetSuite Suitelets?

To display custom HTML content within a NetSuite Suitelet, follow these steps:

It is recommended to investigate the security and performance implications of any custom HTML solution.

When using external libraries (e.g., jQuery, Mustache.js), ensure compliance with legal and licensing requirements.

Any JavaScript on the HTML page should be called using the jQuery ready function or equivalent DOMContentLoaded event listener to ensure the page is fully loaded.

1. Upload the .html file to the NetSuite File Cabinet.

2. In your Suitelet, load the .html file and write its content to the page.

javascript
/**
 * @NApiVersion 2.x
 * @NScriptType Suitelet
 */
define(['N/file'], function(file) {
    function onRequest(context) {
        if (context.request.method === 'GET') {
            var fileID = 'YOUR_FILE_ID'; // Replace with the actual file ID from the File Cabinet
            var fileObj = file.load({id: fileID});
            var html = fileObj.getContents();
            context.response.write(html);
        }
    }
    return {
        onRequest: onRequest
    };
});

To display HTML with the NetSuite standard header:

To include the standard NetSuite header with your custom HTML, wrap the HTML content within a NetSuite form.

javascript
/**
 * @NApiVersion 2.x
 * @NScriptType Suitelet
 */
define(['N/file', 'N/ui/serverWidget'], function(file, serverWidget) {
    function onRequest(context) {
        if (context.request.method === 'GET') {
            var fileID = 'YOUR_FILE_ID'; // Replace with the actual file ID from the File Cabinet
            var fileObj = file.load({id: fileID});
            var html = fileObj.getContents();

            var form = serverWidget.createForm({title: ''}); // An empty title can be used if no form title is desired
            var htmlHeader = form.addField({
                id: 'custpage_header',
                type: serverWidget.FieldType.INLINEHTML,
                label: 'HTML Content' // A label is required for addField in SuiteScript 2.x
            });
            htmlHeader.defaultValue = html;
            context.response.writePage(form);
        }
    }
    return {
        onRequest: onRequest
    };
});

To pass parameters to the HTML file:

To dynamically pass values from your Suitelet to the embedded HTML, define placeholders in your HTML file and replace them in your Suitelet script.

HTML example:

html
var taskList = ${taskList};

Suitelet code to replace placeholders:

javascript
html = html.replace("${taskList}", JSON.stringify(projectTaskNameMap));

Ensure careful handling of string versus non-string values to prevent issues.

To pass your own HTML form to POST:

If a custom HTML form is preferred over the NetSuite submit button, define the form within your HTML with the correct enctype and action attributes. The action attribute should point to your Suitelet's external URL.

html
<form id="timeEntryHiddenForm" enctype="UTF-8" name="timeEntryHiddenForm" action="https://system.na1.netsuite.com/app/site/hosting/scriptlet.nl?script4&deploy2" method="post">