Create a Form Portlet with a Button That Allows User Adjustments

The following sample shows how to create a form portlet that allows users to adjust its height and width. It creates two text fields representing the height and width of the portlet, measured in pixels. It also creates a button that runs the portlet.resize() method to adjust the height and width of the portlet based on the values of the text fields.

This sample also shows how to create a button that uses the portlet.refresh() method. When the button is clicked, the portlet is updated to show the current date.

For more information about how a portlet is displayed on the NetSuite dashboard, see SuiteScript 2.x 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.x Global Objects.

          /**
 * @NApiVersion 2.x
 * @NScriptType Portlet
 * @NScriptPortletType form
 */

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

        function setComponentsForResize() {
            var DEFAULT_HEIGHT = '50';
            var DEFAULT_WIDTH = '50';
            var 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'
            });
            var resizeHeight = portletObj.addField({
                id: 'resize_height',
                type: 'text',
                label: 'Resize Height'
            });
            resizeHeight.defaultValue = DEFAULT_HEIGHT;
            var resizeWidth = portletObj.addField({
                id: 'resize_width',
                type: 'text',
                label: 'Resize Width'
            });
            resizeWidth.defaultValue = DEFAULT_WIDTH;
            var resizeLink = portletObj.addField({
                id: 'resize_link',
                type: 'inlinehtml',
                label: 'Resize link'
            });
            resizeLink.defaultValue = resizeLink.defaultValue = '<a id=\'resize_link\' onclick=\"require([\'SuiteScripts/portletApiTestHelper\'], function(portletApiTestHelper) {portletApiTestHelper.resizePortlet(); }) \" href=\'#\'>Resize</a><br>';
        }

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

    return {
        render: render
    };
})

// portletApiTestHelper.js
define(['N/portlet'], function(portlet) {
    function refreshPortlet() {
        portlet.refresh();
    }

    function resizePortlet() {
        var div = document.getElementById('divfield_elem');
        var newHeight = parseInt(document.getElementById('resize_height').value);
        var newWidth = parseInt(document.getElementById('resize_width').value);
        div.style.height = newHeight + 'px';
        div.style.width = newWidth + 'px';
        portlet.resize();
    }

    return {
        refreshPortlet: refreshPortlet,
        resizePortlet: resizePortlet
    };
}); 

        

General Notices