CYBERTEC Logo

CYPEX Online Academy - Application Designer Section

Table of contents

9.1 Application overview
9.2 Data display element
9.3 Array text input
9.4 Autocomplete input element
9.5 Boolean input element
9.6 Code input
9.7. Application layout elements
9.8 “Form” & “Display” – list elements
9.9 Charts
9.10 3rd Party

9.1 Application overview

In this video, 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 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

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

9.2 Data Display element

Emphasize a certain piece of information on a page with a data display element. It allows you to quickly and prominently display a chunk of information (such as a logo) on the screen.

Data display element – application designer

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

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

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

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

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

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

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

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

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

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

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

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. 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, including hidden elements.

Conditional container – application designer

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

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

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

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

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

9.8 “Form” & “Display” – list elements

9.8.1 Color field including examples
9.8.2 Date time input including custom expressions
9.8.3 JSON input
9.8.4 Markdown input element
9.8.5 Number input element
9.8.6 Slider input
9.8.7 Subform table
9.8.8 Text input element
9.8.9 File input
9.8.10 Multiple file input
9.8.11 Action buttons in action
9.8.12 Array text field
9.8.13 Boolean field
9.8.14 Call button in action
9.8.15 Circular progress
9.8.16 “Copy to clipboard” buttons
9.8.17 Color field element basics
9.8.18 Date time field
9.8.19 External link field
9.8.20 Form
9.8.21 Internal link button
9.8.22 Internal link field
9.8.23 JSON field
9.8.24 Modal dialog
9.8.25 Number field
9.8.26 Table
9.8.27 Tabs
9.8.28 Text fields
9.8.29 Text input

9.8.1 Color field

This video explains how to use color fields. Color fields can be used in conjunction with other elements to conditionally display colored squares on the screen. In CYPEX this is often done to display all kinds of status information on the screen. Includes advanced usage examples of a password checker and a color picker.

Color fields – application designer

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

9.8.2 Date time input including custom expressions

This video shows you how to use data and time input in CYPEX. Date and time are essential; they’re part of basically every practical application containing forms. In CYPEX you use these fields in various, flexible ways to either gather user information, or to present data to the end-user. Includes advanced usage with custom expressions.

Date time input – application designer

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

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

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

9.8.4 Markdown input element

In this video, you will learn to connect a Markdown field with other elements on the screen to produce interactive applications. You can use Markdown to change the layout of a row inside a table by applying it to format text.

Markdown input – application designer

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

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

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

9.8.6 Slider input

How to implement sliders in CYPEX. Sliders are especially useful if you want to allow the user to input data, but only within a certain range. In CYPEX, sliders are a really powerful way to handle such cases. There are various configuration options to make sliders more beautiful and useful overall.

In this video, you will learn to quickly get the best out of sliders.

Slider input – application designer

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

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

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

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

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

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

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

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

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

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

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

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

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

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

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

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

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

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

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

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

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

9.8.17 Color field element basics

How to use hex format and size in the color field element. 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 element basics

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

9.8.18 Date time field basics

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 basics

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

How to enable an external link to be embedded using CYPEX. In case it’s 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.

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

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

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

9.8.21 Internal link button

Use an internal link buttons to navigate within 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. A home button is a typical use case for an internal link button in CYPEX.

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

9.8.22 Internal link field

Internal link fields are used to navigate inside a CYPEX app. You can either link to a static page or you can be more dynamic and calculate the link on the fly to link to any page containing any content. Use the configuration bar of the link field to control the behavior of this GUI element.

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

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

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

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

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

9.8.25 Number field

A numeric field gives you the ability to display a number in almost any format commonly needed in applications.

Number field

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

9.8.26 Table

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

Table

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

9.8.27 Tabs

How to incorporate tabs into your CYPEX apps: by adding a tab, you can make your application far more compact and easier to use. Simply drag a tab element onto the screen and start to add other elements into it. It’s possible to influence the layout of your tabs, and you can add any number of elements to every sub-page of your tab.

Tabs

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

9.8.28 Text fields

How to use a text field in CYPEX: You may display text in a variety of colors, and decide how it should be arranged on the page (i.e. centered). In addition to other capabilities such as being able to control the layout of the GUI element, you can dynamically generate text field content, as needed.

Text fields

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

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

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

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. Bar charts offer a quick method to display data in an easy-to-understand and colorful format.

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

9.9.2 Custom chart element

This video describes how to use custom charts in CYPEX. By default, a custom chart contains no information and/or layout. You must configure the chart manually and write code to make things happen. Behind the scenes we use the Apache echart library to display data. Please check out the echart documentation to find out more about configuring this type of chart.

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

9.9.3 Line chart element

Line charts in CYPEX are highly customizable and allow you to control how your data is displayed.
Behind the scenes we use the Apache echart library to display data. Please check out the echart documentation to find out more about configuring this type of chart.

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

9.9.4 Pie chart element

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

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

9.10 3rd Party

9.10.1 Leaflet map GeoJSON field
9.10.2 Geographic inputs (managing GIS data)

9.10.1 Leaflet Map GeoJSON Field

This video shows how to create customizable Leaflet maps in CYPEX. See how to include data from a table element in a Leaflet map. The element is customizable via JavaScript code, please refer to the Leaflet Map API documentation for more information: Leaflet maps and GeoJSON

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

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.

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

< Application – Add-ons section | Academy overview | Best practice section >

CYBERTEC Logo white
CYBERTEC PostgreSQL International GmbH
Römerstraße 19
2752 Wöllersdorf
Austria

+43 (0) 2622 93022-0
office@cybertec.at

Get the newest PostgreSQL Info & Tools


    This site is protected by reCAPTCHA and the Google Privacy Policy & Terms of Service apply.

    ©
    2024
    CYBERTEC PostgreSQL International GmbH
    phone-handsetmagnifiercrosscross-circle
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram