Skip to main content

Components

Overview

Components are the building blocks of Applications. They can be dragged onto the canvas from the Component Library and modified within the Properties Panel without needing to write any code, however, frontend JavaScript can be used to further customize the components when needed. Event Handlers in Components allow end users to trigger APIs and Workflows when specific actions are taken.

Adding and moving components

Drag and drop any components from the left hand Component Library on to the canvas. They can be moved around and resized by dragging the edges. A blue shadow implies that the component can be added or moved to the current hover location, whereas a red shadow implies that it is not an allowable location.

Add a component to the canvas

In order to move multiple components at once, simply shift+click, or click and drag to box select multiple components. Once grouped, the components can be moved on the canvas while maintaining their relative locations.

select and move multiple components

Component properties

Each Component has a set of Properties in the right side Properties Panel such as the data field, a toggle for disabling the component, or stylings like a background color. Properties can be modified directly or programmatically by using Bindings, which enable you to write JavaScript code.

Component event handlers

Event Handlers are also found in the Properties Panel and are used to trigger:

Event handlers dropdown

Use JavaScript with components

Utilize frontend JavaScript within components to further customize their functionality and appearance.