The CYPEX Application Designer is a low-code development platform.
The designer provides a wealth of functionality which can be used efficiently to quickly and easily build your application .

Let’s discuss these elements in more detail and see how they can be used.

The first element is the “menu editor”. It allows you to modify various aspects of the application. It’s of vital importance. It allows you to adjust your menu items. You can also handle software revisions. In this section, we’ll guide you through these features and explain step-by-step what can be done and which purpose these features serve to create even better apps.

The first thing to understand is how to create new menu entries. Note that the menu is highly dynamic. The default renderer will create one page per query. However, this might not be your desired layout. You can modify the layout by adding entries and assigning icons to those entries as shown below:

Note that there is drag-&-drop functionality in place, which allows you to flexibly adjust the order of pages in the menu. You can move them around and change them according to your needs.

It’s also possible to create completely new, empty pages. The second icon will help you to achieve exactly that. Again, this is fully customizable.

Note that an alternative to completely new pages is to use “incremental rendering”. The idea is that you don’t have to start from scratch.

While new pages are ideal for dashboards, completely empty pages can be more work in case you want to build forms. In those cases, incremental rendering presents a time-saving alternative to a fully manual process.

Creating a new page is easy, as shown in the next listing:

Note the idea of passing parameters to the page. Why does it matter? Suppose you want to have a page that shows all there is to know about a certain product. CYPEX needs to know which product you’re talking about; a parameter is needed to provide this info to the page. Passing parameters is a common process which is highly relevant to most applications.

Managing the title of a page is done through the “Identifier Label”. Often the title of a page has to be dynamic. Perhaps you would like to add the name of a product to the title or perhaps you want to calculate some other value, and use it as a page title. The “Page Setup Manager” allows you to do exactly that.

If you want to have a specific title in the header of the application (App Bar), you can use the input “Custom Expression". This is often used for pages which have an “Edit form”.

If you set the “Identifier Label” to location.queries.identifier,

the app bar will contain a title such as: “Inventory > Edit Inventory > 1” where “1” is a return value of location.queries.identifier.

In general, you can use any custom JavaScript expression here. However, it’s also possible to use static text containing the desired value.

A page might consist of more than meets the eye. Often a data source is needed to calculate the behavior of a page. Maybe you only want to display a table containing notifications in case some threshold has been reached. Or maybe you want to control the color of a text field depending on some numbers coming from various data sources.

In those cases you’ll need MetaElements which are basically hidden data sources (“hidden fields”). MetaElements are elements that don’t have a position on the page but can be used to fetch data. This is especially important if you are using custom expressions.

Select a data source and optionally set a filter:

The filter might be of key importance because it allows you to expose only a subset of data which can increase performance and make things more secure.

Once the customer data source has been created, you can use this MetaElement inside a custom expression. Note that the data source is otherwise not visible on the page - all you’ve done is to make the page aware of this data source.

The following screenshot shows how:

Queries represent the data sources that actually field your page. In CYPEX every defined in the model builder is usable in the GUI to provide data for some graphical element. This is only true in case the user in question has sufficient permissions.

Without queries, it’s impossible to display anything on your screen. To avoid constant switching between the admin panel and the graphical editor, you can get an overview of your queries and their definitions in a dedicated menu.

If you click on the symbol on the right hand side of the query, the tool will open a visual representation of your query, so that you can see how it has been defined and what data it contains.

The query details might look as follows:

Note that you’ll also see which (if any) field is used as an identification field. Those fields are a kind of primary key for your query and help you to identify the rows you need, quickly and easily. Many graphical elements such as “form” need those identification fields to ensure that the correct row is updated in case a change is made to the data.

In this section:

• History
• Releases

Why do they matter? Every change made to a CYPEX app isn’t lost - all changes will be tracked and you can always return to a prior state. However, not all prior states are created equal. Let’s investigate.

First, let’s talk about the history tab: It allows you to see all prior versions. You can go back to any previous version by clicking on it and by following the instructions.

Note that if you go back in time, changes that happened later will be lost forever. You need to keep that in mind to avoid destroying valuable work.

Here’s what it will look like if you attempt to go back in time to get rid of undesired changes that happened later (e.g. new bugs, wrong approaches, etc.):

Releases are an important part of CYPEX. You can turn the current version into a release, which tells the system that it is now dealing with a stable, production-ready release of the software:

Releases can be tested and then published for end users. Releases are therefore stable versions of your software:

The next important feature in the life of an application is its styling which will provide end users with the desired look and feel, and ensure that CI (Corporate identity) is maintained.

The last tab will guide you through the styling process. Select your desired colors and use the logos of your choice to ensure a consistent look across all your applications.

The logo is usually required by the customer. However, there are many more options, including custom CSS.

Custom CSS

The default layout is suitable for many applications. However, it’s often necessary to support custom CSS, which requires some changes. The way it works is as follows: Elements can be selected via special HTML attributes, namely data-cypex-element-id and data-cypex-element-type.

Here’s an example:

[data-cypex-element-type="default_table"] tr td:first-child {
   background: lightblue;
}
[data-cypex-element-type="default_markdown_field"] {
   color: "#777",
}
[data-cypex-element-type="default_internal_link_button"] button:hover {
   filter: contrast(2.5),
}

There are limits to what’s feasible. However, the most common changes are perfectly doable and supported by the tooling.

Now let’s focus on the top bar and see what can be done there:

Let’s tackle the icons bar at the top first. There are a couple of icons there which are relevant to the end user:

In the first line, the “bell” symbol will inform you about pending notifications. CYPEX notifications are stored in a table. In case a notification is marked as unread, the bell symbol will light up and notify end users.

The question mark symbol will display general information about the application you’re using. For example, you can see which release you’re using.

Changing the desired language can be done with the next icon in the list. By default, the language of choice is English. However, additional languages can easily be added as needed.

Finally, switch to the admin panel and exit the edit mode of the WYSIWYG editor.

Let’s now focus attention on the second list of icons: The blue icons in the middle of the screen allow you to hide the panel on the left as well as the panel on the right side. This is necessary to figure out what the application looks like.

The next button (currently in gray) allows you to quickly create a release. Usually you save changes and then turn them into releases. However, you can also go the direct route and create releases more quickly. This is especially important in case hotfixes have to be deployed.

The “disk button” saves the current changes but doesn’t create a new release. It should be used to save incremental changes which aren’t supposed to make it to the end user directly.

Finally, you can revert your latest changes, and preview changes without leaving the edit-mode.

The toolbox section is the most important section in the application designer.

All available design elements are listed, and can easily be configured using our graphical interface. All items offer drag & drop support and can flexibly be placed in the grid.

Basically, the toolbox section consists of three parts which allow us to compile a user interface efficiently:

Design elements

A list of all GUI elements currently available in CYPEX. There is everything from input elements to graphs and GIS elements.

Design element attributes

In case a design element is chosen, users are able to configure it. Depending on the type of GUI element you’ll see different configuration parameters. What unifies those items is that data usually comes from a data source (“query”).

Copied design elements

The editor allows you to copy as simple as well as complex, nested elements. As objects can be nested it can be quite hard from time to time to understand what is actually copied and what isn’t. The “copied design elements” overview allows you to more quickly gain an overview of what is copied and what can be inserted at some other place in your application.