netsuite-uif-spa-reference

Use when building, modifying, or debugging NetSuite UIF SPA components. Provides API/type lookup for `@uif-js/core` and `@uif-js/component` (constructors, methods, props, enums, hooks, and component options).

الانتقال إلى التثبيت

المستودع: oracle/netsuite-suitecloud-sdk
آخر نشاط في المصدر: ١٥ يونيو ٢٠٢٦ في ١٥:١٥
لغة SKILL.md المكتشفة: الإنجليزية
النجوم: ٣٢٨
التفرعات: ١٠٥

خيارات التثبيت

يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.

التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.

يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.

npx skills add https://github.com/oracle/netsuite-suitecloud-sdk --skill netsuite-uif-spa-reference

يبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.

تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.

مراجعة ملفات المصدر

اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.

مستكشف الملفات

3 ملفات

SKILL.md

تعليمات المصدر · معاينة للقراءة فقط

العودة إلى البحث العودة إلى التثبيت

NetSuite UIF Reference

Complete type definitions for @uif-js/core and @uif-js/component, the two packages that power NetSuite SPA (single-page application) user interfaces.

When to Use

Building or modifying a UIF SPA component (JSX files)

Looking up the exact API for a UIF class (Date, ArrayDataSource, Router, etc.)

Checking available props/methods on UIF components (DataGrid, StackPanel, Button, etc.)

Debugging runtime errors from UIF framework code

Verifying enum values (for example, Button.Hierarchy, GapSize, DataGrid.ColumnType)

Understanding UIF Date vs. Native Date behavior

Reference Data

The type definitions are located in the references/ subdirectory.

File

Package

Contents

references/core.d.ts

name	netsuite-uif-spa-reference
description	Use when building, modifying, or debugging NetSuite UIF SPA components. Provides API/type lookup for `@uif-js/core` and `@uif-js/component` (constructors, methods, props, enums, hooks, and component options).
license	The Universal Permissive License (UPL), Version 1.0
metadata	{"author":"Oracle NetSuite","version":"1.0"}

NetSuite UIF Reference

Complete type definitions for @uif-js/core and @uif-js/component, the two packages that power NetSuite SPA (single-page application) user interfaces.

When to Use

Building or modifying a UIF SPA component (JSX files)
Looking up the exact API for a UIF class (Date, ArrayDataSource, Router, etc.)
Checking available props/methods on UIF components (DataGrid, StackPanel, Button, etc.)
Debugging runtime errors from UIF framework code
Verifying enum values (for example, Button.Hierarchy, GapSize, DataGrid.ColumnType)
Understanding UIF Date vs. Native Date behavior

Reference Data

The type definitions are located in the references/ subdirectory.

File	Package	Contents
`references/core.d.ts`

Class

Purpose

Key Members

Date

UIF date wrapper

.year, .month (0-indexed), .day, .firstOfMonth(), .lastOfMonth(), .addDay(), .addMonth(), .stripTime(), .toDate() (→ native), Date.now(), Date.today()

ArrayDataSource

Data provider for grids

ArrayDataSource<T> – constructor takes T[]

Ajax

HTTP client

Ajax.post(), Ajax.get(), Ajax.DataType, Ajax.ResponseType

Router

SPA routing

Router.Routes, Router.Route, Router.Hash, Router.Path

useState

State hook

useState(initialValue) → [value, setter]

useEffect

Effect hook

useEffect(callback, deps)

useContext

Context hook

useContext(contextName: string) – takes a string, for example, ContextType.ROUTER_LOCATION

Context

Context provider

Context.Provider, Context.Consumer

ContextType

Context type string constants

ContextType.ROUTER_LOCATION, ContextType.ROUTER_NAVIGATION, ContextType.ROUTER_ROUTE, ContextType.I18N, ContextType.PREFERENCES, ContextType.FOCUS_MANAGER, ContextType.STORE – full list: 31 values; search for ContextType in core.d.ts

useCallback

Memoized callback

useCallback(fn, deps) – prevents unnecessary re-renders

useMemo

Memoized value

useMemo(() => compute(), deps)

useRef

Mutable ref container

useRef(initialValue) – .current persists across renders

