Dialog Toolbox

Toolbox is a browser-native, cross-platform palette inspired by the WinForms control groups. The 30 entries below work in Studio and runtime dialogs. Each has a distinct local SVG icon, searchable label, click insertion and drag-and-drop.

Inserting and configuring

Use search or expand a group. Click a tool to insert it, or drag onto the form. Dropping inside a container assigns Parent automatically. Clicking while a container is selected inserts a child. Fields reuse an unbound parameter only when its type and control match; otherwise an optional parameterN is created. Combo/list/radio controls start with two editable choices.

Properties configures Caption, Parent, geometry, Anchors, and component-specific settings. Edit parameter / options opens parameter definitions, including labels, help, choices, defaults, Minimum and Maximum.

• Parent accepts Panel, GroupBox or TabPage. TabControl accepts only TabPages. Coordinates are stored in form coordinates. Runtime subtracts the parent position; children must fit inside it.
• Moving a container moves descendants. Resizing applies child anchors. Cycles and invalid bounds are rejected. Deleting a container removes its descendants from the layout without deleting parameter definitions.
• Earlier/Later reorder siblings. Runtime visits each parent then its children.
• LinkLabel URL accepts http, https or mailto; it opens only on user activation.
• PictureBox Resource selects an existing template image (add images through the report's Insert Image workflow). Images are embedded, not remote fetched.
• ProgressBar uses Value 0–100 or a numeric Source path in input data.
• TrackBar (Range) displays the current numeric value beside the slider. Its readout follows both manual input and parameter updates from dialog events.
• DataGridView Source is a dotted array path; at most 100 rows and 20 columns.
• TreeView Source is a dotted data path, or empty for the full data object; display is limited to 200 entries and six levels. Nodes expand/collapse.
• Button Action may be submit, reset, cancel, custom, next or back. Next/Back require a TabPage ancestor. Preview never executes report logic; Generate in a runtime dialog runs the normal report pipeline.

Value contracts

Date: YYYY-MM-DD. Time: HH:mm or HH:mm:ss. Datetime: YYYY-MM-DDTHH:mm or YYYY-MM-DDTHH:mm:ss (local time, no timezone conversion). Color: #RRGGBB. CheckedListBox uses a real JSON string array and TypeScript string[], including [] for missing optional values. Required lists need at least one selection. Choices are exact, unique strings.

Server binding validates dates, times, colors, ranges and choices before TypeScript report handlers execute. Text binding of string arrays joins items with a comma and space; scripts can use array methods to implement custom logic. PasswordBox is not a secret store: values are handled like other parameters and may be included in saved projects.

Compatibility boundaries

This is not the entire Windows Forms class library. Native Windows services (NotifyIcon, SerialPort, BackgroundWorker, native file/print dialogs) are not available in the browser palette. SplitContainer, FlowLayoutPanel/TableLayoutPanel, RichTextBox/RTF and editable DataGridView are not implemented yet. Load/Change/Custom Click support dynamic choices and visible/enabled state. Tab selection supports Page changed events. Back/Next actions navigate existing TabPages; Sequential steps in TabControl Properties requires Next for forward navigation. There are no disabled placeholder tools pretending to implement these controls.

Tabbed forms

Insert TabControl to create a container with two pages. Click a tab header (or select a page/child in the object selector) to edit that page. Insert TabPage while a TabControl or its page is selected to add another page. Set its Caption and use Earlier/Later to change page order. Arrow keys and Home/End navigate tab headers in the designer and runtime.

Place fields, panels and even nested TabControls on pages. Only the active page is shown, but values on all pages are collected. Switching pages does not reset values. Generate reveals the page containing an invalid field, including nested pages. Reset restores defaults across all pages. Active page selection is view state: reopening the runtime starts with the first page.

Pages created in Studio fill their parent below a 36 px tab strip and stretch with it. Resize/move the TabControl; page geometry is not edited separately. TabControl has a minimum size of 160 × 100 px. Deleting a page or TabControl removes its descendants from the layout, while keeping parameter definitions and values. At least one page must remain; Undo restores removed layouts.

Template kinds are tabs and tabpage; pages reference a TabControl with parentId. Field coordinates remain form-relative, as for other containers. The server rejects orphan pages, ordinary children directly under TabControl, empty TabControls, and pages overlapping the tab strip.

MaskedTextBox

Choose MaskedTextBox in Text input. It creates an optional string parameter with mask 000-000. Use Edit parameter / options, then Mask, to change it. The placeholder shows expected separators; hovering displays the mask legend.

Masks contain 1–128 printable ASCII characters and at least one input slot. Every slot is required for nonempty values. Optional parameters allow an empty string; partially completed values are rejected. Case is preserved.

For LL-000, either type AB-123 or type/paste the complete unformatted AB123. Studio inserts literals when the field loses focus or is validated for Generate. It does not change the caret while typing, strip invalid text or truncate extra characters. Partially formatted text must be corrected by the user. Defaults entered in Parameters are formatted and validated on Save.

Templates store control: "masked" and mask: "LL-000". API/CLI callers and JSON-authored defaults must supply the formatted value AB-123; the server validates exact characters and length before any TypeScript report handler runs. Scripts receive a normal string, including literals. JavaScript/JSON escapes apply: a mask containing a literal backslash needs \\\\ in JSON source.

This is a portable fixed-mask subset, not all WinForms MaskedTextBox options. Optional positions, Unicode/culture-aware slots, case-conversion directives, InputMask regexes and custom prompt characters are not implemented. Symbols such as 9 or ? are literal characters, not optional positions.

Context menu and deletion

Right-click the form, a component or its outline entry. Add control… opens an icon palette with search and inserts at the clicked position. Duplicate copies the selected component and descendants; fields get independent copied parameter definitions and values. Delete removes the component and all its children. Move earlier/later, Properties, and Preview form provide access to the existing designer actions. Changes participate in Undo/Redo.

Shift+F10 opens the menu from a focused component; Arrow keys navigate, Enter activates, Escape closes. Delete/Backspace removes a focused component and Ctrl/Command+D duplicates it. These shortcuts do not intercept text editing.

A custom dialog displays only its placed components. Deleting a field does not delete its parameter definition, which may still be used by report content or scripts, but the field no longer appears in Preview or Run. Unplaced parameters keep current/default values; the server still validates them. Set those values in Parameters or place a field if users need to enter them. With no custom dialog, the automatic parameter form still shows every parameter.

Copy, cut, paste and Code

The context menu includes Copy, Cut and Paste, with their own icons. Use Ctrl/Command+C, X and V while the form or a component has keyboard focus. Ctrl/Command+Z undoes and Ctrl+Y or Ctrl/Command+Shift+Z redoes layout edits. Text inputs retain their normal editing shortcuts.

The private clipboard holds one component and its descendants, parameter settings, current values and referenced images. It belongs to this editing session: opening a project/template/sample or reloading Studio clears it. It does not read or overwrite the operating-system clipboard.

• Copy creates independent parameter bindings on each paste. Images are reused when unchanged; a conflicting resource gets a separate name.
• Cut removes the component from the layout. Paste reuses free, unchanged parameter bindings, preserving report expressions; otherwise it safely makes independent copies. Further pastes act as Copy. Undo after Cut does not allow a second field to bind to an already placed parameter.
• Paste into the selected container, or beside the selected ordinary component. Keyboard paste beside the original or last pasted component uses its parent. Paste on the blank canvas uses the form; a context-menu paste uses the clicked position. TabPages require a TabControl destination and resize to its page area.
• Insufficient space or the 100-component limit rejects the entire paste without adding parameters or losing the clipboard. Cut and Paste are separate Undo steps.
• Source data paths and report event code are not duplicated or rewritten.

Code on the Dialogs toolbar or in its context menu opens the same TypeScript editor as Design → Page → Code. These are report-level handlers: validateParameters, beforeRender, afterRender. Use validateParameters for validation after Generate. Button · Custom invokes dialogButtonClick with ctx.componentId; add its handler through Code → Button click.

Dialog load and parameter change handlers are available through Code. See the scripting manual for draft values, atomic updates and cancellation.

Contextual event editing

Properties → Events opens Load for Form, Changed for parameter fields, Click for Custom buttons, and Page changing / Page changed for TabPage. Missing handlers get typed drafts with a selected-parameter/component guard; existing shared handlers are selected without modification. Apply code saves; Cancel discards. Opening never runs code.