UI Component - UI Design

The componentHTML field allows you to define the appearance and functionality of a UI component.

Formbird UI Components make use of the AngularJS framework which extends HTML with capabilities that would otherwise require extensive coding to implement. A good understanding of AngularJS and the features that it provides is essential in order to fully benefit from its use. The examples shown within this documentation only refer to some of the AngularJS features that are available to use. Please refer to the AngularJS documentation to learn more about what is available; to run through their tutorials; and for a complete reference to their framework. See:

​ https://angularjs.org/

​ https://www.w3schools.com/angular/

Wherever possible, try to make use of AngularJS Directives and Expressions to simplify the UI Component development process. The Formbird platform includes some of its own custom AngularJS Directives to assist with this step also. The following are used in almost all of the UI Components provided with the Formbird platform:

A good understanding of Bootstrap and CSS are also recommended to assist with the styling of UI Components. Bootstrap classes may be applied to your UI Components to manage the look and feel of your UI Components. You may also include CSS snippets directly within the componentHTML field to further control the desired appearance.

The following example of a componentHTML value is the taken from the sc-text-box UI Component:

<style>
.sc-textbox-class label.control-label{
  line-height: 1.10142857!important;
}
</style>

<div class="sc-textbox-class form-group label-floating">
    <ft-label></ft-label>
    <input type="text" class="form-control" ng-model="doc[fieldName]" id="{{fieldName}}" name="{{fieldName}}" ng-disabled="readOnly" ng-readonly="readOnly" >
    <ft-validation-message ng-model="doc[fieldName]"/>
</div>

In the above example:

Lines 1-5 use a HTML <style> tag to define a new CSS class, .sc-textbox-class, to apply to the UI Component.

Lines 7-11 define the <div> container that encapsulates the UI Component. It does the following:

• the previously defined CSS class .sc-textbox-class is applied to the div container, along with the Bootstrap classes form-group and label-floating for styling.
• the ftLabel directive is applied using the <ft-label> tag. This allows the UI Component's label, that will be defined on a template, to be displayed.
• the <input> tag adds a HTML input field of type "text", styled using the Bootstrap class .form-control. The input field is bound to the component name that will be defined on the template using the ng-model directive. An AngularJS Expression of {{fieldName}} is specified to set the "id" and "name" attributes of the <input> tag. This expression evaluates to the component name that will be defined on the template. Finally, the AngularJS directives ng-disabled and ng-readonly are applied to the input field.
• the ftValidationMessage directive is applied using the <ft-validation-message> tag. This applies the on-screen validation prompts to appear if validation fails. The ng-model directive binds the validation check to the component name that will be defined on the template.

0