UI Component Overview

UI Components are a collection of objects that can be used to customize your NetSuite experience using SuiteScript 2.x. Using server side scripts you can create custom UIs while maintaining the NetSuite look and feel. SuiteScript UI components are generated on the server and are accessible through client scripts.

Note:

SuiteScript does not support direct access to the NetSuite UI through the Document Object Model (DOM). NetSuite UI should only be accessed using SuiteScript APIs.

You can customize the NetSuite user interface using four script types:

• Workflow Action scripts allow you to manipulate custom workflow actions that are defined on a record in a workflow. For more information about Workflow Action Scripts, see SuiteScript 2.x Workflow Action Script Type.

• Suitelets are the most commonly used script type, as they provide the most flexibility and functionality. Suitelets can be used to create forms, list, assistants as well as support the use of in-line HTML. For more information about Suitelets, see SuiteScript 2.x Suitelet Script Type.

• Portlets, like Suitelets, provide a variety of functionality including forms and lists. Portlets can also be used for displaying links and inline HTML. Unlike Suitelets, Portlets can only be displayed on the Dashboard pages and cannot be displayed on their own. For more information about Portlets, see SuiteScript 2.x Portlet Script Type.

• User Event scripts can also be used to manipulate custom forms. For more information about User Event Scripts, see SuiteScript 2.x User Event Script Type.

The guide focuses on developing custom user interfaces using Suitelets.

Page Types

When creating a custom user interface with a Suitelet, there are three types of page types that can be combined with the standard NetSuite UI components and HTML components to build the UI you need.

• Form

  A form is used to display information within NetSuite. Forms are composed of fields that can be configured to display or collect data from the user. Information collected from forms can submitted by the user and processed by a Suitelet. Additionally, you can generate forms to display and output the information stored in a record.

  For information about forms, supported UI components and how to create a form, see SuiteScript 2.x Custom Forms.

  For information about the API module, see serverWidget.Form.

• List

  A list page is used to present information in a table containing rows and columns. Lists can be used to display search results as well as give the user the ability to update and edit the information contained within them.

  For information about how to create a list, see SuiteScript 2.x Custom List Pages.

  For information about the API module, see serverWidget.List.

• Assistant

  An assistant is a multistep wizard that you can use to help the user accomplish a larger goal. Assistants are built out of steps, with each step containing a portion of the complete goal.

  For information about how to create an assistant, see Creating Custom Assistants.

  For information about the API module, see serverWidget.Assistant

Standard UI Components

There are four key NetSuite UI components that can be used to build a page, list or assistant. These UI components are standard to the NetSuite experience though they may have different properties depending on the page types.

• Button

  A customized button is button that you can add to your user interface. You can control the button's visibility, label, and functionality.

  For information about the API module, see serverWidget.Button

• Field

  Custom fields are used to record and display information in your user interface.

  For more information about types of fields, see serverWidget.FieldType

  For information about the API module, see serverWidget.Field

• Tab

  A tab is a special section added to your user interface. Using multiple tabs allow you to display more information about a single page.

  For information about the API module, see serverWidget.Tab

• Sublist

  A sublist is a list that can be embedded on your page. Custom sublists can present information based on the results of a saved search.

  For information about the API module, see serverWidget.Sublist

Properties and Enumerations

Each UI component has a series of properties and methods that can be used to customize the functionality and appearance of your NetSuite UI components. These configuration values are stored as enumerations and work with each UI component to give you the most flexibility in designing your UI.

Examples of enumerations and properties include:

• The serverWidget.FieldType enumerations are used to specify the field type, and define how they behave on your form.

• The serverWidget.FieldLayoutType enumerations are used to position a field outside a field group or together on the same row.

• The serverWidget.FieldBreakType enumerations are used to control field break types.

• The Assistant.isNotOrdered property is used to specify if your assistant is either sequential or non-sequential.

General Notices