UI Component Overview

UI Components are objects you can use to customize your NetSuite experience with SuiteScript 2.x. With server-side scripts, you can create custom UIs and still keep the NetSuite look and feel. SuiteScript UI components are generated on the server and 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 lets you manipulate custom workflow actions that are defined on a record in a workflow. For more information, see SuiteScript 2.x Workflow Action Script Type.

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

• Portlets, like Suitelets, let you create forms, lists, and display links or inline HTML. Unlike Suitelets, Portlets only show up on Dashboard pages and can’t be displayed on their own. For more information, see SuiteScript 2.x Portlet Script Type.

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

This guide focuses on developing custom user interfaces using Suitelets.

Page Types

When you create a custom UI with a Suitelet, you can use three types of pages (Form, List, and Assistant) combined with the standard NetSuite UI components and HTML to build what you need.

• Form – A form displays information in NetSuite. Forms have fields that show or collect user data, which can then be submitted and processed by a Suitelet. You can also use forms to show or output 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 shows information in a table with rows and columns. Lists can show search results and let users update or edit data.

  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 wizard with multiple steps to help users finish a bigger goal. Each step covers part of the task.

  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 main NetSuite UI components you can use to build a page, list, or assistant. These components are standard in NetSuite, though their properties may change depending on the page type.

• Button – A custom button is something you can add to your UI. You control its visibility, label, and what it does.

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

• Field – Custom fields let you record and display information in your UI.

  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 in your UI. Using multiple tabs lets you show more information on a single page.

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

• Sublist – A sublist is a list you can embed on your page. Custom sublists can show information from a saved search.

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

Properties and Enumerations

Each UI component has properties and methods you can use to customize its functionality and appearance. These configuration values are stored as enumerations and give you plenty of flexibility when designing your user interface.

Examples of enumerations and properties include:

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

• The serverWidget.FieldLayoutType enumerations help you position a field outside a field group or on the same row.

• The serverWidget.FieldBreakType enumerations control field break types.

• The Assistant.isNotOrdered property specifies if your assistant is sequential or non-sequential.

General Notices