Shareable UI components
Last updated
Last updated
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 calendar component for representing data in a Calendar data source
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.
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.
The shareable UI components created in the app are displayed in a separate list in the Views pane and can be edited there.
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 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.
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.
Component Params can also be added as params in Functions, as shown in the image below, and as Data in a Coded Component.
Component params are optional. For example, a component used purely for layout, such as a header, might not need any component params.
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.
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.
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.
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.
