Input Elements & Layout Controls

Data Display

To highlight a specific piece of information — a logo, for example — the data display element provides a quick way to place a chunk of content prominently on a page.

Array Text Input

Building screens where elements work together is a key part of application design. Text array fields are typically used alongside a table to associate groups with individual rows of data. This pairing of a table with text array fields covers the most common real-world use cases for this input type.

Autocomplete Input

Autocomplete fields in CYPEX let users find and enter information faster. Under the hood, the field must be configured to know how it should fetch data from the backend. Configuration relies on setting up a filter that tells CYPEX how to retrieve the relevant information, which keeps the setup straightforward.

Boolean Input

Boolean field elements do double duty. First, they render boolean values as a proper visual input rather than a plain string like “true / false”. Second, they can act as on/off switches. In that second role, boolean inputs are commonly wired up as connected objects; combined with expressions, they let you control the behavior of an entire page.

Code Input

Code fields make it easier for users to type code directly into a form. A key feature here is syntax highlighting, which comes with support for a range of programming languages so that code entry stays clear and visually organized.

Layout and Display Components

Container

Containers group GUI elements — like tabs, or an entire form — that would otherwise act independently. Once grouped, you can control all the contained elements at once.

Conditional Container

Showing or hiding a conditional container is driven by custom expressions, which are a core CYPEX mechanism. Inside the graphical configuration element, a JavaScript snippet is evaluated; when that expression returns true, the container is shown, otherwise it is hidden. The expression may access any element on the page, including elements that are themselves hidden.

Markdown Text Element

Markdown fields serve multiple purposes. The default behavior is to statically display content on the screen. But they can go further: by binding the Markdown field to a data source — a table, for instance — the displayed content becomes dynamic and can affect the state of any downstream elements that depend on it.

Image Element

CYPEX image elements work much like Markdown fields. They can show static content or bind to a data source for dynamic display, depending on what the page requires. Dynamic setups again rely on custom expressions to determine what gets rendered.

Form & display elements

The form and display elements in CYPEX cover the practical building blocks of most application screens. This section walks through the available components, from basic text and number inputs to specialized elements for JSON, Markdown, files, colors, and dates.

Color fields

Color fields can display colored squares conditionally based on other elements. This is commonly used to show status information on screen. Color input values must be in hex format with a leading #. The element size is configurable. Advanced examples include a password checker and a color picker.

Date and time input

Date and time are part of essentially every practical form-based application. CYPEX date time fields are flexible, supporting both data collection from users and presentation to end users. Custom expressions can control field behavior dynamically. Date/time values can display as an absolute or relative value, and the time zone can be specified.

JSON and Markdown input

PostgreSQL provides significant support for JSON documents, but CYPEX avoids sending broken data to the backend by using special input fields. The JSON GUI element produces valid JSON, reducing errors from the database backend. Beyond validation, JSON input fields can connect with other elements on screen for more powerful interactions. JSON fields also validate content before sending to the server, simplifying the editing process.

Markdown fields can be connected with other elements to produce interactive applications. Markdown can also format text inside table rows, changing row layout as needed.

Number, slider, and text inputs

Numbers display in various formats with the numeric elements supporting most formatting scenarios out-of-the-box. Advanced format instructions can be assigned to numeric fields to enrich the display of data. In the video example, an image resolution is displayed on-screen within seconds.

Sliders are powerful options for letting users input data within a certain range. A variety of configuration options are available to make sliders more useful and visually appealing.

Text elements form the backbone of forms and containers since most data types can be interpreted as text — apart from images and a few other types. The layout can be customized using custom expressions to dynamically determine field content based on other elements. Text fields also support validation to ensure only certain strings are accepted, which is important for checking email addresses or other specific formats.

File inputs

File handling supports configurable input restrictions and permissions. MIME types can be defined to control which uploads are allowed. File inputs perform identically whether you use a single file element or a multi-file element. Uploads can also be combined with other GUI elements to demonstrate interaction.

Subforms and forms

For 1:n relationships, you often want to display the "1" side and the "n" side on the same screen. Subform tables make this possible by connecting objects so they interact nicely. Forms themselves group various pieces of information to be submitted to the server together. Forms are auto-generated in the initial app prediction stage or added later for additional input collection.

Action and call buttons

Action buttons support a range of operations: "Refresh page", "Show notification only", "Navigate", and others. Each action type exposes different configuration options. Call buttons go further: any function exposed in the cypex_generated schema becomes available in the API. By writing a server-side function, you hide the business logic behind a simple button click.

Boolean, array text, and clipboard

Boolean fields hold three values: true (ticked), false (unticked), and NULL (crossed out). As with other CYPEX elements, display can be direct or driven by custom expressions.

Text array fields display multiple pieces of text as one element. Use cases include showing group membership or listing attributes associated with an element. These fields are also commonly used to display emoji lists or other small data fragments.

Copy-to-clipboard buttons handle the otherwise tedious task of manually marking text with a mouse. They copy other elements automatically, speeding up repetitive tasks.

External link elements let applications open arbitrary URLs, leaving the app when necessary. Internal fields and buttons work in the opposite direction, navigating within the app. The configuration bar controls behavior. A classic internal use case is a home button that jumps to the main section of the application. Internal links can target a static page or calculate the target dynamically to link to any page carrying any content.

Progress, dialogs, tables, and tabs

Circular progress displays a value between 0 and 100% in a circle. The value can be fed by a custom expression.

Modal dialogs open a small mini-page on top of the main page. The dialog contains a grid that fills with other elements. This approach is ideal for building small subforms to edit an entity without changing the page when database data changes.

The table element treats each entry as an expression, meaning the displayed content can be modified with CYPEX custom expressions. Tables offer auto-refresh features and interact with other page elements.

Adding a tab element compacts your app layout so it is easier to navigate. Drag a tab onto the screen and add other elements into each sub-page. Tab layout is configurable, and any number of elements can go on every tab sub-page.

Charts

Charts in CYPEX serve dashboard and similar use cases by rendering data quickly with little setup.

Bar charts display data in a colorful, easy-to-understand format. Pie charts operate as the workhorse for aggregated data — the editor lets you select the data source, adjust layout, and change colors or text descriptions. CYPEX line charts give high control over data display and configuration.

For full freedom, the custom chart element requires manual configuration. By default a custom chart contains no information or layout; you must write code. All chart types, including custom and line charts, use the Apache echart library under the hood. See the echart documentation for configuration details.

Mapping GIS Data in CYPEX Applications

Leaflet Map GeoJSON Field

CYPEX lets you embed customizable Leaflet maps directly into your application interface. The Leaflet map element accepts data sourced from a table element, making it straightforward to render spatial records within your app UI.

Because the element exposes full JavaScript customization, you can tailor the map behavior and interactions to fit the needs of your application. For a deeper look at the available map functions and data formatting options, consult the official Leaflet maps and GeoJSON documentation.

Geographic Inputs and GIS Data Handling

CYPEX supports PostGIS out of the box, so you can build GIS-aware applications without custom middleware or external map services. The platform natively handles GeoJSON documents, letting you move from data model to interactive map with minimal friction.

Building a full GIS feature in CYPEX follows the standard application workflow: start by defining your data model, then create the map view, and finally bind the geographic data to your UI elements. The result is a fully functional spatial application without leaving the CYPEX environment.