Build a Simple Portlet That Posts Data to a Servlet

This sample is a portlet script builds a simple a simple for that posts data to a servlet.

The conversion of this script from SuiteScript 1.0 to SuiteScript 2.1 includes the following:

JSDoc tags are added at the top of the script to indicate the script version and script type.
The define statement is added which imports the N/portlet module.
The return statement is added with the render entry point.
The addField, addSelectOption, and setSubmitButton functions are changed to methods that accept an object as the parameter.
The setLayoutType function is changed to the updateLayout and updateBreakType methods.

SuiteScript 1.0 Script	SuiteScript 2.1 Script
function demoSimpleFormPortlet(portlet, column) { portlet.setTitle('Simple Form Portlet') var fld = portlet.addField('text','text','Text'); fld.setLayoutType('normal','startcol'); portlet.addField('integer','integer','Integer'); portlet.addField('date','date','Date'); var select = portlet.addField('fruit','select','Select'); select.addSelectOption('a','Oranges'); select.addSelectOption('b','Apples'); select.addSelectOption('c','Bananas'); portlet.addField('textarea','textarea','Textarea'); portlet.setSubmitButton('http://httpbin.org/post','Submit'); }	/** * @NApiVersion 2.1 * @NScriptType Portlet */ define(['N/ui/serverWidget'], (serverWidget) => { const render = (params) => { const { portlet } = params; portlet.title = 'Simple Form Portlet'; const textField = portlet.addField({ id: 'text', type: serverWidget.FieldType.TEXT, label: 'Text' }); textField.updateLayoutType({ layoutType: serverWidget.FieldLayoutType.NORMAL }); textField.updateBreakType({ breakType: serverWidget.FieldBreakType.STARTCOL }); const fruitSelect = portlet.addField({ id: 'fruit', type: serverWidget.FieldType.SELECT, label: 'Select' }); fruitSelect.addSelectOption({ value: 'a', text: 'Oranges' }); fruitSelect.addSelectOption({ value: 'b', text: 'Apples' }); fruitSelect.addSelectOption({ value: 'c', text: 'Bananas' }); portlet.addField({ id: 'textarea', type: serverWidget.FieldType.TEXTAREA, label: 'Textarea' }); portlet.setSubmitButton({ url: 'https://httpbin.org/post', label: 'Submit', target: '_top' }); }; return { render }; });

SuiteScript 1.0 Script

SuiteScript 2.1 Script

                    function demoSimpleFormPortlet(portlet, column) {
    portlet.setTitle('Simple Form Portlet')
    
    var fld = portlet.addField('text','text','Text');

    fld.setLayoutType('normal','startcol');

    portlet.addField('integer','integer','Integer');

    portlet.addField('date','date','Date');

    var select = portlet.addField('fruit','select','Select');  
 
    select.addSelectOption('a','Oranges');

    select.addSelectOption('b','Apples');

    select.addSelectOption('c','Bananas');  
 
    portlet.addField('textarea','textarea','Textarea');

    portlet.setSubmitButton('http://httpbin.org/post','Submit');
}

                    /**
 * @NApiVersion 2.1
 * @NScriptType Portlet
 */

define(['N/ui/serverWidget'], (serverWidget) => {
    const render = (params) => {
        const { portlet } = params;

        portlet.title = 'Simple Form Portlet';

        const textField = portlet.addField({
            id: 'text',
            type: serverWidget.FieldType.TEXT,
            label: 'Text'
        });

        textField.updateLayoutType({
            layoutType: serverWidget.FieldLayoutType.NORMAL
        });

        textField.updateBreakType({
            breakType: serverWidget.FieldBreakType.STARTCOL
        });

        const fruitSelect = portlet.addField({
            id: 'fruit',
            type: serverWidget.FieldType.SELECT,
            label: 'Select'
        });

        fruitSelect.addSelectOption({
            value: 'a',
            text: 'Oranges'
        });

        fruitSelect.addSelectOption({
            value: 'b',
            text: 'Apples'
        });

        fruitSelect.addSelectOption({
            value: 'c',
            text: 'Bananas'
        });

        portlet.addField({
            id: 'textarea',
            type: serverWidget.FieldType.TEXTAREA,
            label: 'Textarea'
        });

        portlet.setSubmitButton({
            url: 'https://httpbin.org/post',
            label: 'Submit',
            target: '_top'
        });
    };

    return {
        render
    };
});

General Notices