Creating a Custom List Page with SuiteScript 2.x

The following screenshot displays a list page created by a Suitelet.

Steps for Creating a Custom List Page as above with SuiteScript 2.x:

• Create a Suitelet, and add the required JSDoc tags.
• Add the define function to load the N/ui/serverWidget Module module.
• To enable a Submit button, create an onRequest function. In the onRequest function create an if statement for the context request method, and set it to ‘GET’. After the if statement, create a return statement to support the GET request method.
• In section one, create a list page using serverWidget.createList(options). You can use serverWidget.ListStyle to define the style of the list page.
• In section one, below the declaration of the list, use List.addButton(options) to create a button on the list. Use the functionName property to call the function triggered when the button is clicked.
• In section two, use List.addColumn(options) to define the columns in the list. The column type is specified according to the serverWidget.FieldType enumeration.
• In section two, use List.addRow(options) to define a single row on the list. Or use List.addRows(options) to define multiple rows at one time.

Sample script:

/**
 * @NApiVersion 2.x
 * @NScriptType Suitelet
 */
define(['N/ui/serverWidget'], function(serverWidget) {
    function onRequest(context){
        if(context.request.method === 'GET'){
            // Section One - List 
            var list = serverWidget.createList({
                title: 'Purchase History'
            });

            list.style = serverWidget.ListStyle.REPORT;

            list.addButton({
                id: 'buttonid',
                label: 'Test',
                functionName: '' // the function called when the button is pressed
            });

            // Section Two - Columns 
            var datecol = list.addColumn({
                id: 'column1',
                type: serverWidget.FieldType.DATE,
                label: 'Date',
                align: serverWidget.LayoutJustification.RIGHT
            });

            list.addColumn({
                id: 'column2',
                type: serverWidget.FieldType.TEXT,
                label: 'Product',
                align: serverWidget.LayoutJustification.RIGHT
            });

            list.addColumn({
                id: 'column3',
                type: serverWidget.FieldType.INTEGER,
                label: 'Quantity',
                align: serverWidget.LayoutJustification.RIGHT
            });

            list.addColumn({
                id: 'column4',
                type: serverWidget.FieldType.CURRENCY,
                label: 'Unit Cost',
                align: serverWidget.LayoutJustification.RIGHT
            });

            list.addRows({
                rows: [{column1: '05/30/2018', column2: 'Widget', column3: '4', column4: '4.50'},
                    {column1: '05/30/2018', column2: 'Sprocket', column3: '6', column4: '11.50'},
                    {column1: '05/30/2018', column2: 'Gizmo', column3: '9', column4: '1.25'}]
            });
            context.response.writePage(list);
        } else{
        }
    }

    return {
        onRequest: onRequest
    }
});