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 faster, interactive and in real-time. Check out these tutorial videos to get started!
1. Create a Markdown Field
This 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 savvy 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 has been created before. 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. With simple dragging and dropping, you can move and resize them with ease.
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 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 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.
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 joy.
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.