← Hub -- NetSuite Forms & UI Components
v10.0
01 NS Buttons Primary, Secondary, Danger, Approve, Reject, and utility buttons in GFS brand style
Primary Actions
Secondary Actions
Danger Actions
Approval Actions
Utility Actions
Button Groups
Sizes
All buttons use IBM Plex Mono. Primary = cobalt bg. No border-radius > 2px. Disabled = 40% opacity.
02 NS Field Types All NetSuite field types with labels, help text, and validation states
Internal ID: companyname. Max 83 characters.
Enter whole number. Decimals not permitted.
USD currency. Auto-formatted on blur.
MM/DD/YYYY format in NetSuite.
Read-only system field. Auto-populated on creation.
Record-level subsidiary. Cannot be changed after save.
Northeast x Mid-Atlantic x Southeast x
Hold Ctrl/Cmd to select multiple.
Max 4000 characters. Appears on printed documents.
US format auto-applied on blur.
Primary email for transactional communications.
Enter as decimal. Auto-formatted to 3 places.
Click to upload or drag image here
PNG, JPG, GIF -- max 5MB

Premium barrel cheddar sourced from Bongards Creameries in Perham, MN. USDA inspected, 40 lb blocks, moisture content 35%.

Validation States
This field is required.
Record found.
All fields use 1px border, no rounded corners > 2px. Currency and percent fields use Plex Mono for alignment. Required fields marked with red asterisk.
03 NS Tables Sublist, search results, matrix, and pivot table patterns with sort, filter, pagination, inline edit
Sublist Table (Line Items)
# Item ▲ Description Qty Rate Amount Tax
1 CHED-BBL-40 Bongards Barrel Cheddar 40lb $1.8425 $921.25 8.625%
2 MOZZ-LMWM-6 Low-Moisture Whole Milk Mozzarella 6lb $2.3150 $463.00 8.625%
3 PROV-SLC-10 Provolone Sliced 10lb $3.0500 $457.50 8.625%
SUBTOTAL $1,841.75
+ Add Line Item
Search Results Table
Date ▼ Type Number Entity Memo Status Amount
05/18/2026 Sales Order SO-41892 Good Eats Grocery Weekly cheddar restock Pending Approval $12,847.50
05/17/2026 Invoice INV-38201 Metro Deli Supply Provolone + Swiss shipment Open $8,421.00
05/16/2026 Purchase Order PO-29441 Bongards Creameries Barrel cheddar - CME+0.0350 Approved $45,200.00
05/15/2026 Sales Order SO-41877 Campus Foods Inc Mozzarella order - USDA Fulfilled $22,100.00
05/14/2026 Credit Memo CM-5891 Northeast Provisions Quality return - lot 2026-138 Closed ($3,450.00)
Showing 1-5 of 247 results
Matrix Table
Product \ Region Northeast Southeast Midwest West Total
Barrel Cheddar $124K $89K $201K $67K $481K
Mozzarella $198K $145K $112K $88K $543K
Provolone $56K $42K $31K $28K $157K
Total $378K $276K $344K $183K $1,181K
Pivot Table
Vendor Q1 2026 Q2 2026 Q3 2026 Q4 2026 YTD vs Prior
Bongards $312K $401K -- -- $713K +14.2%
Saputo $189K $224K -- -- $413K -3.8%
Leprino $445K $398K -- -- $843K +7.1%
Tables use 2px cobalt border under header. Inline edit on hover. Sort arrows indicate column state. Pagination shows total result count.
04 NS Tabs Main/subtab navigation, vertical tabs, horizontal tabs, nested tabs
Horizontal Main Tabs
General
Communication
Financial
System Info
Custom
General tab content -- primary fields, entity info, classification.
Communication tab -- messages, notes, phone calls, activities.
Financial tab -- A/R, A/P, payment terms, credit limit.
System info -- created/modified dates, internal ID, audit trail.
Custom fields -- GFS-specific fields, segments, pricing tiers.
Subtabs (Nested)
Items
Shipping
Billing
Line Items
Expense Lines
Lot Numbers
Nested subtab content area. Used for line item detail views.
Vertical Tabs
Company
Contacts
Addresses
Relationships
Preferences
Company Information
Main tabs = 2px cobalt bottom border on active. Subtabs = 1px tufts. Vertical tabs = left border highlight. All tabs collapse on mobile.
05 NS Status Badges Transaction lifecycle states with colored indicators
Open Pending Approval Approved Partially Fulfilled Fulfilled Closed Voided Rejected Draft On Hold
In-Context Usage
Transaction Status Meaning
Sales OrderPending ApprovalAwaiting manager sign-off before fulfillment
Purchase OrderApprovedCleared by purchasing dept, ready to send to vendor
InvoiceOpenSent to customer, payment not yet received
Item FulfillmentPartially FulfilledSome lines shipped, remaining on backorder
Journal EntryVoidedReversed, no longer affects GL balances
Each badge has a dot indicator matching its color. Badges use 10px Plex Mono uppercase. Border and background use semantic color variables.
06 NS Alerts Info, Success, Warning, Error, and System notification bar
i
Information
This record was created from Sales Order SO-41892. Changes will not propagate to the source transaction.
✓
Success
Record saved successfully. Internal ID: 847291. Transaction number: INV-38202.
!
Warning
Customer credit limit exceeded. Current balance: $142,800. Credit limit: $125,000. Approval required to proceed.
✗
Error
Validation failed: "Quantity" must be greater than 0 on line 3. "Ship Date" is required for fulfilled orders.
System maintenance scheduled for 05/25/2026 02:00-04:00 AM EST. NetSuite will be unavailable during this window.
Alerts use semantic color backgrounds. System bar uses cobalt bg with white text. All alerts are dismissible via the close button.
07 Entry Form Standard 2-column transaction entry with header fields, body fields, line items sublist, communication tab, system info
Sales Order
SO-41893 | Customer: Good Eats Grocery | Date: 05/18/2026
Draft
Primary Information
Items
Shipping
Communication
System Info
# Item Description Qty Rate Amount
1 CHED-BBL-40 Bongards Barrel Cheddar 40lb 500 $1.8425 $921.25
2 MOZZ-LMWM-6 Low-Moisture WM Mozzarella 6lb 200 $2.3150 $463.00
SUBTOTAL $1,384.25
Subtotal:$1,384.25
Tax (8.625%):$119.39
Total:$1,503.64
Communication sub-list: messages, phone calls, notes, tasks, events attached to this transaction.
Standard NS entry form: 3px cobalt header border, 2-column header fields, tabbed body with line items, summary area, action bar at bottom.
08 Mass Update Form Criteria filters, preview results, apply changes, confirmation
Mass Update: Update Department on Sales Orders
Bulk-modify records matching criteria below
Step 1: Set Criteria
to
Step 2: Preview (47 records matched)
!
47 records will be modified. This action cannot be undone. Review the preview below before proceeding.
Number Customer Current Dept New Dept Amount
SO-41201Good Eats GroceryUnassignedCommodity Cheese$8,420.00
SO-41208Metro Deli SupplyUnassignedCommodity Cheese$3,150.00
SO-41215Campus Foods IncUnassignedCommodity Cheese$12,800.00
Showing 3 of 47 records
Step 3: Set New Value
Mass updates follow a 3-step wizard: criteria, preview, apply. Warning alert before execution. Checkbox per row allows exclusion.
10 KPI Scorecard Metric cards with trend indicators, thresholds (red/yellow/green), comparison vs target and prior period
Revenue MTD
$1.24M
Target: $1.10M
▲ +12.7% vs target
Orders Pending
47
Threshold: < 30
▲ +56% vs prior month
Fill Rate
96.4%
Target: 95%
▲ +1.4pp vs target
A/R Past Due
$142K
Threshold: < $80K
▼ -8.3% vs prior month
Comparison Cards (vs Prior Period)
Gross Margin
Current
24.8%
+2.1pp
Prior
22.7%
Avg Order Value
Current
$8,420
-$310
Prior
$8,730
Customer Count
Current
128
+14
Prior
114
KPI cards show value, target, trend, and progress bar. Threshold colors: green (on/above target), yellow (caution), red (below target). Plex Mono for all numeric values.
11 Portlet Widget Small dashboard widgets: list, chart, KPI, shortcut, and search portlets
Recent Sales Orders
Key Metrics
Revenue MTD $1.24M
Open Orders 47
Fill Rate 96.4%
A/R Balance $142K
Quick Links
+New SO +New PO +New Invoice QSearch RReports DDashboard
Revenue by Month (2026)
Jan
Feb
Mar
Apr
May
Quick Search
Portlets have a header bar (fog bg) with title and action buttons. Body is padded. Used on NS dashboards. Each portlet is independently configurable.
12 Center/Tab Layout How NS organizes pages into Centers, Categories, and Pages
Home
Transactions
Reports
Lists
Setup
Customization
Sales
Purchases
Finance
Inventory
Payroll
NS navigation hierarchy: Center (cobalt bar) > Category (fog bar) > Pages (link grid). Centers map to roles. Categories organize by function.
13 Suitelet Input Form Data entry form with validation, submit, back button and GFS branded header
CME Pricing Entry
Global Food Solutions -- Suitelet
v2.1 | Script ID: customscript_gfs_cme_entry
i
Enter the weekly CME barrel cheddar settle price. This will update pricing on all open POs tied to CME-indexed contracts.
Select the Friday that closes the CME trading week.
Per-pound settle price. 4 decimal places required.
Suitelet forms use GFS cobalt header with title and script ID. Footer has back + action buttons. Body follows standard 2-column field layout.
14 Suitelet List View Paginated list with search, sort, filter, bulk actions
Vendor Rebate Tracker
Global Food Solutions -- Suitelet
2 selected
Vendor Program Tier Period Status Target Actual Rebate Due
Bongards Volume Incentive Tier 3 Q2 2026 Active $500K $401K $14,035
Saputo Growth Bonus Tier 2 Q2 2026 Active $300K $224K $6,720
Leprino Annual Rebate Tier 1 2026 Annual Active $800K $398K $7,960
Great Lakes Early Pay Discount Flat Q1 2026 Expired $200K $178K $3,560
Showing 1-4 of 12 programs
Suitelet list views: search + filter bar at top, bulk action row (appears when items selected), sortable table, pagination in footer.
15 Suitelet Chart View ECharts integration within suitelet frame with date range and dimension pickers
Sales Analytics Dashboard
Global Food Solutions -- Suitelet
to
Total Revenue
$4.82M
▲ +11.3% YoY
Avg Margin
24.1%
▲ +1.8pp YoY
Order Count
1,247
-- 0% YoY
ECharts Container
Revenue by Product x Month | Bar + Line composite chart
Loaded via: echarts.init(document.getElementById('chart-container'))
Data refreshed: 05/18/2026 9:31 AM | Source: NetSuite SuiteQL
Chart suitelets: control bar for date/dimension/grouping, KPI summary row above chart, ECharts container div, data-refresh timestamp in footer.
16 Client Script UI Field validation, dynamic show/hide, cascading selects, calculated fields
Field Validation (Client-Side)
Credit check passed. Available: $82,200.
Quantity must be greater than 0. (Client Script: validateField)
Dynamic Show/Hide
Shown when method = LTL Freight. Hidden for Customer Pickup.
Shown for LTL and Parcel. Hidden for Pickup.
Cascading Selects
Options filter based on Category selection.
Options filter based on Product Type selection.
Calculated Fields
Auto-fetched from CME weekly data.
= Base Rate + Margin Adder. Recalculates on change.
Client scripts enhance standard forms. Indicators show which fields are validated, dynamic, cascading, or calculated. All logic runs in fieldChanged / validateField / saveRecord events.
17 Workflow Action Form Approval/rejection form with comments, routing history, SLA indicator
Workflow Action: Purchase Order Approval
PO-29441 | Bongards Creameries | $45,200.00
Pending Approval
SLA 6h 42m remaining
Due: 05/18 4:00 PM
Record Summary
Vendor
Bongards Creameries
Amount
$45,200.00
Requested By
Michael Levine
Department
Commodity Cheese
Memo
Barrel cheddar - CME+0.0350
Ship Date
05/22/2026
Routing History
Date
Action
User
Status
05/16 9:15 AM
Submitted for approval
Michael Levine
Completed
05/16 2:30 PM
Approved (Level 1 - Dept Manager)
Sarah Chen
Completed
05/18 9:18 AM
Awaiting Level 2 - Finance
Pending
In Progress
Your Action
Workflow actions: SLA bar at top (green/yellow/red by time remaining), record summary, routing history table, decision radio + comments, submit button.
18 Approval Form Multi-level approval chain visualization, current approver highlight, approve/reject/delegate buttons
Approval Chain: PO-29441
Bongards Creameries | $45,200.00 | Barrel Cheddar
SLA 6h 42m
Approval Chain
✓
Michael Levine
Requestor
05/16 9:15 AM
✓
Sarah Chen
Dept Manager
05/16 2:30 PM
3
David Park
Finance Dir
Pending
4
CFO
Final Approval
--
Approval Rules Applied
Rule Condition Result
PO > $10K Amount = $45,200 > $10,000 Triggered
PO > $25K Amount = $45,200 > $25,000 Triggered
PO > $50K Amount = $45,200 < $50,000 Not Required
Action (David Park)
Approval chain shows completed (green check), current (cobalt highlight + ring), and pending (gray) steps. Rules table shows which thresholds triggered each level.
19 2-Column Layout Standard record layout with label-left, field-right
Standard 2-Column Record
CSS: .ns-2col { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4); }
2-column layout is the standard for NS record forms. Use ns-fullwidth to span both columns. Label sits above field, not inline (differs from native NS).
20 3-Column Layout Compact layout for many fields
Compact 3-Column Form
CSS: .ns-3col { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-4); }
3-column layout for dense field areas like line item detail or transaction classification. Collapses to 1 column on mobile.
21 Full-Width Layout For sublists and detail views
Line Items
# Item Description Qty UOM Rate Amount Location Tax
1 CHED-BBL-40 Bongards Barrel Cheddar 40lb block, USDA inspected 500 LB $1.8425 $921.25 EDG 8.625%
2 MOZZ-LMWM-6 Low-Moisture Whole Milk Mozzarella 6lb log 200 LB $2.3150 $463.00 HRM 8.625%
Subtotal:$1,384.25
Discount:($0.00)
Tax:$119.39
Shipping:$0.00
Total:$1,503.64
Full-width layout for sublists: toolbar above table, table spans entire width, summary totals right-aligned in footer. Use column width percentages for predictable alignment.
22 Responsive Breakpoints How NS forms adapt to tablet/phone
Breakpoint Definitions
Breakpoint Width Layout Changes
Desktop > 1024px Full layout 2-3 column grids, horizontal tabs, full table columns, side-by-side portlets
Tablet 768 - 1024px Adapted 2-column grids preserved, tabs wrap, table horizontal scroll, portlets stack to 2-col
Phone < 768px Stacked All grids collapse to 1-col, vertical tabs become horizontal, action buttons stack, tables scroll
Small Phone < 480px Minimal Button groups stack vertically, shortcut grid 1-col, form actions full-width, reduced padding
Responsive Behavior Examples
DESKTOP >1024px
TABLET 768-1024px
PHONE <768px
CSS Media Queries Used
@media (max-width: 768px) { .ns-2col, .ns-3col { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .ns-tabs { flex-wrap: wrap; } .ns-tab { flex:1; text-align:center; } }
@media (max-width: 768px) { .ns-tabs-vertical { flex-direction: column; } }
@media (max-width: 768px) { .ns-approval-chain { flex-direction: column; } }
@media (max-width: 480px) { .ns-form-actions { flex-direction: column; } .ns-btn { justify-content: center; } }
All NS form components use CSS grid with minmax(0,1fr). Breakpoints at 1024/768/480px. Tables get horizontal scroll on narrow screens. Always test at all breakpoints.
← Back to Hub · GFS Design System v10.0 · Global Food Solutions, Inc. · Edgewood, NY