Components

Overview

Components in FormQL are the representation of an interaction with the user such an input field or an interactive graph. These components implement the ControlValueAccessor from Reactive Forms to create a custom form control directive.

FormQL comes with a basic list of components but they can be extended by using the Bundles for specific design systems such as Bootstrap or Material Design. It is also possible to extend FormQL by creating your own custom components, see Creating custom components for more details.

Component Editor

A component can be edited by clicking on the pencil icon that appears on the top of the component area when hovering over it

Component Properties

There are a number of properties in the component editor as seen in the screenshot below

• Component Id (string): component internal identifier, this is read only
• Label (string): label to show in the component, this can be used to display the label on an input field, a title for a graph or any other type of component
• Component Name (string): picklist with the list of components available, it will contain the components coming with FormQL, components from the Bundles if they are installed in the app and any other custom component created in the application that implements the FormQL signature (see Creating custom components for more details)
• Type (string): this property is accessible from the component and can be used to specify a type of functionality (e.g. type in FormQLInputComponent is passed to the type property in the input tag <input type="{value}">)
• Schema (string): the schema is an expression that defines the mapping between the data model and the component. Example: In an object where the data is:

{
    "contact": {
        "firstName": "Pedro",
        "lastName": "Garcia"
    }
}

in order to map the firstName attribute to the component, the schema needs to be defined as contact.firstName

• TextMask (string): the framework implements internally the angular2-text-mask library, this field is used to pass the regular expression and format the value.
• Configuration (any - JSON object): custom configuration to be passed to the component.
• Style (any - JSON object): ngStyle object to be passed to the component wrapper.