N/portlet Module Script Sample
The following script sample demonstrates how to use the features of the N/portlet module.
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.
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
};
});