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 convert to a new component button. After a confirmation dialog, the component template editor is opened for your newly-created composite component.

Using the component template editor

The component template editor 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.

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

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.

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.

Passing output values outside the component

In the composite component editor, choose a part of the component that you want to return an output and attach a 'Set output value' flow function. Add a 'Trigger event' function at the end that points to an event.

Select a desired output value and bind it to "Object with properties" → "Item in repeat" for each of the fields.

Exit the composite component editor and select your composite component. Attach a 'Set page variable' (or any other data-related flow function) to an event chosen in the beginning. Bind its value to a formula: self.OutputValue.field, where OutputValue shall be substituted with the actual name and field with the desired field. While editing the formula, you will see all available options.

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.

Sharing your component

You can share your created component with others by obtaining a Marketplace sharing key.

Upon creating the component, start by providing an Introduction and writing a short description for the component in the Properties tab:

After that, save your application and navigate to the 'By Me' tab above the view components. Press a symbol on the top right corner of the component you are willing to share:

Open the 'Publish in marketplace' option and proceed with "Publish New". After that you should be prompted with the key:

You can now share this key and your component will be available in the Component Market for others to use.