Components

Using components in form designer.

Components are specialised controls, or widgets, to present and manipulate data in a variety of forms, for example data grids, or images, or file references.

Components are often linked to ReST API data sources to consume data and each has their own complex behaviours which need to be configured.

Components appear in the form designer toolbar and can be dragged and dropped into panels as shown:

Once the component has been dragged and dropped into a panel, its properties can be set by simply clicking on it. This will open the component properties configurator.

Each of the components has its own section which details how to configure it, however the following tabs are standard when configuring any component.

Details

This is the where the component is to be associated with a custom variable, as well as setting important visual properties.

Custom Variable

The component can be associated with a custom variable in order to facilitate the mapping from the data entry form into the data source request. This property is a drop down combo showing the list of all client-side custom variables.

Label Text

At run-time, the component will have a label displayed to its left or above it, for example:

The text of this label can be specified here.

Label Visible

Set whether the label is visible or not.

Label Position

The label can be positioned to the left of the component, or above it.

Read-Only

The component can be set to be non-editable or editable.

Decimal Places

For numeric integer or float components, this property specifies how many decimal places are displayed.

Styles

This tab allows the styling properties of the component to be overridden. Web applications use cascading style sheets (CSS) to control styles. These properties are are easy to set. Note that if a setting is 0 or blank, then the default styling remains.

Border Radius

Each of the four corners of the component can be curved if required.

Border Width

The component can be shown with a border of any size.

Maximum Height

The component maximum height can be set. Typically for images, the source image could be very large, so this setting creates a 'thumbnail' i.e. a smaller image for display.

Minimum Height

The component minimum height can be set. Typically for images, the source image could be very small, so this setting creates a potentially enlarged image for display.

Maximum Width

The component maximum width can be set. Typically for images, the source image could be very large, so this setting creates a 'thumbnail' i.e. a smaller image for display.

Minimum Width

The component minimum width can be set. Typically for images, the source image could be very small, so this setting creates a potentially enlarged image for display.

Title

This is the tooltip which hover over the component when the mouse is over the field. Setting this can add clarity to end-users who need more information about a specific component.

Alternate Title

Web applications showing images should have another title which is displayed if the underlying image cannot be rendered e.g. missing. This is displayed instead of the missing image.

Data Sources

This tab is where a single 'Read' data source request can be added to pull data from a ReST API to populate this component on the form.

Add

This button opens the Select Data Source Request modal popup to choose a ReST API data source request to link to populate the component data.

Once the data source request is selected, it will be displayed in this tab.