9.1 Application overview

You’ll be guided through the standard rendering process of our application designer. You’ll see how to select from a list of queries and turn the data model into an (almost) ready-to-use application using just a handful of clicks. Also note that CYPEX will try to process your query names in a smart way to reduce the number of post-processing steps to as few as technically possible.

Application Designer Overview

9.2 Data Display element

It’s often necessary to emphasize a certain piece of information on a page. A data display element is what you are looking for in this case. It allows you to prominently display a chunk of information including a logo on the screen quickly.

Data display element – application designer

9.3 Array text input

Combining elements on the screen to work together is one of the key tasks when building a visually appealing application. This video shows how to use text array fields in a typical and practical context. We use a table along with text array fields to associate groups with a row of data. Note that this type of use case is the most common one in conjunction with text array fields.

Array text input – application designer

9.4. Autocomplete input element

In CYPEX we use autocomplete fields to help the user find and produce information more quickly. Behind the scenes we have to configure the field in a way to ensure that it knows how to retrieve information from the web backend. The video shows how to configure a filter in a simple way to tell CYPEX how to fetch the data

Autocomplete input element – application designer

9.5 Boolean input element

Boolean field elements can achieve two things: On the one hand you can display boolean values and make them more visually appealing (a field rather than “true / false” as string). On the other hand, they serve as switches to turn things on and off. In the second role, boolean inputs are often used as connected objects. With the help of expressions, you can control the behavior of an entire page.

Boolean input element – application designer

9.6 CYPEX code input

Code fields are often needed to give users a more convenient way to type code. Especially syntax highlighting is a key feature of our editor. We support a variety of programming languages and make it easy to enter such data in a visually appealing way.

CYPEX code input – application designer

9.7 CYPEX application layout elements

9.7.1 Container
9.7.2 Conditional container
9.7.3 Markdown text element
9.7.4 Image element

9.7.1 Container

By using containers, you can turn GUI elements which are usually independent from each other into larger groups which can all be controlled at once. Examples of what you might find inside a container are tabs or complete forms.

Container – application designer

9.7.2 Conditional container

If you want to decide whether a conditional container is shown or hidden, you need to make use of custom expressions – which are a core component of CYPEX. The way it works is that inside your graphical config element, you can feed a JavaScript snippet into the configuration. This expression will evaluate and in case it returns true, the conditional container will be shown. Otherwise it will be hidden from view. The custom expression can access any element on the page, even including hidden elements.

Conditional container – application designer

9.7.3 Markdown text element

Markdown fields serve many purposes. The default use case is to statically display data on the screen. However, there is a lot more to Markdown fields that meet the eye. Often you can use Markdown fields to display generic content. By connecting the markdown field to a table (for example), you can display dynamic content and change the behavior of any field which depends on other elements.

Markdown text element – application designer

9.7.4 Image element

Just like Markdown fields, CYPEX images can serve two roles: They can either display static, constant content or they can link to some data source and display content dynamically, depending on your needs. Again, use custom expressions to make dynamic content happen.

Image element – application designer

9.8.2 Date time input

Date and time are essential and are part of basically every practical application containing forms out there. In CYPEX you use those fields in various, flexible ways to either gather user information or simply present data to the end-user.

Date time input – application designer

9.8.3 JSON input

PostgreSQL provides significant support to handle JSON documents. However, we want to avoid sending broken data to the backend by allowing users to use special input fields capable of handling JSON documents. The GUI element will produce valid JSON and thus reduce the number of errors coming from the database backend.

JSON input – application designer

9.8.4 Markdown input element

In this example you will learn to connect a Markdown field with other elements on the screen to produce interactive applications. The main advantage of Markdown lies in its simplicity. However, there is more. As you can see in this video we can use Markdown to change the layout of a row inside a table easily by applying this simple language to format text.

Markdown input – application designer

9.8.5 Number input element

Numbers can be displayed in various formats and the numeric elements in CYPEX support most of this magic out-of-the-box. Enrich the way data is displayed by assigning advanced format instructions to numeric fields to achieve the best results possible. Link elements to fetch data from other parts of the page. In the example in the video, you can even see how the resolution of images can be displayed on-screen within seconds.

Number input element – application designer

9.8.6 Slider input

Sliders are especially useful if you want to make the user input data which is only supposed to be within a certain range. In CYPEX sliders are a really powerful way to handle those cases. There are various configuration options to make sliders more beautiful and useful over all.

In this video you will learn to get the best out of sliders in the most simplistic way possible.

Slider input – application designer

9.8.7 Subform table

In case of 1:n relationships you may want to display the “1” as well as the “n” side on the same screen. This video will show you how to create such forms and how to connect objects with each other to interact nicely.

Subform table – application designer

9.8.8 Text input element

In CYPEX, text elements are often the backbone infrastructure used inside forms and containers. Most kinds of data can be interpreted as text (apart from images and a few other data types), which means text elements can serve as the most basic method to display data.

You can make the layout fancier, however, by using custom expressions which dynamically determine the content of fields depending on other elements on the page.

Text input element – application designer

9.8.9 File input

This video shows how to make full use of the file handling infrastructure in CYPEX. You will learn how to limit the inputs allowed and you will be guided through other aspects such as permissions. Finally we use the file upload in combination with other elements to demonstrate the interaction of GUI elements.

File input – application designer

9.8.10 Multiple file input

Just like when you upload a single file, you can define the MIME type and a lot more to control what can be uploaded and how. Multi file input elements also support permissions and are able to handle various other features which are identical to what single file uploads can do.

Multiple file input – application designer

9.8.11 Action buttons

