Form

A container that collects its child inputs and submits them to a database through a write named query. Validation, submission and the success/error outcome are handled for you — the result arrives as submitSuccess or submitError rather than as a script you have to write.

Reach for it when you need:

• Downtime and defect entry
• Batch records and quality checks
• Any structured data entry that lands in SQL

Component name: Form · Category: Input

In the palette: Collect inputs and submit them to a database via a write Named Query

Properties

Any property can be bound to a tag, another component's property, or a query.

Property	Type	Default	Description
header	object	{"title":"","subtitle":"","align":"left","divider":false,"ba… (truncated)	Optional header block above the fields: title + subtitle text, alignment, a divider line, and its own background / spacing / text styling. Leave title and subtitle blank = no header.
autoHeight	boolean	true	Auto-grow the form's HEIGHT (header + fields) so nothing clips when fields stack on mobile/narrow widths — works in Coordinate, Flex and Grid. Width is unaffected. Turn off for a fixed-height box you size by hand (the field area then scrolls).
insertQuery	enum	""	The INSERT (write-type) Named Query this form submits — its :params become the fields. Also used in edit mode when no updateQuery is set (e.g. an upsert).
updateQuery	enum	""	Edit mode: the write-type Named Query run when recordId is set (UPDATE … WHERE :recordKey). Blank = use insertQuery for both insert and edit (e.g. an upsert).
selectQuery	enum	""	Edit mode: the SELECT (read-type) Named Query that fetches the row to edit by its key (SELECT … WHERE :recordKey). Its columns seed the fields (column name = field param).
recordFromTable	enum	""	Convenience (SAME view): pick a Table on this view → recordId is auto-bound to its selected row's key, making this Form the editor for that table's selection. It just sets recordId for you (you can still edit recordId by hand).
recordFromParam	string	""	Convenience (DIALOG / other view): the name of the view Param that carries the record id (passed by the Panel action that opens this Form, e.g. params: { id: row.id }). Auto-binds recordId to {{params.<this>}}. Use recordFromTable instead when the Table is on the same view.
recordId	string	""	The key value of the row to edit (bind to a selected table row / tag / param). Empty = insert mode (new row).
recordKey	string	id	The key column / param name used by selectQuery and updateQuery (e.g. 'id').
resetAfter	boolean	false	Clear the fields after a successful insert (ignored in edit mode)
style	style	{}	Custom CSS properties

Events

Attach event actions to these in the Event Manager.

Event	Label	Group	Payload
click	Click	Mouse	The DOM event.
dblclick	Double click	Mouse	The DOM event.
contextmenu	Right click	Mouse	The DOM event.
mouseenter	Mouse enter	Mouse	The DOM event.
mouseleave	Mouse leave	Mouse	The DOM event.
change	Change	Input	The DOM event.
submit	Submit	Input	The DOM event.
focus	Focus	Input	The DOM event.
blur	Blur	Input	The DOM event.
submitSuccess	Submit success	Form	The write result, under submit.
submitError	Submit error	Form	The error.

Right-click behaves differently in the Designer

contextmenu fires your configured actions at runtime only — in LiveView and in preview. On the Designer canvas the right-click is captured to open the Event Manager, so testing it there will not run your actions. Test right-click in preview.

Notes

Submitting through a named query rather than inline SQL keeps the statement in one place, binds parameters instead of concatenating them, and lets the screen work without database credentials of its own.

See also

• Named queries
• Event actions