Build a Suitelet with the ‘ui/serverWidget’ Module Part 1

NetSuite for Developers

Introduction to Suitelets

Suitelets are, in simple terms, a kind of page in NetSuite we can use any way we want. We can use SuiteScript modules to imitate the NetSuite user interface, or we can even use custom HTML to display our own unique information and UI. Needless to say, Suitelets are an extremely powerful (and sometimes a bit confusing) SuiteScripting tool. In this tutorial series, I will try to take you from an absolute Suitelet beginner to a Suitelet guru as we explore the intricacies of the ‘ui/serverWidget’ module.

Read more about Suitelets on our previous post here.

Benefits of the ‘ui/serverWidget’ Module

The ‘ui/serverWidget’ module enables us to imitate almost everything you see in NetSuite. This module allows us to add buttons, fields, tabs, lists, checkboxes, and more. Here’s an example Suitelet page I created using the ‘ui/serverWidget’ module:

Creating a Basic Page

There is an important coding principle (the “Hello World” principle) that says we should start with the most simple working version of whatever we are trying to do. After that, we can branch off to add more complicated stuff. But laying a correct foundation is crucial. In this particular blog post, we will learn together how to create a simple “Hello World” Suitelet. In the related blogs to come, we’ll then learn how to create a list resembling native NetSuite UI, as well as buttons, fields, and more. I hope you’ll stick around for the journey!

Step 1: Creating Our Script

The basics of what we need are the following:

define([], function () {
    /**
     * @NApiVersion 2.x
     * @NScriptType Suitelet
     * @author Ben Rogol (SuiteRep)
     */
    var exports = {};

    function onRequest(context) {
       log.debug("Request Received. Writing Page.")
        context.response.write({output: "<h1>Hello World!</h1>"});
    }

    exports.onRequest = onRequest;
    return exports;
});

The real heart of the Suitelet is what happens in the onRequest() function. There, we log that the request has been received (so we can make sure it’s working all right) and write our page.

Context is the context of the script. It’s basically making sure NetSuite knows we’re in the right room. Response is how the script will respond after the page is requested by a user. Write is what is written in that response. Putting them together—context.response.write, we are specifying what will display on the page. Remember, a Suitelet is like our own page in NetSuite. We can display anything we choose to show. Here, in this example, we chose to output basic HTML on the page—<h1>Hello World!</h1>.

Step 2: Deploying Our Script

Now that we have made our script, it’s time to upload it to NetSuite. The most basic way to do this is to follow these simple steps:

  1. Navigate to Customization >> Scripting >> Scripts >> New.
  2. Click the small plus button to the right of the script file search bar.
  3. Upload your .js file and give it a name (something like ‘hello_world_sut.js’). Save.
  4. Now search for your file name and add the script (again at Customization >> Scripting >> Scripts >> New)
  5. Give it a name and ID. Then at the blue save button, hover until you see “Save and Deploy.” Click that one.
  6. Again, give it a suitable name and ID.
  7. In the “Links” tab, we can make the SuiteLet appear in the navigation bar at the top. For “Center,” choose “Classic Center.” We can then choose a section and a category. I chose to do the “Lists” section with the “Custom” Category, although you are free to put it wherever you would like. Also, create a label called “Hello World” or another suitable name.

After saving the deployment, we are now ready to run our script!

Step 3: Running our Script

There are two ways to view the Suitelet. The easy way is to find it in the navigation bar (Lists >> Custom >> Hello World!).

The other way is to go to the script deployment. For deployed Suitelets, there is always a direct link just in case we need it.

And here’s what our Suitelet looks like! Cool, huh?

Conclusion

In the following posts, we will explore some of the exciting functionality that the ‘ui/serverWidget’ module provides us when creating Suitelets. If you have any questions along the way, feel free to leave a comment below. Also, don’t forget to subscribe to our emailing list to stay along for the ride!