Label Element

This widget allows you to design and create labels used in the forms. Usage of the label element is simplified by the fact that the label content is non-editable in the rendered output and is meant for displaying information to the user. To add a label field on the form, drag and drop the Label Element onto the workspace and configure the required settings.

The following section covers the settings displayed in the LABEL ELEMENT COMPONENT window. These settings are common for most of the components, except few which may not apply to the Label Element. Select the required setting as applicable to your use case.

See the tooltip which appears when you position the cursor over the icon for information on what a field does.

Display Tab

The settings under the Display tab allows you to define how the Label Element would appear on the form upon rendering.

Figure 1 Label Element - Display tab

The following fields are listed in the Display tab of Label Element component:

  • Label: Define a name or title for this component. This field is mandatory.

  • Label Position: The position and alignment of the label for this component.

  • Label Width: The width of the label on a line. Provide the value in terms of percentage.

  • Label Margin: The width of the label margin on a line. Provide the value in terms of percentage.

  • Label Content: The HTML tag for this component.

  • Widget: The display user interface used to input value for this component.

  • Placeholder: The placeholder text that will appear when the input field is empty.

  • Description: The text that will appear below the input field.

  • Tooltip: The text that will appear in the tooltip when the user hovers on the tooltip icon added to the side of the label.

  • Custom CSS Class: Allows you to add a custom CSS class to this component. You can add multiple class names separated by a space.

  • Tab Index: Set the tabindex attribute of this component to override the tab order in the form. The default value “0” implies that the component participates in sequential keyboard navigation via the Tab key. When navigating the form using the Tab key, a component with tab index value of 4 is honored before the components with tab index value of 5. Higher the value, lower the priority in sequence (excluding 0).

  • Hidden: The component will be a part of the form JSON, but will be hidden from view after the form is rendered.

  • Hide Label: Hides the label of this component. The label will display in the Form Builder user interface, but will be hidden after the form is rendered.

  • Hide Colon: Hides the colon (:) symbol.

  • Initial Focus: When the form is rendered, this component will become the initially focused field on the form. Note that only one component in a form can carry the Initial Focus setting.

  • Disabled: Disables the user input for this component in the form.

  • Table View: Shows the value in the table view of the submission list.

  • Modal Edit: Enables a modal window for editing the value of this component on the form.

Data Tab

The settings under the Data tab allows you to define the default value and format of the component to be displayed on the form.

Figure 2 Label Element - Data tab

The following fields are listed in the Data tab of Label Element component:

  • Redraw On: Resets the input field to default value if there is any change in the form, or when a change is detected in a specific form component selected from the drop-down list.

  • Clear Value When Hidden: When a field is hidden, clear this component’s value.

  • Custom Default Value: Use the variables listed here to write and execute JavaScript code or custom logic using JSONLogic to customize the value that will be populated in this component on the form.

  • Calculated Value: Use the variables listed here to write and execute JavaScript code or custom logic using JSONLogic to calculate value for this component based on the values in other fields of the form.

  • Allow the calculated value to be overridden manually: Allows the user to override the calculated value manually.

Validation Tab

The settings under the Validation tab allows you to add validation checks on the component.

The following fields are listed in the Validation tab of Label Element component:

  • Validate On: Determines when this component will trigger a front-end validation.

  • Required: Marks this component as mandatory which will ensure that the user fills it before submitting the form.

  • Error Label: Add a label for this field that will display when there is an error.

  • Custom Error Message: The error message that will display when a validation error is detected in the input field of this component.

  • Custom Validation: Execute javascript code to perform validation on the component. The way to respond is by setting the valid variable. If it is set to true then the validation passes. If you set it to a string, the validation fails and the validation message is set to whatever the valid variable is set to.

  • JSONLogic Validation: Execute custom logic using JSONLogic for validation.

API Tab

The settings under the API tab allows you to define the property name and configure any custom properties for the selected component.

The following fields are listed in the API tab of Label Element component:

  • Property Name: Form components directly translate to a resource property on the API that is generated for the form. By default, property name is generated by applying the camel case format to the label field of this component, but you can change it in the API tab.

    NOTE:Every component must have a unique Property Name.

  • Field Tags: Tag the field for use in custom logic or within your application.

  • Custom Properties: Allows you to configure any custom properties for this component by setting a ‘Key’ and ‘Value’ property.

Conditional Tab

The settings under the Conditional tab allows you to determine the conditions for displaying or hiding the selected component in a form. You can define a simple conditional logic based on the following rules to determine when to hide or display the component:

  • True to display and false to hide the component.

  • The visibility depends on another component within the same form.

  • The logic is activated when the dependent component contains the defined plaintext value.

In addition to simple conditional logic, you can also use advanced conditional logic, which allows you to enter custom JavaScript code or custom JSON logic for any combination of conditions.

Advanced conditional logic will override the results of the simple conditional logic.

Logic Tab

The settings under the Logic tab allows you to define and configure multiple logics and actions for the selected component. This helps you to design a form which can perform certain defined actions for the defined logic.

Layout Tab

The settings under the Layout tab allows you to define the HTML attributes and map those attributes with the component’s input element. You cannot edit the component type from the values you specify in this tab. For example, if you select a Text Field component, you cannot change the component type to a different value such as a Checkbox.