oracle/netsuite-suitecloud-sdkSee repository3 files

Netsuite Uif Spa Reference

Name: Netsuite Uif Spa Reference
Availability: InStock
Author: oracle

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).

Use this skill View repository View on skills.sh

Specification

Skill ID: oracle/netsuite-suitecloud-sdk/netsuite-uif-spa-reference
Publisher: oracle
Repository: netsuite-suitecloud-sdk
Installs: 0
Files: 3
License: See repository
Synced: Sep 23, 2026

How to use it

Open any RiverX project, open the Skills panel in the chat, and search for this identifier. The files are fetched from the source repository at install time.

oracle/netsuite-suitecloud-sdk/netsuite-uif-spa-referenceInstalls these files

SKILL.md
references/component.d.ts
references/core.d.ts

What this skill tells the agent

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`	`@uif-js/core`	Core framework: Date, ArrayDataSource, Ajax, Router, useState, useEffect, Context, etc.
`references/component.d.ts`	`@uif-js/component`	UI components: DataGrid, StackPanel, Button, Text, Badge, Heading, Card, ContentPanel, Modal, etc.

Lookup Instructions

To find information about a specific class or component:

Search by class name: `` Search for class Date in the local references/ directory. ``

Search by method name: `` Search for lastOfMonth, firstOfMonth, or addDay in references/core.d.ts. ``

Search by enum: `` Search for enum GapSize, enum Hierarchy, or enum Type in references/component.d.ts. ``

Read a section: Once you find the line number, open that part of the file to view the full definition.

Key Classes Quick Reference

@uif-js/core

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`

@uif-js/component

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`

Use this skill in a project

Open any RiverX project, search the Skills panel for oracle/netsuite-suitecloud-sdk/netsuite-uif-spa-reference, and install it in one click.

Use this skill