Shareable UI components

You can build your own UI components by combining one or more of the standard UI components in the Appfarm library. These components can then be added to views in your app and shared between apps in the solution. For example:

• A header component placed at the top of every view.

• A card component that accepts data and actions to configure standard Image, Text, and Button components.

• A calendar component for representing data in a Calendar data source

Create a component

A Container is the foundation for creating a new shareable UI component and must always be the parent component. For example, to create a new component consisting of an Image and a Text, these two must be placed inside a Container.

To create a component, right-click on the parent Container and click Create Component.

UI component context menu

When a component is created, the existing data bindings and event handlers can be generated as component params. The component can also replace the original Container, creating its first instance within the app. Both are optional and chosen in the dialog shown below when creating the component.

Create component dialog

The shareable UI components created in the app are displayed in a separate list in the Views pane and can be edited there.

Components list in the Views pane

Share between apps

To share a component with other apps in the same solution, right-click the component and click Share between Apps. This will make the component available at the bottom of the UI components menu in all apps in the Solution. In the app where the component was created, it will be moved to a separate list called Shared Components, below the Components list.

Good to know

A shareable UI component can only be edited in the app where it was created.

Component params

Component params are the interface to the component. They define what input parameters can be passed to a component from a component instance. Params can be generated when creating the component and then managed in the Properties pane when the component is selected, as shown below.

Add a new param by clicking the plus icon, then enter a name and select a data type. A component param can be a simple data type, an enum, an action, a Calendar data source or a reference to an object class.

The property pane can be used to manage component params when a shareable UI component is selected

Good to know

As shown in the image above, a description can be added to a component param. The added description will appear as a blue info dot wherever you add the component.

After adding component params, the properties from the params can be bound to elements of the component's UI. For example, a text property can be bound to the Title property of the Project param.

When working with shareable UI components, the Component Params will appear on top of the data binding dialog.

Data binding dialog when working with shareable components

Component Params can also be added as params in Functions, as shown in the image below, and as Data in a Coded Component.

The function editor when working with shareable UI components

Component params are optional. For example, a component used purely for layout, such as a header, might not need any component params.

Add a component to a view

In the app where the shareable component was created, drag and drop the component from the Components or Shared Components list into the view. If there are components that have been shared between apps in the Solution, they will appear at the bottom of the UI components menu, as shown in the image below. These can be added to a View in the same way as any other UI component.

Bottom of the UI components menu when there are Shared Components in the Solution

Adding a shareable component to a View will create a new component instance, where the component params can be bound to the relevant data and actions. Any descriptions added for the component params will appear as blue info dots.

Component params in a component instance

Disconnect a component

A component instance can be disconnected from the component. This way, components can be used as a starting point for further customization.

To disconnect a component, right-click on the component instance and click Disconnect Component.

Delete a component

All component instances must be removed or disconnected before a component can be deleted. Attempting to delete a component that is in use will result in the Reference Finder appearing with an error, showing where the component is referenced.