Shareable UI components
Last updated
Was this helpful?
Last updated
Was this helpful?
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 , , and components.
A calendar component for representing data in a Calendar data source
A 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 and a , these two must be placed inside a Container.
To create a component, right-click on the parent Container and click Create Component.
The shareable UI components created in the app are displayed in a separate list in the Views pane and can be edited there.
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.
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 are optional. For example, a component used purely for layout, such as a header, might not need any component params.
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.
When a component is created, the existing and can be generated as . 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.
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 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.
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 , an , a or a reference to an .
Component Params can also be added as params in , as shown in the image below, and as in a .
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 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.
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 appearing with an error, showing where the component is referenced.
