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
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.
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.
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.
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
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.
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.
9.7.1 Container
9.7.2 Conditional container
9.7.3 Markdown text element
9.7.4 Image element
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
A numeric field gives you the ability to display a number in almost any format commonly needed in applications.
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.
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.
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 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.
9.9.1 Bar chart element
9.9.2 Custom chart element
9.9.3 Line chart element
9.9.4 Pie 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.
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.
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.
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.
9.10.1 Leaflet map GeoJSON field
9.10.2 Geographic inputs (managing GIS data)
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
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.
< Application – Add-ons section | Academy overview | Best practice section >
+43 (0) 2622 93022-0
office@cybertec.at