N/ui/serverWidget Module Script Samples

The following script samples demonstrate how to use the features of the N/ui/serverWidget module:

• Create a Custom Form with a Submit Button, Fields, and an Inline Editor Sublist

• Create a Custom Survey Form

See Complete Custom List Page Sample Script for a sample of a List page, and Sample Custom Assistant Script for a sample of an Assistant.

Create a Custom Form with a Submit Button, Fields, and an Inline Editor Sublist

The following sample creates a Suitelet that generates a sample form with a submit button, fields, and an inline editor sublist.

Note:

This script sample uses the define function, which is required for an entry point script (a script you attach to a script record and deploy). You must use the require function if you want to copy the script into the SuiteScript Debugger and test it. For more information, see SuiteScript 2.x Global Objects.

Important:

This sample uses SuiteScript 2.1. For more information, see SuiteScript 2.1.

            /**
 * @NApiVersion 2.1
 * @NScriptType Suitelet
 */
define(['N/ui/serverWidget'], (serverWidget) => {
    const onRequest = (scriptContext) => {
        if (scriptContext.request.method === 'GET') {
            let form = serverWidget.createForm({
                title: 'Simple Form'
            });

            let field = form.addField({
                id: 'textfield',
                type: serverWidget.FieldType.TEXT,
                label: 'Text'
            });
            field.layoutType = serverWidget.FieldLayoutType.NORMAL;
            field.updateBreakType({
                breakType: serverWidget.FieldBreakType.STARTCOL
            });

            form.addField({
                id: 'datefield',
                type: serverWidget.FieldType.DATE,
                label: 'Date'
            });
            form.addField({
                id: 'currencyfield',
                type: serverWidget.FieldType.CURRENCY,
                label: 'Currency'
            });

            let select = form.addField({
                id: 'selectfield',
                type: serverWidget.FieldType.SELECT,
                label: 'Select'
            });
            select.addSelectOption({
                value: 'a',
                text: 'Albert'
            });
            select.addSelectOption({
                value: 'b',
                text: 'Baron'
            });

            let sublist = form.addSublist({
                id: 'sublist',
                type: serverWidget.SublistType.INLINEEDITOR,
                label: 'Inline Editor Sublist'
            });
            sublist.addField({
                id: 'sublist1',
                type: serverWidget.FieldType.DATE,
                label: 'Date'
            });
            sublist.addField({
                id: 'sublist2',
                type: serverWidget.FieldType.TEXT,
                label: 'Text'
            });

            form.addSubmitButton({
                label: 'Submit Button'
            });

            scriptContext.response.writePage(form);
        } else {
            const delimiter = /\u0001/;
            const textField = scriptContext.request.parameters.textfield;
            const dateField = scriptContext.request.parameters.datefield;
            const currencyField = scriptContext.request.parameters.currencyfield;
            const selectField = scriptContext.request.parameters.selectfield;
            const sublistData = scriptContext.request.parameters.sublistdata.split(delimiter);
            const sublistField1 = sublistData[0];
            const sublistField2 = sublistData[1];

            scriptContext.response.write(`You have entered: ${textField} ${dateField} ${currencyField} ${selectField} ${sublistField1} ${sublistField2}`);
        }
    }

    return {onRequest}
}); 

          

Create a Custom Survey Form

The following sample creates a Suitelet that generates a customer survey form with inline HTML fields, radio fields, and a submit button.

Note:

This script sample uses the define function, which is required for an entry point script (a script you attach to a script record and deploy). You must use the require function if you want to copy the script into the SuiteScript Debugger and test it. For more information, see SuiteScript 2.x Global Objects.

            /**
 * @NApiVersion 2.x
 * @NScriptType Suitelet
 */
