A clickable, highly styleable action button (with optional custom icons and colors) that executes a named backend API function and runs cascading event-driven actions on completion.

• Invoking specific backend function queries or API endpoints directly upon click.
• Executing transactional backend processes that require custom HTTP headers (such as raw JSON, XML, or binary payloads).
• Running an ordered list of frontend UI mutations, reloads, or notifications as post-execution side effects.

Requires specifying a configured backend function name in the setup properties. Optionally accepts custom content-type request headers and sequential trigger operations.

An interactive date input text box featuring an inline calendar icon button that opens a visual popup date picker menu layer to capture user selections.

• Allowing users to select or enter a specific date, time, or complete timestamp within an interactive form.
• Configuring bounded calendar dropdown selectors with explicit past or future validation constraints (Minimum/Maximum dates).

Disabled by default until a valid default_form component is present on the page layout canvas. Requires pairing via Element ID and Field Path attributes.

A circular track progress ring featuring a hollow layout center that highlights the percentage status directly in the middle as a formatted number.

• Visualizing statistical percentages, metrics, or completion rates bounded strictly between 0 and 100.
• Displaying progress tracking metrics cleanly within dashboard grid cells, panels, or summary headers.

• Integer metrics, query outputs containing aggregate values, or computational scores evaluated in expression mode.

• A storage dashboard element showing ‘75% storage capacity utilized’.
• A learning management portal tracking a student’s ‘45% course completion rate’.

• Using for unconstrained values or numbers outside the 0–100 percentage range (e.g. currency amounts, raw unit counts, or negative numbers), which distorts the circular ring calculation.
• Setting an extreme Thickness (e.g., near 40) paired with a small container Size or a large typography Variant (e.g., ‘h1’), which causes the center percentage text to overflow or overlap the ring stroke.
• Using as an interactive input element where users are expected to drag or click to adjust a metric, use a slider or number input component instead.

Configure these in the Application Designer property panel. Group headings mirror the editor where possible. Data Source is where the element gets its rows or field binding (a view/query, a connector operation, or a parent form field). References appear only for view-backed sources and map foreign-key ID columns to readable labels from another view.

An interactive, grid-based Geographic Information System. workspace dashboard featuring zooming dials, layers drag handles, polyline/polygon drawing anchors, and interactive element deletion triggers.

• Allowing users to draw, edit, and capture spatial map structures (points, lines, regions) within form views.
• Binding geographic coordinates or feature vectors directly into database records via standard GeoJSON structures.

Locked by default until paired inside a form frame context. Connection opens when clicking the ‘+’ data trigger to establish Element ID and Field Path references.

A compact interactive action button decorated with a clipboard icon and text label that copies a target string value directly to the user’s system clipboard on click.

• Allowing users to instantly copy strings, API keys, codes, URLs, or dynamic expression outputs to their system clipboard upon clicking a button.
• Providing quick-copy utilities alongside read-only code blocks, order IDs, or access tokens.

• Static strings, generated codes, API keys, dynamic query field values, or calculated string expressions.

• A copy button positioned next to a user API key input that copies the secret key string to the clipboard.
• A quick-action button in an order confirmation view copying the generated tracking code.

• Using to submit form payloads or trigger database mutations — use a standard action button or submit button component instead.
• Allocating unnecessarily large grid canvas dimensions — keep this compact button component sized to 1 row tall and 2 to 4 columns wide.

Configure these in the Application Designer property panel. Group headings mirror the editor where possible. Data Source is where the element gets its rows or field binding (a view/query, a connector operation, or a parent form field). References appear only for view-backed sources and map foreign-key ID columns to readable labels from another view.

A comprehensive row layout containing six individual numerical text input boxes representing structural time blocks, accompanied by custom visual prefix or suffix icon adornments.

• Allowing users to explicitly input precise time durations or chronological spans broken down by individual units (years, months, days, hours, minutes, seconds).
• Capturing structured interval properties within a form grid context to update backend database columns.

Disabled by default until a default_form container exists on the page. Requires a valid Data Source pairing (Element ID and Field Path) to map selection variables back to form states.