See what’s inside this CYPEX Tutorial

CYPEX is a user-friendly tool developed by CYBERTEC to quickly build PostgreSQL applications. Little coding is needed to achieve big results: CYPEX allows you to develop applications quickly, interactively and in real-time. Check out these tutorial videos to get started!

GET CYPEX >>

CYPEX Tutorial Contents

1. Create a Markdown Field

The CYPEX Tutorial video demonstrates how to create a new element, in this case a Markdown element, and how to configure it. The Markdown element supports GFM (GitHub Flavored Markdown, https://github.github.com/gfm/), including Syntax Highlighting for the most common programming languages. With a simple-to-use editor, it can also be utilized by non-technical people.

 

2. Create a Pie Chart

How do you configure an element in CYPEX? You will notice that most GUI elements behave in a similar way, but let us focus on pie charts here: An essential first step is selecting a data source for the pie chart. In this case, the “source view” will be “country statistics” which happens to be the object view that was already created. After that, labels and values can be selected. The desired pie chart will be displayed instantly while you are still in edit-mode. You can resize the element, or drag it around on your page.

 

3. Move and Resize Elements

It’s easy to layout elements. You can move and resize them with ease, simply by dragging and dropping.

 

4. Change the App Theme

Customize and theme the application to your liking. At the moment, you can customize the primary and secondary colors. Theming capabilities are continuously being worked on. Additionally, you can add your logo (not seen in the CYPEX Tutorial video).

 

5. Create a Page

You can create a new page in under half a minute.​ Page parameters are useful for pages that depend on other pages.
When linking to these pages, you’re asked for parameter values. You can also use expressions to make your link dynamic.
After creating a page, you can start dragging elements into it. In this CYPEX Tutorial video, you can see how a markdown field can be used to create a page title.

 

6. Build a Dashboard

CYPEX can be used to quickly build dashboards. We have several kinds of charts to display your statistical data:

  • Pie Chart
  • Line Chart
  • Bar Chart

Additionally, the data display can be used to display one relevant value. The data display fetches the specified view data. You can fetch only one row by specifying an identifier value, which can be an expression. The format property is a JS expression that generates the text that is displayed in the element. Here you can access the view data (through “element.data”). Optionally, you can configure an icon and a color. The color can also be specified through a JS expression.

 

7. Use JavaScript expressions

JS expressions can be used to transform your data. You can use arbitrary JS code. In this example, the following expression is used: “20 * 4 = ” + 20 * 4.
This expression creates the text “20 * 4 = 80”. JS expressions have access to location information (location), translations of the current element (i18n), properties exposed by the current element (element) and other elements (elements). Autocompletion and the info box make discovering element properties a snap.

 

8. Show an Image

The image element can be used to load and display an image from an url. Different layout variants are available to adjust image sizing and stretching to your liking.
Optionally, you can add a white background to the image.​ The image url can also be specified as a JS expression. This feature can be utilized to show images inside of a table.

 

9. Conditionally format Table rows

JS expressions can be used to conditionally render text.​ In this case, depending on the total revenue, we either render a checkmark (✅) or a cross (X).
The complete expression is: props.data.total_revenue 290000 ? “✅” : “X”. This expression uses the ternary operator in JS, see this link for more information.

 

10. Create and Publish a Release 

Releases are a powerful feature, which allows the administrator to edit an application while users are still using the published release. As soon as the admin is happy with the current state, they can create and publish a new release. The special “latest” release always references the newest save point, which can be used if you don’t need the release feature at all.

 

11. Revert Changes

Humans are error-prone. Luckily, CYPEX has a simple way to revert saved changes. ​Just go to your history and revert to a specific save point.

SUBSCRIBE TO OUR NEWSLETTER

<< Back to Table of Contents