Translation

i18n support

Translation.get('key') for localized strings

Store

Redux-like state container

Store.create({ reducer, initial }); factory; Store.Provider – wrap the tree in JSX; useSelector(fn) – select slice; useDispatch() – dispatch actions

Reducer

Creates typed reducers

Reducer.create(handlers); action handler map; Reducer.combine([{path, reduce}]) – combine reducers (takes array, not plain object)

useDispatch

Dispatch hook

var dispatch = useDispatch(); dispatches Store actions; requires Store.Provider ancestor

useSelector

State selector hook

var value = useSelector(function(state) { return state.data; }) – selects state slice from Store

CancellationTokenSource

Async operation cancellation

new CancellationTokenSource() → var token = source.token (pass to async fn), source.cancel() (call in useEffect cleanup)

CancellationToken

Cancellation check

token.cancelled; check before updating state in async callbacks

TreeDataSource

Hierarchical grid/tree data

new TreeDataSource({ data, childAccessor: fn }); fn receives item, returns children array (or pass string property name). Use with DataGrid.ColumnType.TREE or TreeView

LazyDataSource

On-demand data loading

new LazyDataSource(() => fetch().then(data => new ArrayDataSource(data))) – wraps any async data load. .load() triggers load; .loaded checks status. Use with DataGrid paging for server-side pagination

ImmutableArray

Immutable array helpers

ImmutableArray.push(arr, item), ImmutableArray.remove(arr, item), ImmutableArray.set(arr, index, item), ImmutableArray.filter(arr, fn), ImmutableArray.EMPTY; all return new arrays

ImmutableObject

Immutable object helpers

ImmutableObject.set(obj, 'key', value), ImmutableObject.merge(obj, partial), ImmutableObject.remove(obj, 'key'); all return new objects

FormatService

Locale-aware type formatting

FormatService.forI18n(i18n).format(date, Format.DATE); converts UIF Date to display string. Format enum: DATE, DATE_TIME, TIME, INTEGER, FLOAT. Get i18n via useContext(ContextType.I18N)

SystemIcon

System icon constants (277)

SystemIcon.ADD, SystemIcon.EDIT, SystemIcon.DELETE, SystemIcon.FILTER, SystemIcon.HOME, SystemIcon.SEARCH, SystemIcon.SETTINGS, SystemIcon.SAVE, SystemIcon.CLOSE, SystemIcon.ALERT, SystemIcon.CALENDAR, SystemIcon.DOWNLOAD_DOCUMENT, SystemIcon.UPLOAD_DOCUMENT, SystemIcon.PERSON – search for SystemIcon in core.d.ts for full catalog

RecordIcon

NetSuite record icons (43)

RecordIcon.CUSTOMER, RecordIcon.EMPLOYEE, RecordIcon.INVOICE, RecordIcon.SALES_ORDER, RecordIcon.CONTACT, RecordIcon.ITEM, RecordIcon.CASE, RecordIcon.TASK

EventBus

Pub/sub event bus

eventBus.subscribe(sender, listener), eventBus.publish(event) – for decoupled cross-component communication without prop-drilling or shared state

KeyCode

Keyboard key constants (101)

KeyCode.ENTER, KeyCode.ESCAPE, KeyCode.TAB, KeyCode.BACKSPACE, KeyCode.SPACE, KeyCode.ARROW_DOWN, KeyCode.ARROW_UP, KeyCode.F1–KeyCode.F12, KeyCode.A–KeyCode.Z, KeyCode.NUM_0–KeyCode.NUM_9

Component

Purpose

Key Props

DataGrid

Table/grid display

dataSource, columns, columnStretch, rootStyle, dataRowHeight, highlightRowsOnHover

StackPanel

Layout container

orientation, itemGap, outerGap, alignment

Button

Clickable button

label, action, enabled (not disabled – constructor-only). Enums: Button.Hierarchy: PRIMARY/SECONDARY/DANGER; Button.Type: DEFAULT/PRIMARY/PURE/EMBEDDED/GHOST/DANGER/LINK; Button.Size: SMALLER/SMALL/MEDIUM/LARGE; Button.Behavior: DEFAULT/TOGGLE

