After adding a custom sublist to a Suitelet with the ‘ui/serverWidget’ module, we can then populate our list dynamically with a in-script Saved Search. Join me as we explore this powerful possibility together!

If you’re new to this mini-series about creating Suitelets, check out our first, second, and third blog posts to catch up to speed.

Scripting a Saved Search

The neat thing about learning the various modules of SuiteScript is that we can combine them together to do some amazing things. The ‘N/search’ module becomes extremely important when trying to populate a Suitelet sublist. If you would like a refresher on how that module works, check out this post here. Also, a really helpful tip when designing a Saved Search within a script is to first create it in the NetSuite UI. This will allow you to test the search and make sure everything is working as it should before you spend the time writing it in the script.

Oh, and don’t forget to define the module at the top of your script! define(['N/ui/serverWidget', 'N/search'], function (ui, search) { ...

Perhaps the best way to teach in this particular situation is to demonstrate it. See the following code where I use a Saved Search to find Sales Orders for a certain customer (line 9). In this case, I decided to create a separate function for the search. After creating the search, I’ll show you how to call the function within the GET part of our Suitelet code.

function getSalesOrders() {
        var salesOrders = search.create({
            type: "salesorder",
            filters: [
                ["type", "anyof", "SalesOrd"],
                "AND",
                ["mainline", "is", "T"],
                "AND",
                ["name", "anyof", "2813"]
            ],
            columns:
                [
                    search.createColumn({ name: "entity", label: "Name" }),
                    search.createColumn({ name: "trandate", label: "Date" })
                ]
        });
        return salesOrders;
    }

After defining a function to search for the needed information, we can then call that function, get the results, and populate the sublist.

Populating Our Sublist

Here’s what our entire onRequest function looks like. I’ll point out some notable things down below.

function onRequest(context) {
        if (context.request.method === 'GET') {
            var form = ui.createForm({ title: 'Hello World Suitelet' });


            form.addSubmitButton({ label: 'Submit!' });
            form.addButton({
                id: 'custpage_say_hello',
                label: 'Say Hello!',
                functionName: 'sayHelloToUser'
            });

            form.addField({
                id: 'custpage_test_field',
                label: 'Enter Hello...',
                type: ui.FieldType.TEXT,
            });

            var sublist = form.addSublist({
                id: 'custpage_sales_orders',
                type: ui.SublistType.LIST,
                label: 'Sales Orders'
            });

            sublist.addField({
                id: 'custpage_name',
                label: 'Customer Name',
                type: ui.FieldType.TEXT
            })

            sublist.addField({
                id: 'custpage_date',
                label: 'Date',
                type: ui.FieldType.DATE
            })

            var salesOrders = getSalesOrders(); // <—— HERE
            var counter = 0;

            salesOrders.run().each(function(result) {
                log.debug("result", result);

                var customerName = result.getText('entity');
                var tranDate = result.getValue('trandate');

                sublist.setSublistValue({
                    id: 'custpage_name',
                    line: counter,
                    value: customerName
                });
                sublist.setSublistValue({
                    id: 'custpage_date',
                    line: counter,
                    value: tranDate
                });

                counter++;
                return true;
            })

            context.response.writePage(form);

        } else if (context.request.method === 'POST') {
            log.debug("Suitelet is posting.")
        }
    }

The part that handles the search and populates the sublist is this:

 var salesOrders = getSalesOrders();
    var counter = 0;

    salesOrders.run().each(function(result) {
        log.debug("result", result);

        var customerName = result.getText('entity');
        var tranDate = result.getValue('trandate');

        sublist.setSublistValue({
            id: 'custpage_name',
            line: counter,
            value: customerName
        });
        sublist.setSublistValue({
            id: 'custpage_date',
            line: counter,
            value: tranDate
        });

        counter++;
        return true;
    })

We first call the function and assign the search to a variable called “salesOrders.” Then we run the search, and for each search result we (1) use either the “result.getText” or “result.getValue” methods to get the applicable information to set, (2) set each column for the line, and (3) return true. Returning true is important if you want to get more than one result (which we do!).

After we set the columns on each line that the search returned, our working Suitelet looks like this:

Conclusion

We hope you find this helpful! Have any questions? Comment down below! And be sure to subscribe to our email list to be notified of new SuiteScript tutorials. Next time, we will likely take a look at handling changes to the Suitelet once the form is submitted by the user. Thanks for reading!