How to Deploy an HTML File into a Suitelet in NetSuite: A Step-by-Step Guide

Published on

Nov 18, 2024

Amandeep

7 mins

NetSuite is a powerful cloud-based ERP system that allows businesses to manage their resources efficiently. One of the key features of NetSuite is its ability to integrate custom functionalities through SuiteScript. Suitelets, a form of server-side script in NetSuite, are one such powerful tool. With Suitelets, you can build custom interfaces and extend the functionality of NetSuite applications. In this blog, we’ll walk through the process of deploying an HTML file into a Suitelet in NetSuite. This guide will cover everything from uploading the HTML file to writing the Suitelet script and making it accessible through a URL.

By the end of this post, you’ll be able to serve custom HTML files via a Suitelet, which can be used for things like custom forms, landing pages, or dashboards.

Step 1: Upload the HTML File to NetSuite File Cabinet

The first step in this process is to upload your HTML file into the NetSuite File Cabinet. The File Cabinet is where NetSuite stores all files, such as scripts, templates, and media files. For this tutorial, we’ll upload our HTML form, which will be served later via the Suitelet.

Steps to Upload the HTML File:

  1. Navigate to File Cabinet: In your NetSuite dashboard, go to Documents > Files > File Cabinet.
  2. Create a Folder (Optional): Although it’s not necessary, you may want to create a new folder to keep your files organized. For instance, you could create a folder named "CustomForms" within the File Cabinet.
  3. Upload HTML File: Click on Add File, browse your local files, and select the HTML file you want to upload. Once the file is uploaded, NetSuite will display it in the folder you’ve chosen.
  4. Copy the Internal ID: After uploading, click on the file name to open its details. Here, you’ll find the Internal ID of the HTML file. Copy this ID, as we will need it in the next steps to reference the file in our Suitelet script.

Step 2: Create the Suitelet Script in SuiteScript 2.0

Now that the HTML file is in the File Cabinet, the next step is to create a Suitelet script that will serve this HTML file to users. We will be using SuiteScript 2.0, which is a modular and more modern scripting framework for NetSuite.

Writing the Suitelet Code

Using your preferred IDE (like Visual Studio Code or Notepad), create a new JavaScript file. For this tutorial, let’s name it HTMLFormLoader.js.
Here’s a basic example of the Suitelet code that will load and serve your HTML file:

/**
 * @NApiVersion 2.x
 * @NScriptType Suitelet
 */
define(['N/file', 'N/https'], function(file, https) {

    function onRequest(context) {
        // Only handle GET requests
        if (context.request.method === 'GET') {
            try {
                // Load the HTML file using its Internal ID
                var htmlFile = file.load({
                    id: 'YOUR_HTML_FILE_ID' // Replace with actual file ID
                });

                // Write the file contents as an HTTP response
                context.response.write({
                    output: htmlFile.getContents(),
                    contentType: https.ContentType.HTML
                });
            } catch (error) {
                // Error handling
                context.response.write({
                    output: "Error loading file: " + error.message,
                    contentType: https.ContentType.TEXT
                });
            }
        }
    }

    return {
        onRequest: onRequest
    };
});

Explanation of the Code:

  • N/file module: This module allows us to interact with files in the NetSuite File Cabinet. We use file.load to load the HTML file by its internal ID.
  • N/https module: This module allows us to send HTTP responses. In this case, we specify that the response will be HTML by setting contentType to https.ContentType.HTML.
  • context.request.method === 'GET': We check if the request method is 'GET' because we are serving the HTML file when the URL is accessed.
  • htmlFile.getContents(): This method retrieves the contents of the HTML file, which we then send as the response.

Be sure to replace 'YOUR_HTML_FILE_ID' with the actual ID you copied earlier from the File Cabinet.

Step 3: Upload the Suitelet Script to the File Cabinet

After creating the Suitelet script, we need to upload it to the File Cabinet, just like we did with the HTML file.

  1. Navigate to File Cabinet: Go back to Documents > Files > File Cabinet.
  2. Upload the JavaScript File: Click Add File and upload the HTMLFormLoader.js script file. You can place it in the same folder as your HTML file or in a separate folder for scripts.
  3. Copy the Internal ID: After uploading the script file, copy its Internal ID. We’ll need this when creating the script record.

Step 4: Create a Suitelet Script Record

Once both your HTML and JavaScript files are uploaded, the next step is to create a Suitelet script record in NetSuite. This record will link your Suitelet script to NetSuite’s scripting environment.

Steps to Create the Script Record:

  1. Navigate to Scripting Menu: In the NetSuite dashboard, go to Customization > Scripting > Scripts > New.
  2. Select Suitelet: Choose Suitelet as the script type.
  3. Upload the Script: In the Script File field, select the HTMLFormLoader.js file you uploaded earlier from the File Cabinet.
  4. Fill in the Details: Give your script a name, such as "HTML Form Loader." You can also provide a version number and description to help identify the script later.
  5. Save the Script: After filling in all the details, click Save. NetSuite will now create a new script record linked to your Suitelet.

Step 5: Deploy the Suitelet Script

Now that the script is created, the final step is to deploy it so users can access it through a URL.

Steps to Deploy the Script:

  1. Create Deployment: Once you’ve saved the script record, NetSuite will prompt you to create a deployment for the Suitelet. Click Create Deployment.
  2. Fill in Deployment Details:some text
    • Title: Give your deployment a title like "HTML Form Deployment."
    • ID: NetSuite will automatically generate a deployment ID, but you can customize this if needed.
    • Status: Set the status to Released to make the Suitelet accessible.
    • Audience: If you want specific users to access this Suitelet, you can configure roles and permissions. Otherwise, leave it as default for testing.
  3. Save and Get the URL: After saving the deployment, NetSuite will generate a URL for your Suitelet. This URL is what users will use to access the HTML form.

Step 6: Test the Suitelet

Now that everything is set up, it's time to test the Suitelet. Open the deployment URL in your browser, and you should see the HTML form displayed. If everything works as expected, you’ve successfully deployed an HTML file into a Suitelet in NetSuite!

Conclusion

Deploying an HTML file into a Suitelet in NetSuite is a powerful way to extend NetSuite's interface and functionality. By following these steps, you can create custom forms, landing pages, or even entire interfaces that interact with your NetSuite environment. From uploading the HTML file to deploying the Suitelet, the process is relatively straightforward once you understand the basic concepts of SuiteScript 2.0.

Feel free to experiment with more complex HTML files or even add JavaScript interactivity within your HTML. Suitelets provide a great platform to customize and enhance NetSuite's capabilities.

Thanks for reading, and happy coding!