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.
Not all properties work the same way. To understand how properties work, you should get familiar with the three property categories:
In addition, components have style properties which are configurable under the Styles tab.
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.
Text / Content
Image / Image URL
Icon / Icon name
Dropdown / Dropdown options
Text input / Placeholder
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.
Text field / Value
Slide / Value
Toggle switch / Toggled
Checkbox / Checked
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.
Any UI component / Visible
Button / Disabled
Text input / Multiline
Slider / Maximum value
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.
To configure a property, you need to first select an appropriate value type. There are three categories for value types:
Static – set via the properties panel, will not change during runtime unless explicitly overridden with the Set component property flow function
Formula – dynamically computed in runtime via a formula function
Linked – bound to some other value in the app, e.g. a page variable or another component's UI property
By default, the value type is always a static value of the appropriate type, e.g. static string for text Content or static boolean for Visible.
Every property has a schema, which defines what values are accepted. The schema can be as simple as "any string or number value" for a text component's Content, or as complex as "an array of objects with properties
value, whose values are strings" for a Dropdown component's Dropdown options.
The property value type determines what kind of input is available on the properties panel for setting the actual value of the property.
For static values, an applicable input is shown.
Dropdown to select between True and False
Text input for an external URL, plus a button to select an image from the asset library
For a formula function, an input field is shown. Clicking it opens the formula editor. Read more in the Formula functions section.
For linked values, a dropdown of applicable values is shown. If there are values whose schemas do not match the target property, they are shown as disabled.
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.
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.
This is a special property that allows you to make the selected UI component repeat itself in the UI based on an array-format source data. For example, a very typical use case is rendering a list based on an array of data fetched from the backend.