Skip to main content
CYPEX Documentation
Support
v2.0.0 Latest stable release View changelog ->

Icon

A standalone display vector glyph rendered from a catalog dropdown or custom expression text path, supporting multi-scale scaling boundaries.

When to use

  • Adding supporting graphic iconography to visually distinguish layout categories or metrics headers.
  • Rendering platform-supported glyph indicators or custom icon expressions within dashboard grids.

What you need

  • Static branding vectors or state flags evaluated dynamically via text box expression workflows.

Examples

  • A 1x1 summary card status indicator rendering a warning symbol based on error flag calculations.
  • An information icon badge aligned inside a visual dashboard heading panel tracking help references.

Avoid

  • Sizing the bounding canvas larger than a 2x2 grid blueprint area, which misuses structural row tracking grids and forces unnecessary white space.
  • Using an independent icon layout block as a standalone interactive link component without descriptive anchor titles.

Editor properties

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.

Read full post

Internal Link Button

A styleable navigation layout link or button component designed strictly for routing internally between local workspace page templates.

When to use

  • Navigating users cleanly between different pages or routing dashboards inside the current application workspace environment.
  • Providing simple routing triggers (e.g., standard ‘Back to List’ cancel paths or detail page redirects) without triggering secondary transactional database operations.

Examples

  • A ‘Cancel’ secondary action button nested within a form layout that returns the user safely to the main dashboard directory.
  • A compact icon-only navigation shortcut placed inside a data grid header routing users straight to a detailed analytics overview tab.

Avoid

  • Navigating to third-party web portals or external addresses outside the current platform domain, use the external_link_field instead.
  • Configuring complex multi-step mutation procedures or API transactions directly on this element, use default_call_button or action_button instead.
  • Allocating visual footprints taller than 1 grid row unit high, which breaks visual layout conventions.

Use instead

Read full post

Internal Link Field

A data-aware detective anchor hyperlink that looks like standard underlined body text by default, pulling specific row criteria parameters to compute dynamic page transfers.

When to use

  • Navigating users dynamically to specific record detail views by extracting unique row variables from the current screen context (e.g., clicking a specific product row to go to its unique page).
  • Building smart, data-aware text links inside tables, list rows, or informational cards that require identifier parameter interpolation.

What you need

Requires binding a relational query name source, choosing the underlying primary target identifier column, and passing an active evaluation expression to capture runtime row values.

Read full post

Default Interval Field

A read-only single row duration string that outputs individual segmented time measurements separated by unit letters based on configuration toggles.

When to use

  • Displaying specific time durations or elapsed period chunks (e.g., ‘3y, 5m, 3d’) cleanly in the interface.
  • Rendering structured ISO 8601 duration intervals parsed from technical database columns into human-readable segmented blocks.

What you need

Accepts a raw ISO 8601 interval duration text string (e.g., ‘P3Y5M3DT3H3M3S’) or an expressional codebase script returning equivalent data logs. Alternatively can be hardcoded manually using individual numeric inputs across six chronological time parameter buckets.

Read full post

Json Field

A read-only interactive code viewer tree containing collapsible object nesting hierarchies and visual type-specific markers.

When to use

  • Presenting structured data payloads, complex nested records, or configuration logs in a clean, expandable tree structure.
  • Providing developers or administrative users with readable debugging viewports that indicate property data types (string, number, boolean) explicitly.

What you need

Sourced strictly through custom expressions capable of invoking direct structural data objects, dynamic API queries, or active field value references.

Read full post

Label Field

A short static caption, used to title a group of elements that have no heading of their own.

When to use

  • Naming a section of a form or a block inside a Grid.

Examples

  • A ‘Shipping address’ caption above an address block.

Avoid

  • Using it to label a single input — inputs carry their own label, and a second one is read twice by screen readers.
  • Using it for values that change; it holds fixed text.

Use instead

Read full post

List

A scrollable stack of repeated row cards (each built from one shared grid template), with optional row selection and a pagination footer.

When to use

  • Browse many records as custom row cards — each row is a grid layout you design, not fixed columns.
  • Build a selectable list that drives a detail panel, form, or chart from elements.<listId>.selected.
  • Show compact work queues, catalogs, or pickers where a freeform row layout beats a dense table.

What you need

Requires a Data Source view/query name. Set Identifier Name whenever selection or per-row actions must address a specific record. Build the visual layout inside the single rowdefault_grid template.

Read full post

Modal Dialog

A launcher button that opens an overlay with a title and close control.

When to use

  • Open a secondary flow (edit dialog, confirmation, wizard step) without leaving the current page.
  • Show a form, chart, or summary in an overlay launched from a button.

What you need

  • A layout container for nested forms, charts, or confirmation content.

Examples

  • A button that opens a medium dialog to edit related sub-form fields.
  • An icon-only button that opens a full-screen analytics overlay.

Avoid

  • Nesting modals inside modals, which confuses focus and navigation.

Editor properties

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.

Read full post

Number Field

A compact, read-only numerical data text block that displays formatted integers or decimals alongside units, percentages, custom currency markings, and contextual error accent highlights.

When to use

  • Displaying a read-only numeric value, score, index, metric, or currency value within user interfaces.
  • Rendering financial tracking fields or statistical values that require explicit prefix/suffix symbols (e.g. £, €) or dynamic highlight gating for losses.

Examples

  • A dashboard tile rendering a database revenue cell formatted with a currency prefix and bold red styling triggered on negative margins.
  • Displaying a precise fractional calculation summary clamped cleanly via decimal precision configurations.

Avoid

  • Using to capture user numerical entries, use a form-bound number input control element instead.
  • Allocating massive grid canvas dimensions, keep this small indicator element sized to 1 row tall and 1 or 2 columns broad.

Editor properties

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.

Read full post

Procedure Button

A button that calls a database function or procedure directly, for work that belongs in the database rather than in the page.

When to use

  • Triggering server-side logic that would be wrong to express as a sequence of page actions — a batch recalculation or a state transition with its own rules.

What you need

The function must exist in the database and be callable by the signed-in user’s role; arguments are supplied from the page.

Read full post