Text

Text display

type (WEAK, STRONG, etc.)

Badge

Status badges

label, classList (single class only!)

Heading

Section headings

type (LARGE_HEADING, MEDIUM_HEADING, etc.)

Card

Card container

Content wrapper

ContentPanel

Content wrapper

outerGap, horizontalAlignment

ApplicationHeader

Page header

title

Modal

Dialog overlay

title, size (DEFAULT/SMALL/MEDIUM/LARGE), rootStyle, owner, content, closeButton

Loader

Loading spinner

label

GridPanel

CSS Grid layout

columns, defaultColumnWidth, gap; prefer over horizontal StackPanel

ScrollPanel

Scrollable container

orientation – requires bounded parent height

NavigationDrawer

Vertical nav

selectedValue, items with route, icon, label

Dropdown

Select input

dataSource, selectedValue, onSelectedValueChanged; do not use Select

TextBox

Text input

text, onTextChanged, placeholder, maxLength

CheckBox

Boolean input

value, onValueChanged, label

TabPanel

Tab navigation

selectedValue, selectedIndex, items as Tab children with label, value, icon. Event: onSelectionChanged. Enum: TabPanel.ContentUpdateReason

Tooltip

Hover tooltip

Via component tooltip prop – every Component has it

Portlet

Dashboard card

title, description, collapsible container

Skeleton

Loading placeholder

Skeleton.Table, width/height for loading states

Link

Anchor element

url, content – standard hyperlink

Image

Image display

image (ImageMetadata), alt

ListView

Rich data list

ListView.ofStaticData(), layout config, search

DatePicker

Date input

date, onDateChanged, withTimePicker for datetime

Switch

Toggle switch

value, onValueChanged – on/off toggle

Popover

Popup content

owner, closing strategy, positioned relative to owner

SplitPanel

Resizable sections

orientation – horizontal or vertical resizable panes

Field

Form field wrapper

label, control (the input component), mode (EDIT/VIEW), mandatory, orientation (HORIZONTAL/VERTICAL), size (AUTO/SMALL/MEDIUM/LARGE/XLARGE/XXLARGE/STRETCH). Use Field.Mode.EDIT for editable forms, Field.Mode.VIEW for read-only display

FieldGroup

Grouped fields

title, collapsed, collapsible, color (FieldGroup.Color: THEMED/NEUTRAL) – wraps related Field components with a section header

TextArea

Multi-line text input

text, onTextChanged, placeholder, maxLength, resizable (TextArea.ResizeDirection) – use instead of TextBox when users need multi-line input

RadioButtonGroup

Radio button group

selectedData, onSelectionChanged, columns – use RadioButton children with label, data, value props

Banner

Inline alert/feedback

title, content, color – Banner.Color: BLUE, BLUE_DARK, GREEN, ORANGE. Use Banner.Color.GREEN for success, Banner.Color.ORANGE for warning

GrowlPanel

Toast notification container

position, messages – add to root layout; manages all toast messages. Use once per SPA shell. Imperative: growlPanelRef.current.add(msg)

GrowlMessage

Single toast message

title, content, type (INFO/SUCCESS/WARNING/ERROR), showCloseButton – add to a GrowlPanel

AccordionPanel

Collapsible sections

items (AccordionPanelItem children with label, icon, collapsed), multiple (allow multiple open), fullyCollapsible. Enum: AccordionPanel.Orientation: VERTICAL/HORIZONTAL

Pagination

Page navigation

selectedPageIndex, pages, rowsPerPage, rowsCount. Event: onPageSelected. Enum: Pagination.RowsCounter: COMPLETE/TOTAL/UNKNOWN/CUSTOM/NONE

ToolBar

Action button container

components, children, orientation, wrap. ToolBarGroup groups related tools with spacing. Enum: ToolBar.VisualStyle: SMALL/MEDIUM/LARGE/XLARGE/PLAIN

Menu

Dropdown menu

items (MenuItem/MenuGroup children), orientation, size. MenuItem has label, icon, action. Enum: Menu.ItemType: MENU_ITEM/ITEM/GROUP

MenuButton

Button with dropdown