A CYPEX action button gives you the ability to perform all kinds of operations on your page. There are various types of actions including but not limited to “Refresh page”, “Show notification only”, “Navigate” etc. Depending on the desired action, you can configure many different behaviors.

Action buttons – application designer

9.8.12 Array text field

Using text array fields enables you to display various pieces of text as a single element. This comes in handy if you want to display group membership or if you want to list attributes associated with an element. Often this is also used to display a lift of emojis or other small fragments of data.

Array text field – application designer

9.8.13 Boolean field

Boolean fields can hold 3 different values: true (= checkbox is ticked), false (= checkbox is not ticked) as well as NULL (= checkbox is crossed out). We can either display data directly or control the content of the boolean field based on a custom expression as used by basically all other CYPEX elements.

Boolean field – application designer

9.8.14 Call button in action

A function exposed in the cypex_generated schema will be available in the API. This allows you to hide server-side functionality behind a button. This video will show you how to write a server-side function and how to use it to provide the business logic behind a button.

Call button – application designer

9.8.15 Circular progress

A circular progress element can display a value between 0 and 100% progress. It’s possible to feed the element with a custom expression. Progress is displayed in a circle.

Circular progress – application designer

9.8.16 “Copy to clipboard” buttons

It’s often necessary to copy elements to the clipboard. Manually marking elements using a mouse can be cumbersome and time-consuming. Therefore having a method to copy other elements can allow you to perform tasks more quickly.

Copy to clipboard – application designer

9.8.17 Color field

Color input fields allow users to display colors and fetch input. Colors have to be fed in hex format (leading #). The size of the elements is configurable.

Color field

9.8.18 Date time field

Time / date can be displayed as absolute value or as relative value. In addition to the format it is also possible to define the time zone you want to see.

Date time field – application designer

In case it becomes necessary to embed an external link into the application CYPEX has the right GUI element for you. External link elements allow you to basically call every kind of link and leave the application if necessary.

External link field – application designer

9.8.20 Form

A form allows you to gather various pieces of information and submit them to the server all in one go. The form is a group of elements that is supposed to be saved together. In CYPEX, forms are either auto-generated during the initial stage (app prediction) or can be added later, in case you want to add input data.

Form – application designer

9.8.21 Internal link button

Using internal link fields we can navigate inside a CYPEX application. In this video you will learn how to create a button which allows you to navigate to the “home” section of your application quickly. It is a typical use case showing how to use internal link fields in CYPEX.

Internal link button

9.8.22 Internal link field

Internal link fields are used to navigate inside a CYPEX app. We can either link to a static page or we can be more dynamic and calculate the link on the fly to link to any page containing any content. Simply use the configuration bar of the link field to control the behavior of this important GUI element in great detail.

Internal link field

9.8.23 JSON field

JSON input fields have the ability to validate JSON before it is actually sent to the server which greatly simplifies the process of editing. It is also possible to avoid a handful of errors this way. In this video you will learn how to connect JSON input fields with other elements on the screen to make interaction of elements even more powerful.

JSON field

9.8.24 Modal dialog

A modal dialog will open a little mini-page on top of our main page. It will again contain a grid which can be filled with other elements. It is ideal to produce little subforms to edit an entity quickly. The main advantage of this is that you don’t have to change the page when new things are added to the database.

Modal dialog

9.8.25 Number field

A numeric field gives you the power to display a number in almost any format commonly needed in applications. It is a powerful tool to present numbers.

Number field

9.8.26 Table

It’s important to understand that an entry in a table is an “expression”, which means that we can modify what is displayed using the custom expression machinery of CYPEX. There are also features which allow us to automatically refresh a table, and we can easily interact with other elements.

Table

9.8.27 Tabs

By adding a tab you can make your application way more compact and easier to use. Simply drag a tab element onto the screen and start to add elements to it. While it is possible to influence the layout of your tabs it is also possible to add a basically infinite number of elements to every subpage of your tab.

Tabs

9.8.28 Text fields

It’s possible to display text in various colors and to decide how it is arranged (centered). In addition to other capabilities such as being able to control the layout of the GUI element, you can dynamically generate the content as needed.

Text fields

9.8.29 Text input

Text fields can do more than just gather text from the end-user. It is also possible to ensure that only certain strings are accepted. This is especially important if you want to check for email addresses or other specific types of input.

Text input

9.9 Charts

9.9.1 Bar chart element
9.9.2 Custom chart element
9.9.3 Line chart element
9.9.4 Pie chart element

9.9.1 Bar chart element

In CYPEX, a bar chart can serve as a fundamental building block for dashboards and similar tools. They offer a quick way to display data in an easy to understand and colorful way.

9.9.2 Custom chart element

A custom chart does not contain information and layout by default. You must configure the chart manually and write code to make things happen. Behind the scenes we are using the Apache echart library to display data. Please check out the echart documentation to find out more about configuring this type of chart.

9.9.3 Line chart element

Line charts in CYPEX are highly customizable and allow you to display all kinds of data in many different ways.
Behind the scenes we are using the Apache echart library to display data. Please check out the echart documentation to find out more about configuring this type of chart.

9.9.4 Pie chart element

In CYPEX and most other applications pie charts are the workhorse to display aggregate data in a user-friendly way. Select a data source and adjust the layout of the chart as you like. The visual editor allows you to change the colors of your chart, use text descriptions and a lot more.

9.10.2 CYPEX geographic inputs (managing GIS data)

This video explains how to create a GIS application using maps in CYPEX from scratch. You will see everything from the creation of the data model all the way to the final application. Note that CYPEX supports PostGIS out of the box and allows you to display GeoJSON documents with relative ease.