define(['N/ui/serverWidget'], function(serverWidget) {
    function onRequest(context) {
        var form = serverWidget.createForm({
            title: 'Thank you for your interest in Wolfe Electronics',
            hideNavBar: true
        });

        var htmlHeader = form.addField({
            id: 'custpage_header',
            type: serverWidget.FieldType.INLINEHTML,
            label: ' '
        }).updateLayoutType({
            layoutType: serverWidget.FieldLayoutType.OUTSIDEABOVE
        }).updateBreakType({
            breakType: serverWidget.FieldBreakType.STARTROW
        }).defaultValue = '<p style=\'font-size:20px\'>We pride ourselves on providing the best' +
            ' services and customer satisfaction.  Please take a moment to fill out our survey.</p><br><br>';

        var htmlInstruct = form.addField({
            id: 'custpage_p1',
            type: serverWidget.FieldType.INLINEHTML,
            label: ' '
        }).updateLayoutType({
            layoutType: serverWidget.FieldLayoutType.OUTSIDEABOVE
        }).updateBreakType({
            breakType: serverWidget.FieldBreakType.STARTROW
        }).defaultValue = '<p style=\'font-size:14px\'>When answering questions on a scale of 1 to 10,' +
            ' 1 = Greatly Unsatisfied and 10 = Greatly Satisfied.</p><br><br>';

        var productRating = form.addField({
            id: 'custpage_lblproductrating',
            type: serverWidget.FieldType.INLINEHTML,
            label: ' '
        }).updateLayoutType({
            layoutType: serverWidget.FieldLayoutType.NORMAL
        }).updateBreakType({
            breakType: serverWidget.FieldBreakType.STARTROW
        }).defaultValue = '<p style=\'font-size:14px\'>How would you rate your satisfaction with our products?</p>';

        form.addField({
            id: 'custpage_rdoproductrating',
            type: serverWidget.FieldType.RADIO,
            label: '1',
            source: 'p1'
        }).updateLayoutType({
            layoutType: serverWidget.FieldLayoutType.STARTROW
        });
        form.addField({
            id: 'custpage_rdoproductrating',
            type: serverWidget.FieldType.RADIO,
            label: '2',
            source: 'p2'
        }).updateLayoutType({
            layoutType: serverWidget.FieldLayoutType.MIDROW
        });
        form.addField({
            id: 'custpage_rdoproductrating',
            type: serverWidget.FieldType.RADIO,
            label: '3',
            source: 'p3'
        }).updateLayoutType({layoutType: serverWidget.FieldLayoutType.MIDROW});
        form.addField({
            id: 'custpage_rdoproductrating',
            type: serverWidget.FieldType.RADIO,
            label: '4',
            source: 'p4'
        }).updateLayoutType({layoutType: serverWidget.FieldLayoutType.MIDROW});
        form.addField({
            id: 'custpage_rdoproductrating',
            type: serverWidget.FieldType.RADIO,
            label: '5',
            source: 'p5'
        }).updateLayoutType({layoutType: serverWidget.FieldLayoutType.MIDROW});
        form.addField({
            id: 'custpage_rdoproductrating',
            type: serverWidget.FieldType.RADIO,
            label: '6',
            source: 'p6'
        }).updateLayoutType({layoutType: serverWidget.FieldLayoutType.MIDROW});
        form.addField({
            id: 'custpage_rdoproductrating',
            type: serverWidget.FieldType.RADIO,
            label: '7',
            source: 'p7'
        }).updateLayoutType({layoutType: serverWidget.FieldLayoutType.MIDROW});
        form.addField({
            id: 'custpage_rdoproductrating',
            type: serverWidget.FieldType.RADIO,
            label: '8',
            source: 'p8'
        }).updateLayoutType({layoutType: serverWidget.FieldLayoutType.MIDROW});
        form.addField({
            id: 'custpage_rdoproductrating',
            type: serverWidget.FieldType.RADIO,
            label: '9',
            source: 'p9'
        }).updateLayoutType({layoutType: serverWidget.FieldLayoutType.MIDROW});
        form.addField({
            id: 'custpage_rdoproductrating',
            type: serverWidget.FieldType.RADIO,
            label: '10',
            source: 'p10'
        }).updateLayoutType({layoutType: serverWidget.FieldLayoutType.ENDROW});

        var serviceRating = form.addField({
            id: 'custpage_lblservicerating',
            type: serverWidget.FieldType.INLINEHTML,
            label: ' '
        }).updateLayoutType({
            layoutType: serverWidget.FieldLayoutType.NORMAL
        }).updateBreakType({
            breakType: serverWidget.FieldBreakType.STARTROW
        }).defaultValue = '<p style=\'font-size:14px\'>How would you rate your satisfaction with our services?</p>';

        form.addField({
            id: 'custpage_rdoservicerating',
            type: serverWidget.FieldType.RADIO,
            label: '1',
            source: 'p1'
        }).updateLayoutType({layoutType: serverWidget.FieldLayoutType.STARTROW});
        form.addField({
            id: 'custpage_rdoservicerating',
            type: serverWidget.FieldType.RADIO,
            label: '2',
            source: 'p2'
        }).updateLayoutType({layoutType: serverWidget.FieldLayoutType.MIDROW});
        form.addField({
            id: 'custpage_rdoservicerating',
            type: serverWidget.FieldType.RADIO,
            label: '3',
            source: 'p3'
        }).updateLayoutType({layoutType: serverWidget.FieldLayoutType.MIDROW});
        form.addField({
            id: 'custpage_rdoservicerating',
            type: serverWidget.FieldType.RADIO,
            label: '4',
            source: 'p4'
        }).updateLayoutType({layoutType: serverWidget.FieldLayoutType.MIDROW});
        form.addField({
            id: 'custpage_rdoservicerating',
            type: serverWidget.FieldType.RADIO,
            label: '5',
            source: 'p5'
        }).updateLayoutType({layoutType: serverWidget.FieldLayoutType.MIDROW});
        form.addField({
            id: 'custpage_rdoservicerating',
            type: serverWidget.FieldType.RADIO,
            label: '6',
            source: 'p6'
        }).updateLayoutType({layoutType: serverWidget.FieldLayoutType.MIDROW});
        form.addField({
            id: 'custpage_rdoservicerating',
            type: serverWidget.FieldType.RADIO,
            label: '7',
            source: 'p7'
        }).updateLayoutType({layoutType: serverWidget.FieldLayoutType.MIDROW});
        form.addField({
            id: 'custpage_rdoservicerating',
            type: serverWidget.FieldType.RADIO,
            label: '8',
            source: 'p8'
        }).updateLayoutType({layoutType: serverWidget.FieldLayoutType.MIDROW});
        form.addField({
            id: 'custpage_rdoservicerating',
            type: serverWidget.FieldType.RADIO,
            label: '9',
            source: 'p9'
        }).updateLayoutType({layoutType: serverWidget.FieldLayoutType.MIDROW});
        form.addField({
            id: 'custpage_rdoservicerating',
            type: serverWidget.FieldType.RADIO,
            label: '10',
            source: 'p10'
        }).updateLayoutType({layoutType: serverWidget.FieldLayoutType.ENDROW});

        form.addSubmitButton({
            label: 'Submit'
        });

        context.response.writePage(form);
    }

    return {
        onRequest: onRequest
    };
}); 

          

General Notices