label, icon, menu (Menu component). Combines Button + Menu in one component. Search component.d.ts for full props

FilterPanel

Filter container

values, activeFilters, showClearAll, onFiltersChanged. Contains FilterChip children. Enum: FilterPanel.Orientation: VERTICAL/HORIZONTAL

FilterChip

Single filter input

label, selectedValue, picker (dropdown/listbox picker), onValueChanged, onValueAccepted. Enum: FilterChip.Size: SMALL/MEDIUM

MultiselectDropdown

Multi-value dropdown

selectedItems, dataSource, empty, mandatory, onSelectionChanged. Enum: MultiselectDropdown.VisualStyle: STANDALONE/EMBEDDED/REDWOOD_FIELD

Stepper

Multi-step wizard

items (StepperItem children with label, description, done, disabled), selectedStepIndex, orientation, onSelectionChanged. Enum: Stepper.Reason: CALL

Breadcrumbs

Navigation trail

items (BreadcrumbsItem with label, url/route, icon), expanded, expandStrategy. Enum: Breadcrumbs.ExpandStrategy: EXPAND/MENU/NONE

Prop	Type	Description
`dataSource`	ArrayDataSource	Data provider
`columns`	ColumnDefinition[]	Column definitions
`columnStretch`	Boolean	Stretch columns to fill width (writable)
`rootStyle`	Object	Inline CSS on root element
`dataRowHeight`	Number (px)	Row height (`rowHeight` is silently ignored)
`highlightRowsOnHover`	Boolean	Hover highlighting
`maxViewportHeight`	Number (px)	Max height before internal scroll
`maxViewportWidth`	Number (px)	Max width before horizontal scroll
`editable`	Boolean	Enables cell editing (required for CHECK_BOX/DROPDOWN columns)
`editingMode`	`CELL`, `ROW`	Cell vs row editing mode (constructor-only)
`stripedRows`	Boolean	Alternating row stripes (constructor-only)
`multiColumnSort`	Boolean	Multi-column sort support (constructor-only)
`allowUnsort`	Boolean	Allow unsort back to natural order (constructor-only)
`preload`	`ALL`, `VISIBLE`, `NONE`	Virtualization preload strategy (constructor-only)
`showHeader`	Boolean	Show/hide header row (writable)
`placeholder`	String or Component	Empty grid placeholder (writable)
`paging`	Boolean	Enable pagination (writable)
`pageSize`	Number	Rows per page (writable)
`pageNumber`	Number	Current page (writable)
`sortable`	Boolean	Enable column sorting (writable)
`onSort`	SortCallback	Sort event handler

Property	Type	Description
`name`	String	Column ID
`type`	ColumnType enum	Column type (TEXT_BOX, TEMPLATED, DROPDOWN, etc.)
`binding`	String	Data field binding
`label`	String	Header label
`width`	Number	Initial pixel width (also serves as proportional weight for stretch)
`maxWidth`	Number	Maximum pixel width (set to 9999 to allow stretch)
`minWidth`	Number	Minimum pixel width
`editable`	Boolean	Column-level editability
`sortable`	Boolean	Column-level sortability
`content`	Callback	TEMPLATED column render function: `(args) => JSX`
`stretchFactor`	Number	Relative stretch weight (alternative to width)
`stretchable`	Boolean	Whether column participates in stretching
`horizontalAlignment`	`LEFT`, `CENTER`, `RIGHT`, `STRETCH`	Cell content alignment
`verticalAlignment`	`TOP`, `CENTER`, `BOTTOM`, `STRETCH`	Cell vertical alignment
`inputMode`	`DEFAULT`, `EDIT_ONLY`	When editable widgets are shown
`mandatory`	Boolean	Mandatory field indicator
`customizeCell`	Callback	Per-cell customization function
`visibility`	VisibilityBreakpoint enum	Responsive column visibility

