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 used anywhere in the app it was created, with context-aware content. For example:
A header component placed at the top of every view.
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.
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.
Good to know
Shareable UI components can be copied and pasted between apps! Use CMD + C/Ctrl + C or right-click the component to copy, and CMD + V/Ctrl + V or right-click in the bottom section of the Views pane to paste.
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, or a reference to an object class.
The action data type can be found under Built-in Enums, as shown in the image 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 data binding dialog has a separate Params tab to access the param properties.
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
Drag and drop a component from the Components list into the view. This will create a new component instance, where the component params can be bound to the relevant data and actions.
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.
Known limitations
The features below are not currently supported for shareable UI components and the Appfarm development team is working to make them available as soon as possible. The list is sorted according to the expected time of arrival.
Sharing components between apps
Using component params in functions
Calendar data sources
Sharing components between solutions
Last updated
