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

Slider Input

An interactive draggable thumb slider moving along a horizontal or vertical line track, featuring optional value tooltips, customizable step increments, and mark indicators.

When to use

  • Allowing users to select a numeric value smoothly along a bounded continuous track by dragging a handle.
  • Providing intuitive numeric controls for adjustments like volume, distance, budgets, or percentage scale settings.

What you need

Disabled by default until a default_form is present on the page layout. Requires a valid Data Source pairing (Element ID and Field Path) to store the numeric output.

Read full post

External Link Field

An interactive underlined text hyperlink that routes the user to a targeted external web address upon click. It can optionally be visually transformed to look exactly like a standard platform action button.

When to use

  • Navigating users away from the current platform application to external domains, websites, or foreign reference pages.
  • Providing links to external support portals, external documentation, or static downloadable web assets.

Examples

  • An underlined text link pointing out to a vendor’s external terms of service dashboard.
  • A button-styled link redirecting administrators directly to an external server management console.

Avoid

  • Navigating to another page inside the exact same app workspace — use internal link buttons or routing options instead to preserve application state.
  • Omiting required transfer protocols (such as http:// or https://) inside the Destination property string, which causes broken or dead paths.

Use instead

Read full post

Subform table

An editable grid of related records inside a parent form — the way to manage a one-to-many relationship without leaving the page.

When to use

  • Editing the many side of a relationship in place, such as the lines of an order, where rows are added and removed alongside the parent record.

What you need

Binds to a field path on a parent Form that holds an array of rows. Rows are saved with the parent record, not independently.

Read full post

Form

A form layout for one record, with Back, Reset, and Save in the bottom bar.

When to use

  • Create, edit, or show a single database record with inputs bound to its fields.
  • Provide the data context that child inputs bind to via Element Id and Field Path.

What you need

Needs a Data Source (query name). Edit and detail also need Identifier Name and Identifier Value.

Read full post

Text Input

An interactive single-line or multiline text entry box featuring optional start/end adornments (icons/text), a helper text tooltip ‘?’ button, and direct form validation state indicators.

When to use

  • Capturing standard short or multiline text entries (e.g. names, notes, addresses) inside forms.
  • Binding form fields to backend schema paths to handle automatic validation errors, touch states, and value change tracking.
  • Providing text inputs with regex validation patterns, helper tooltips, or prefix/suffix adornments.

What you need

Requires a valid Data Source object containing an elementId (matching the target Form ID) and a fieldPath array mapping to a specific field name. The target Form must have view fields available.

Read full post

File Input

An upload action button decorated with a cloud-and-arrow icon that opens the standard browser file picker dialog, displaying a trash bin icon next to selected files for instant removal.

When to use

  • Allowing users to pick, upload, and manage binary files (documents, images, audio, video) inside form workflows.
  • Binding uploaded file references to backend database records while enforcing access permissions and file extension filters.

What you need

Disabled by default until a default_form is present on the page layout. Requires selecting an Element ID and a target Field Path to bind file uploads to form payloads.

Read full post

Form Button

The submit or reset control of a form. It knows which form it belongs to, so it does not need an action configured.

When to use

  • The primary Save on a form, or a Reset that returns every field to its loaded value.

Examples

  • Save and Reset at the foot of an edit form.

Avoid

  • Using it for anything other than submitting or resetting its form — an Action Button runs arbitrary actions.
  • Adding a second submit button to the same form; two ways to save the same record invites double submission.

Use instead

Read full post

Leaflet Map GeoJSON

An interactive geographical map supporting standard drag, swipe, and zoom operations, layered with vector paths and reactive point markers.

When to use

  • Rendering dynamic geographic data, map vectors, spatial regions, or coordinate-bound markers.
  • Visualizing location-based query results using customized interactive polygon fills and custom emoji markers.

Examples

  • A dashboard map layer plotting regional sales territories via custom GeoJSON spatial properties and responsive polygon fill attributes.
  • An interactive transit tracker plotting coordinates utilizing custom features data arrays, map auto-updates, and hover info tooltips.

Avoid

  • Allocating small layouts (under 4x4 grid spacing) which forces immediate layout compression and hinders map navigation controls.
  • Configuring ‘Custom’ mode options while providing mismatched empty array syntax objects within the data expression field wrapper.

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

Multiple File Input

A multi-file action trigger button decorated with a cloud-and-arrow upload icon that opens a browser file picker allowing batch selection. Displays a staged list of selected files with individual trash bin icons for easy removal before upload.

When to use

  • Allowing users to select, upload, and manage multiple binary files simultaneously inside form workflows.
  • Binding arrays of uploaded file references or file path collections to backend database records while enforcing access permissions and file extension filters.

What you need

Disabled by default until a default_form is present on the page layout. Requires selecting an Element ID and a target Field Path to bind multi-file upload arrays to form payloads.

Read full post

HTML Display

A block of raw HTML, for embedded markup that no other element can express.

When to use

  • Embedding markup produced elsewhere, where the exact HTML matters and no CYPEX element reproduces it.

Examples

  • An embedded third-party badge or widget snippet.

Avoid

  • Reaching for it before trying Markdown Field or Text Field — those stay consistent with the application theme, and this does not.
  • Rendering HTML that came from user input, which cannot be trusted.

Use instead

Read full post