2Wee

Screen Layouts ​

Summary ​

The five screen layouts that the 2Wee client can render: Menu, List, Card, HeaderLines, and Grid.

Purpose ​

Every ScreenContract has a layout field that determines how the client renders it. The server chooses the layout. The client does not decide.

Navigation menu with tabs and items.

  • Horizontal tab navigation (Left/Right)
  • Vertical item navigation (Up/Down)
  • Enter opens the selected item
  • The top_left and top_right fields display app name and user info
┌──────────────────────────────────────────────┐
│ 2Wee Demo Server              admin  10-03-26│
├──────────────────────────────────────────────┤
│ [Sales]  Purchasing  Warehouse  Financial    │
├──────────────────────────────────────────────┤
│  > Customers                                 │
│    Sales Orders                              │
│    Posted Invoices                           │
└──────────────────────────────────────────────┘

List ​

Full-screen scrollable table for browsing records.

  • Up/Down to move between rows
  • Enter opens the selected record
  • Type-to-search: any printable character starts filtering
  • Home/End jumps to first/last row
  • PageUp/PageDown scrolls
┌─ Customers ──────────────────────────────────────────────┐
│ No.       Name                          Balance          │
│ ───────── ───────────────────────────── ──────────────── │
│ 10000     The Cannon Group              45,000.00        │
│ 20000     Selangorian Ltd.              12,500.00        │
│ 30000     John Haddock Insurance        0.00             │
└──────────────────────────────────────────────────────────┘

Card ​

Single-record form with sections and fields.

  • Fields organized in sections
  • Sections positioned on a 2D grid using column and row_group
  • Tab/arrow navigation between fields
  • Select mode and edit mode for each field
  • Ctrl+S saves, Esc returns to the list
┌─ General ─────────────────────┐  ┌─ Communication ────────────────┐
│ No............. [10000       ]│  │ Phone........ [+45 70 10 20 30]│
│ Name........... [Cannon Group]│  │ E-Mail....... [ap@cannon.test ]│
│ Balance (LCY).. [45,000.00   ]│  │ Web.......... [www.cannon.test]│
└───────────────────────────────┘  └────────────────────────────────┘

Section layout ​

row_group 0:  [column 0: General]  [column 1: Communication]
row_group 1:  [column 0: Posting]  [column 1: Payments]

Dot-padded labels ​

Labels are left-aligned, followed by dots, then the input box. All input boxes in a section start at the same X-coordinate:

Customer No....... [10000            ]
Name.............. [The Cannon Group ]
Balance (LCY)..... [45,000.00        ]

HeaderLines ​

A Card with an attached editable grid for line items. Used for documents like Sales Orders and Purchase Orders.

How it works ​

  1. Card opens normally — all header fields visible
  2. Ctrl+L opens the lines overlay (editable grid drawn on top of the card's lower portion)
  3. Grid has its own cell-level focus and navigation
  4. Esc in the grid closes the overlay and returns to card navigation
  5. Ctrl+S saves both header fields and grid changes together

lines_overlay_pct ​

Controls how much of the screen the grid covers:

ValueResult
0Not used (for Card/List layouts)
0–100Overlay covers this percentage of the body
Default50

If lines_open is set on the ScreenContract, the overlay opens automatically when the screen loads. Otherwise the user opens it with Ctrl+L.

For full-screen editable grids without a card, use the Grid layout instead.

Grid ​

A full-screen editable grid for batch data entry. Used for payment journals, general ledger posting, and other tabular workflows.

How it works ​

  1. Grid is the primary content — no card, no overlay toggle
  2. All grid navigation and editing works the same as HeaderLines grids
  3. Esc goes straight back to the previous screen
  4. Ctrl+S saves the grid data
  5. Ctrl+A opens the action picker (e.g., Post Journal, Export)
  6. Optional totals footer shows server-computed summary values
┌─ Banking Journal ────────────────────────────────────────────────────────┐
│ Posting Date Document Type Document No. Acc. Type Account No. Desc… │
│ ─────────── ───────────── ──────────── ───────── ─────────── ────── │
│ 16-03-2026  Payment       PAY-001      Customer  10000       Acme…  │
│ 16-03-2026  Invoice       INV-100      Customer  20000       Sela…  │
│                                                                      │
│                           Balance: 700.00   Total Balance: 700.00    │
├──────────────────────────────────────────────────────────────────────┤
│ Ctrl+S Save  F3 Insert  F4 Delete  Ctrl+A Actions  Esc Close        │
└──────────────────────────────────────────────────────────────────────┘

The server can include a totals array on the ScreenContract with label+value pairs. These are rendered right-aligned in a row between the grid and the bottom bar.