Component properties

With the component properties panel, you can set what kind of data and other content your UI components display, configure how they function and define how they are bound to app data. When you select a component, the right sidebar will show the component properties panel.

Property categories

Not all properties work the same way. To understand how properties work, you should get familiar with the three property categories:

• Display
• Input
• Configuration

In addition, components have style properties which are configurable under the Styles tab.

Display properties

Display properties define what kind of data a component displays or otherwise utilizes: for example, a text component's Content property.

Display properties are "read-only" in the sense that the component itself does not provide a way to change the property when the app is running, unlike input properties.

Of course, flow functions and data bindings can still change a display property during app runtime, but the flow is "one-way".

Display properties are not always present: for example, a text input's Placeholder is only shown when its Value input property is empty, i.e. nothing has been written (or programmatically set) into the text field.

Examples

• Text / Content
• Image / Image URL
• Icon / Icon name
• Dropdown / Dropdown options
• Text input / Placeholder

Input properties

Input properties contain data just like display properties, but their value can be directly manipulated by the component itself, without additional logic: for example, a text input's Value property.

While input properties can be given an initial value via the properties panel, the user can directly change them when the app is running. For example, they can tap to focus on a text input and write in it, changing its Value property.

An input property can even be completely hidden from the view. For example, the Value property of the Date Picker component will contain an ISO 8601 formatted date string of the picked date. This is useful for saving to database, but not something you want to directly display to the user.

Typically, input properties are used together with data binding, so that changes in the value are propagated to e.g. a variable that can then be used elsewhere in app logic.

Changes in input properties also trigger onChange events on the component.

Example properties

• Text field / Value
• Slide / Value
• Toggle switch / Toggled
• Checkbox / Checked

Configuration properties

Configuration properties tell the component how it should function: for example, a button's Disabled property.

Configuration properties are often booleans or enumerable values (i.e. lists of predefined options), but they can be any relevant data type.

Configuration properties often have a default value, but some components might require you to set one yourself before the component functions properly.

Configuration properties (like all component properties) are dynamic, in the sense that if a configuration property is changed during app runtime by a flow function or a data binding, the component reacts accordingly. A typical use case is changing the Visible property to hide or show components.

Component primitives never change their configuration properties during runtime without specifically added logic. However, since composite components can encapsulate any kind of logic, some might change their configuration properties based on user input. In these cases, you can always see the underlying logic by studying the composite component in the isolation mode.

Examples

• Any UI component / Visible
• Button / Disabled
• Text input / Multiline
• Slider / Maximum value

Setting properties

When you select an UI component, the properties panel will show a list of its properties. Note that some properties might be hidden inside the expanding Advanced section. Every property has a title and an info icon. Hovering your mouse on the info icon will show additional information on how that property works.

Property binding types and the binding editor

To configure a property, you need to enter the binding editor and select an appropriate binding type. There are four categories for value types:

• Static value – set via the properties panel, will not change during runtime unless explicitly overridden with the Set component property flow function
• Data and Variables - dynamic binding to a variable
• Formula – dynamic binding to a formula
• Component property – binding to a component property (such as the value of an input field)

By default, the value type is always a static value of the appropriate type, e.g. static text for Content or static true/false for Visible.

Property schemas

Every property has a schema, which defines what values are accepted. The schema can be as simple as "any text or number value" for a text component's Content, or as complex as "a List of Objects with properties label and value, whose values are type text" for a Dropdown component's Dropdown options.

Setting the property value

The property value type determines what kind of input is available on the properties panel for setting the actual value of the property.

Static values

For static values, an applicable input is shown.

Formula functions

For a formula function, an input field is shown. Clicking it opens the binding editor. Read more in the Formula functions references.

Preview value

When a UI component property is bound to a dynamic value (i.e. a formula function or a linked value), you can set a preview value for it. If present, the preview value is what will be rendered on the UI Canvas.

This is very helpful if your binding is e.g. appVars.currentUser.age, but your UI only has space for a short number.

Display name

You can set a custom display name for the component using the Display name property.

This has no effect on app runtime, but helps tidy up your page structure, especially when using the layout tree.

Repeat with

This is a special property that allows you to make the selected UI component repeat itself in the UI based on List type source data. For example, a very typical use case is rendering a list based on an array of data fetched from the backend.