Enum	Values	Access
`DataGrid.ColumnType`	`ACTION`, `CHECK_BOX`, `DATE_PICKER`, `DETAIL`, `DROPDOWN`, `GRAB`, `LINK`, `MULTI_SELECT_DROPDOWN`, `SELECTION`, `TEMPLATED`, `TEXT_AREA`, `TEXT_BOX`, `TIME_PICKER`, `TREE`	Column `type` prop
`DataGrid.InputMode`	`DEFAULT`, `EDIT_ONLY`	Column/grid `inputMode`
`DataGrid.EditingMode`	`CELL`, `ROW`	Grid `editingMode`
`DataGrid.SortDirection`	`NONE`, `ASCENDING`, `DESCENDING`	Column sort
`DataGrid.CursorVisibility`	`FOCUS`, `ALWAYS`	Grid `cursorVisibility`
`DataGrid.Preload`	`ALL`, `VISIBLE`, `NONE`	Grid `preload`
`DataGrid.VisualStyle`	`DEFAULT`, `EMBEDDED`	Grid visual style
`DataGrid.RowSection`	`HEADER`, `BODY`, `FOOTER`	Row pinning target
`DataGrid.ColumnSection`	`LEFT`, `BODY`, `RIGHT`	Column section
`DataGrid.SizingStrategy`	`MANUAL`, `INITIAL_WIDTH`	Auto-size strategy
`GridColumn.HorizontalAlignment`	`LEFT`, `CENTER`, `RIGHT`, `STRETCH`	Column alignment
`GridColumn.VerticalAlignment`	`TOP`, `CENTER`, `BOTTOM`, `STRETCH`	Column vertical alignment
`GridColumn.VisibilityBreakpoint`	`XX_SMALL`, `X_SMALL`, `SMALL`, `MEDIUM`, `LARGE`, `X_LARGE`	Responsive visibility

Event	Fires When	Access
`DataGrid.Event.CELL_UPDATE`	Cell value changes	`on={{ [DataGrid.Event.CELL_UPDATE]: handler }}`
`DataGrid.Event.ROW_UPDATE`	Row added/removed/moved	Row lifecycle
`DataGrid.Event.COLUMN_UPDATE`	Column changes	Column lifecycle
`DataGrid.Event.ROW_SELECTION_CHANGED`	Row selection changes	Selection tracking
`DataGrid.Event.CURSOR_UPDATED`	Cursor moves	Cursor tracking
`DataGrid.Event.SORT`	Sort direction changes	Sort handling
`DataGrid.Event.SCROLLABILITY_CHANGED`	Scroll state changed	Scroll tracking
`DataGrid.Event.DATA_BOUND`	Data binding complete (inherited)	Data lifecycle

netsuite-uif-spa-reference

خيارات التثبيت

مراجعة ملفات المصدر

NetSuite UIF Reference

When to Use

Reference Data

NetSuite UIF Reference

When to Use

Reference Data

Lookup Instructions

Key Classes Quick Reference

@uif-js/core

@uif-js/component

Global Component Enums

GapSize

InputSize

VisualizationColor

Known Pitfalls from Production Experience

UIF Date

StackPanel

Modal Placement

Badge

DataGrid

Select / Dropdown

Modal

MenuButton

General

Store / State Management

useEffect / Async Cleanup

DataGrid – TreeDataSource

Form Building

User Feedback (Banner / Growl)

FilterPanel

Immutable State Updates

Component API Quick Reference – DataGrid

DataGrid Props

DataGrid Column Definition

DataGrid Enumerations

DataGrid Events

SafeWords

netsuite-uif-spa-reference

معلومات المصدر

خيارات التثبيت

مراجعة ملفات المصدر

المزيد من هذا المستودع

المزيد من هذا المستودع

NetSuite UIF Reference

When to Use

Reference Data

NetSuite UIF Reference

When to Use

Reference Data

Lookup Instructions

Key Classes Quick Reference

@uif-js/core

@uif-js/component

Global Component Enums

GapSize

InputSize

VisualizationColor

Known Pitfalls from Production Experience

UIF Date

StackPanel

Modal Placement

Badge

DataGrid

Select / Dropdown

Modal

MenuButton

General

Store / State Management

useEffect / Async Cleanup

DataGrid – TreeDataSource

Form Building

User Feedback (Banner / Growl)

FilterPanel

Immutable State Updates

Component API Quick Reference – DataGrid

DataGrid Props

DataGrid Column Definition

DataGrid Enumerations

DataGrid Events

SafeWords