Create a Form Portlet with a Button That Allows User Adjustments

The following sample creates a form portlet with text fields for entering the height and width, in pixels, of an inline HTML element. When users click the Resize link, the script applies the entered dimensions to the element and calls portlet.resize() to resize the portlet to its content.

The sample also includes a Refresh link that calls portlet.refresh(). When refreshed, the portlet displays a newly generated Date.now() timestamp.

For more information about how a portlet is displayed on the NetSuite dashboard, see SuiteScript 2.1 Portlet Script Type.

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.1 Global Objects.

          /**
 * @NApiVersion 2.1
 * @NScriptType Portlet
 * @NScriptPortletType form
 */

define([], () => {
    const render = (context) => {
        const portletObj = context.portlet;
        portletObj.title = 'Test Form Portlet';
        setComponentsForResize();
        setComponentsForRefresh();

        function setComponentsForResize() {
            const DEFAULT_HEIGHT = '50';
            const DEFAULT_WIDTH = '50';
            const inlineHTMLField = portletObj.addField({
                id: 'divfield',
                type: 'inlinehtml',
                label: 'Test inline HTML'
            });
            inlineHTMLField.defaultValue = '<div id=\'divfield_elem\' style=\'border: 1px dotted red; height: ' + DEFAULT_HEIGHT + 'px; width: ' + DEFAULT_WIDTH + 'px;\'></div>';
            inlineHTMLField.updateLayoutType({
                layoutType: 'normal'
            });
            inlineHTMLField.updateBreakType({
                breakType: 'startcol'
            });
            const resizeHeight = portletObj.addField({
                id: 'resize_height',
                type: 'text',
                label: 'Resize Height'
            });
            resizeHeight.defaultValue = DEFAULT_HEIGHT;
            const resizeWidth = portletObj.addField({
                id: 'resize_width',
                type: 'text',
                label: 'Resize Width'
            });
            resizeWidth.defaultValue = DEFAULT_WIDTH;
            const resizeLink = portletObj.addField({
                id: 'resize_link',
                type: 'inlinehtml',
                label: 'Resize link'
            });
            resizeLink.defaultValue = '<a id="resize_link" onclick="var div = document.getElementById(\'divfield_elem\'); var newHeight = parseInt(document.getElementById(\'resize_height\').value, 10); var newWidth = parseInt(document.getElementById(\'resize_width\').value, 10); div.style.height = newHeight + \'px\'; div.style.width = newWidth + \'px\'; require([\'N/portlet\'], function(portlet) { portlet.resize(); });" href="#">Resize</a><br>';
        }

        function setComponentsForRefresh() {
            const textField = portletObj.addField({
                id: 'refresh_output',
                type: 'text',
                label: 'Date.now().toString()'
            });
            textField.defaultValue = Date.now().toString();
            const refreshLink = portletObj.addField({
                id: 'refresh_link',
                type: 'inlinehtml',
                label: 'Refresh link'
            });
            refreshLink.defaultValue = '<a id="refresh_link" onclick="require([\'N/portlet\'], function(portlet) { portlet.refresh(); });" href="#">Refresh</a>';
        }
    };

    return {
        render
    };
}); 

        

General Notices