Skip to main content
Version: 2.4

Screens and Visual Components

Screens​

An UI Application has a user interface and will run on a device which has a screen (smartphone, tablet, laptop). It is used to create front-end applications. By default, an UI Application automatically gets a home screen.

Screens can be added from the Marketplace into the Project Editor and they are part of the UI design of the application.

Screens created appear in the Marketplace for the UI App component ready to be used in building the application. If the application is running, the modifications done in the Screen appear in real time.

As a UI component, when opened, the Visual Editor offers content (e.g: buttons, text fields, images, tables, video, etc) that can be added to the screen from the Marketplace. Each content has its own properties available in the properties panel that can be modified: name of the object, theme, graphic properties, colors, visibility and interactions. Users can also delete the content.

The Context editor tab offers Events and Property functions for the Screen(s) created.

The Documentation tab allows the user to add more information about the Screen by offering a short description and a summary description which will be shown when hovering over the tooltip button.

The content added to a Screen is called Visual Component.

Visual Components Properties (size, position, text, color, etc) can be edited in the Properties Panel.

Properties Panel​

Properties are displayed in several tabs on the left-side of the Editor.

  • General Properties is the place to set the name of the UI Component/Screen and the Theme class it will use to render.

  • Position & Size properties has position and size settings. If the element selected is a child UI component, it will also provide responsive visibility options. The position can be set manually in pixels, using pre-defined settings (left, top, center, middle, right, bottom) or using a custom Function. Width and height can be set manually in pixels, in percentage, or using a custom Function.

  • Visual properties has visibility, border, background options and advanced styling with CSS.

  • Custom properties has specific properties depending on the type of the selected element.

  • Interactions specifies actions to execute when an event on the selected element is triggered (e.g. on mouse click).

Visual Components can be grouped together by selecting all the content inside the Screen. Their size and position properties are then relative to the group, which can be modified based on the need.

Visual Components can be reordered from the Layers panel to move them out of/in the group or to change their rank in the group.

Screenflow editor​

From the Marketplace items, Screenflow can be drag-and-dropped to represents all the Screens used in an application or in a Screen.

When opening the Screenflow, inside the Screenflow editor, by default, a Home screen is created, identified by the blue play icon. The size of the Home screen can be adjusted from the top of the screen. Please note that the size is not linked to the size of the browser window.

New screen(s) can be added from the Marketplace inside the Screenflow editor. Deleting a screen is possible by clicking on the Bin icon.

Transitions​

One of the features offered by the Screenflow editor is being able to create transitions between screens. The transitions between the existing screens are edited directly on the element of the Screen which triggered the transition. The transitions are edited directly in the Screen on the component that triggered them.

Transitions are represented by an arrow between the Screens and they are triggered by an Event defined by the user (e.g: on double-click, redirect to the map; on toggling the button, video is played).