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

Custom Text Field

Text built from an expression, so the wording can change with the record or the signed-in user.

When to use

  • A sentence that has to combine several values, or change wording depending on the data.

Examples

  • ‘3 of 12 tasks complete’ assembled from two counts.

Avoid

  • Building long formatted documents in one expression — a Markdown Field keeps the content readable.
  • Using it for a single unmodified column value, which a Text Field shows with less configuration.

Use instead

Read full post

Date Time Field

A read-only typography block formatting timestamps into absolute patterns or descriptive human-readable relative timelines.

When to use

  • Presenting a read-only date, timestamp, or temporal string formatted cleanly for user viewports.
  • Displaying historical records or future milestone markers utilizing relative time statements (e.g., ‘6 years ago’).

What you need

  • ISO timestamps, Date objects, or string representations processed dynamically via custom expressions.

Examples

  • Displaying a record creation timestamp as ‘dd.MM.yyyy HH:mm’.
  • Rendering audit track histories using relative phrase transformations like ‘3 days ago’.

Avoid

  • Attempting to capture or mutate dates, use input-based date selectors instead.
  • Enabling both ‘Is Relative’ and specialized absolute ‘Custom’ formats simultaneously, as relative processing completely overrides layout format specifiers.

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

Delete Button

A button that deletes the record it is bound to, optionally behind a confirmation dialog.

When to use

  • Removing the record shown by the surrounding form, or the row it sits in inside a table body.

What you need

Needs a record to act on: either the parent form’s record, or the row it is placed in when used as a table body element.

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

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

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

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

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