Creating and editing view components

You can create new, reusable view components by turning a container into a composite component.

Simply select a container, and at the bottom of the properties panel, click the Turn into a new view component button. After a confirmation dialog, the isolation mode is opened for your newly-created composite component.

To edit an existing composite component, simply double-click it on the view canvas to open the isolation mode.

Using the isolation mode

The isolation mode essentially lets you edit the structure and properties of a composite component in isolation from the rest of the page. To signify this, the rest of the UI is faded out with a translucent stripe pattern.

the isolation mode

For any composite component, there's three things to consider:

  • Structure, i.e. how the composite component's child components are laid out

  • Properties, i.e. what properties are available for the user to configure after they've dragged it onto the canvas

  • Internal logic, i.e. what logic is run inside the composite instance, either automatically as part of the component's lifecycle or in reaction to user interaction

  • Events, i.e. what events the composite component can trigger via its internal logic

Structure

Creating the structure for your composite works the same way in isolation mode as outside it: you drag components to the canvas and define their properties and styles. Nested containers can be used to do more complex layouting.

The only difference is the root container for the layout. Outside Isolation mode, the root of your component structure is the page itself, while in isolation mode, it's the root of the composite component.

Styling composite components

A composite component can be thought of as a "card" that can be added to any part of your page layout. As such, the style properties available for composite component instance, when selected on the main canvas, include only properties like margin and width, i.e. things that affect the "boundaries" of the composite component.

Conversely, when editing the composite component root inside isolation mode, you can set style properties like padding and background color that affect things inside the composite component boundaries.

Properties

Composite component properties

Configuration and two-way properties

Configuration properties are used to bring in data and values for the component to use, such as the keyboard type of an input, or options list for a dropdown.

A component cannot modify its regular configuration properties from the "inside". An exception is a property set to use two-way binding. In this case, both changes in bound data and user interaction with the component can change the property, such as an input field's Value.

Inside isolation mode, properties defined here are available via the Composite component internal property binding type. Regular configuration properties are read-only in isolation mode, while two-way bound properties can be set with the Set internal property flow function.

Configuration properties of a card component
Configuration properties in the isolation mode properties-tab

Output values

Component output values are a way for the component to "broadcast" data to the rest of the app.

For example, a file upload component could have its "Upload progress" available as an output value.

You cannot bind anything to output values, but they are available via the Binding Editor, so you can use them in formulas or as direct bindings. In isolation mode, output values can be set with the Set output value flow function.

component outputs for the tag input component

Private variables

Private variables are only usable in isolation mode. They can be used to write and read data throughout the component's internal lifecycle, without making that data available from the "outside" when using the component in an app.

Private variables can be set with the Set private variable flow function in isolation mode.

For more on creating your own components, check out Core Lesson 4 - Components