PowerSeller80 UI/UX Analysis
A detailed analysis of the user interface and user experience patterns extracted from PowerBuilder source files (.srw, .srd, .srm, .sru).
Application Shell
PowerSeller uses a Multiple Document Interface (MDI) frame. The main window (w_pwrsell inheriting from w_sys_frame) hosts all child windows as layered sheets within a single parent frame.
Frame Layout
- Menu bar at top with 14 domain-organized menus
- Contemporary-styled toolbar with gradient backgrounds and custom icons
- MDI client area filling the center (child windows tile and cascade here)
- Microhelp status bar at bottom showing contextual help for hovered menu items
Menu Structure
| Menu | Accelerator | Toolbar Icon | Domain |
|---|---|---|---|
| File | — | custom050! | Import, export, queries, macros, companies, contacts |
| Pipeline | — | pipe.gif | Loans, instruments, agreements, reservations, underwriting |
| Pools | F4 (Open) | pool.gif | Pool maintenance, run pools, pooling criteria |
| Risk | F5 (Analyze) | riskscal.gif | Risk analysis, what-if, profiles, rate cones, SFAS |
| Pricing | F6 (BestEx) | pricetag.gif | Best execution, price sources, feature adjustments |
| Securities | F7 (Open) | — | Security maintenance, settlement calendar |
| Trades | F8 (Open) | — | Trade maintenance, designation, settlement |
| Shipping | F10 (DocTrack) | — | Document tracking, shipment tasks |
| Setup | — | — | System configuration |
| Utilities | — | — | Archive, database tools |
| Access | — | — | User management, security groups |
| Plugins | — | — | Dynamically built from registered plugins |
| Window | — | — | MDI window management (tile, cascade) |
| Help | — | — | About, help topics |
Keyboard Shortcuts
| Key | Action |
|---|---|
| F2 | VMD Queries |
| F3 | File Import |
| F4 | Pools - Open All |
| F5 | Risk - Analyze Risk |
| F6 | Pricing - Best Execution |
| F7 | Securities - Open |
| F8 | Trades - Open All |
| F9 | Pipeline - Best Efforts |
| F10 | Shipping - Document Tracking |
| Alt+F4 | Exit |
Window Hierarchy
All windows derive from a small set of ancestor classes:
Three Core UI Patterns
Pattern 1: Pick/Search Window
The primary navigation window for finding and selecting entities. Used for trades, pools, instruments, counterparties, and all other searchable records.
Layout (top to bottom):
| Zone | Height | Content |
|---|---|---|
| Search specification | 240 PBU | Dropdown to select search object (which columns to show), plus criteria |
| Search restriction | 224 PBU | Editable filter row matching result columns — type values and press Enter |
| Results grid | ~1232 PBU | Sortable, multi-select grid with clickable column headers |
| Status bar | 80 PBU | Keyboard search text, selected count, row position |
Interaction Model:
- Click column headers to sort (active column gets bold + 3D raised border)
- Click = select one row; Shift+Click = range select; Ctrl+Click = toggle individual
- Double-click or Enter opens the selected entity
- Typing characters performs incremental search in the active column
- Right-click opens a context menu with entity-specific actions
- Sort order persists across sessions via user preferences
Pattern 2: Data Entry Sheet (Module Window + Tabs)
The primary data entry window for viewing and editing entity details. Opens from the pick window.
Layout (top to bottom):
| Zone | Height | Content |
|---|---|---|
| dw_sheet (header) | ~50% | Freeform data entry form with label-value pairs in 2-3 columns |
| tab_mod_win (detail) | ~50% | Tab control with context-specific tab pages |
Characteristics:
- The form uses a 3-column layout of label-value pairs
- Fields are color-coded by editability (white = editable, gray = read-only, yellow = foreign key lookup)
- Tab pages each host their own DataWindow (grid or freeform)
- Tab count varies: Trade Maintenance has 4 tabs; Pool Maintenance has 12 tabs
- Window opens maximized within the MDI frame
- Security level (read-write / read-only / no-access) is checked on open and enforced recursively
Pattern 3: Modal Dialog
Action-oriented windows for operations like running pools, settling trades, or configuring parameters.
Two sub-variants:
Right-side buttons (ancestor default):
| Zone | Content |
|---|---|
| Left ~75% | DataWindow or Available/Assigned dual-list |
| Right ~25% | Vertical button stack: Delete, Save, Help, OK, Cancel |
Bottom button bar (descendant override):
| Zone | Content |
|---|---|
| Top ~90% | Content area (DataWindows, progress display) |
| Bottom ~10% | Horizontal button row: Run, Unpool, Help, Close |
Visual Design System
Typography
| Element | Font | Size | Weight |
|---|---|---|---|
| All controls | MS Sans Serif | 8pt | 400 (normal) |
| Active sort column headers | MS Sans Serif | 8pt | 700 (bold) |
| Menus | Tahoma | 8pt | 400 |
There is essentially zero font variation across the entire application. This is a classic utilitarian enterprise UI.
Color Palette
| Color | Hex/RGB | PB Value | Usage |
|---|---|---|---|
| System gray | OS default | 67108864 | Window backgrounds, DataWindow canvas, read-only fields |
| Dark maroon | #800000 | 8388608 | All labels and column headers |
| White | #FFFFFF | 16777215 | Editable field backgrounds |
| Light yellow | #FFFFC0 | RGB(255,255,192) | Foreign key / lookup field backgrounds |
| Black | #000000 | 0 | Standard data text |
| Dark green | #008000 | 33554432 | Risk analytics data text |
| Red | #FF0000 | 255 | Error/warning labels, settlement dates in calendar |
| Dark gray | #808080 | RGB(128,128,128) | Weekend/holiday cells in calendar |
| Transparent | — | 553648127 | Checkbox backgrounds, read-only overlay |
Field Color Coding Convention
| Background Color | Meaning |
|---|---|
| White | Editable — user can type here |
| Gray (system) | Read-only / protected — display only |
| Light yellow | Foreign key lookup — has a dropdown DataWindow |
| Transparent | Checkbox or label overlay |
Control Sizes
| Control | Width x Height (PBU) |
|---|---|
| Standard button | 329 x 96 |
| Search specification area | full width x 240 |
| Search restriction row | full width x 224 |
| Status bar fields | ~900 x 80 |
| Tab control | 90% of window width |
Border Styles
| Style | PB Value | Usage |
|---|---|---|
| Lowered/sunken | 5 | Freeform data entry fields |
| None | 0 | Grid/tabular data cells |
| 3D raised | — | Active sort column header |
| Underline | 6 | Tabular column headers |
Edit Control Types
DropDown DataWindow (DDDW)
The most common lookup control. Appears as a text field with a dropdown arrow that opens a searchable list populated from a database query.
Usage: Instruments, counterparties, contacts, users, segments, settlement dates
Properties: Typically allowedit=yes (searchable), vscrollbar=yes, 5-10 visible lines, 125% dropdown width
DropDown ListBox (DDLB)
Simple enumeration dropdown with fixed values.
Usage: Buy/Sell, Security/Whole Loan/Put/Call, Yes/No options
Edit Mask
Formatted input fields with predefined patterns.
| Format | Pattern | Example |
|---|---|---|
| Currency | $###,###,###.00 | $5,000,000.00 |
| Rate (6 decimal) | ##0.000000 | 6.500000 |
| Date | mm/dd/yyyy | 03/16/2026 |
| Percentage | ##0.0##### | 99.500000 |
| Price (10 decimal) | ##0.0######### | 101.5000000000 |
Checkbox
3D-style checkboxes with left-positioned text labels. Values: y/n.
Usage: AOT flag, Phantom indicator, Variance Override, filter toggles
Radio Buttons
Used sparingly — primarily for Buy/Sell in grid views with 2-column layout.
Calendar Picker
Custom-built calendar control (not a native widget):
- 7x6 grid (Sun-Sat x 6 weeks)
- Navigation:
<<<(3 months back),<(1 month),>(1 month),>>>(3 months forward) - Weekends and holidays highlighted in dark gray
- Settlement dates highlighted in red text with security class prefix
- Selected date gets 3D lowered border
- Keyboard: arrow keys navigate days/weeks, PageUp/PageDown change months
Key Screen Layouts
Trade Maintenance (w_trades_open)
MBS Trade Form (d_maint_trade_mbs): A dense 3-column freeform layout spanning ~4,300 PBU wide x 1,136 PBU tall. Contains ~30 fields including:
Left column: Trade ID, Transaction Type (DDLB), Instrument (DDDW), Coupon Rate (EditMask), Trade Amount (EditMask), Trade Price (EditMask), Trade Type (DDLB), Trade Date, Settlement Date
Center column: AOT checkbox, Variance Override checkbox, Tolerance, Price Group (rounded rectangle with green border containing Handle + 32nds + 64ths + 128ths for MBS tick pricing), Date Entered (read-only)
Right column: Investor Commitment ID, Trade Description, Loan Hedged Target (DDDW), Risk Trade Type (DDDW), Phantom checkbox, Segment Name (DDDW), Counterparty (DDDW), Contact (DDDW), Traded By (DDDW), Entered By (read-only), Confirmed By (DDDW), Unit Fees
Tab pages below: Designation Info, Risk Fields, Cash Grid (WL only), Trade Cash Grid (WL only)
Pool Maintenance (w_pools_open)
Pool Form: Similar 3-column freeform header with pool name, instrument, guarantor, settlement dates, coupon rate, tolerance, fees.
12 Tab pages: Available Loans, Securitization Rules, Pool Rules, Pooling Options, Agency Fields, Ginnie Mae, ACH, ARM, Syntax Sources, Pool Syntax, Designation, Certificates
Run Pools (w_run_pools)
Available/Assigned dual-list pattern: Two side-by-side DataWindows. Left shows available pools, right shows selected pools. Drag-and-drop resequencing on the assigned side. Bottom buttons: Run, Unpool, Help, Close.
Pool Loans Progress (w_pool_loans)
Activity log pattern: 3-column tabular display (Activity Description, Start Time, End Time) showing pooling engine progress in real time. All buttons disabled during processing.
Navigation Flow
Event-Driven Lifecycle
Every window follows a consistent event sequence:
Screen Density Assessment
| Screen Type | Fields/Controls | Density | Character |
|---|---|---|---|
| Pick/search lists | 1-3 columns | Low | Clean, scannable |
| Simple grids (rate/price) | 2-3 columns | Low-Medium | Focused data display |
| Activity logs | 3 columns | Medium | Process monitoring |
| Pool maintenance tabs | Varies (5-15 fields) | Medium-High | Detailed configuration |
| Trade maintenance form | 30+ fields, 3 columns | High | Dense professional data entry |
| Phantom trade grid | 15 columns, scrollable | Very High | Power-user spreadsheet |
What's NOT in the Source
| Element | Status | Notes |
|---|---|---|
| Icon/image artwork | Referenced by filename only | Files at S:\PSSource\resource\ (not in repo) |
| Runtime conditional formatting | Set in PowerScript at runtime | Partially readable from event code |
| Pixel-perfect rendering | PBU coordinates, not pixels | Depends on runtime DPI and font metrics |
| Theme appearance | Themes disabled ("Do Not Use Themes") | Renders as classic Win32 controls |
| Splitter/resize behavior | Coded in resize events | Partially extractable from event handlers |
Implications for SaaS Rebuild
Preserve
- Pick → Detail → Tabs navigation hierarchy (maps naturally to list page → detail page → tab panels)
- Color coding convention for editability (white/gray/yellow)
- Function key shortcuts for power users (can map to Ctrl+ shortcuts in web)
- Search/filter-as-you-type in pick lists
- Column sort toggling with visual indicator
- Dual-list available/assigned pattern
Modernize
- MDI frame → tabbed browser-style navigation (each entity opens in a tab)
- MS Sans Serif 8pt → Modern system font (Inter, Segoe UI) with responsive sizing
- Fixed PBU layouts → Responsive CSS Grid/Flexbox layouts
- Custom calendar control → Native date picker or library (date-fns + react-datepicker)
- DDE-based live pricing → WebSocket/SignalR real-time updates
- Right-side button stack → Top action bar or floating action buttons
- System gray background → Light theme with subtle shadows and borders