Title Element

This widget allows you to design titles for the form. A Title Element is rendered as non-editable and text-only field in the form output. To add a title on the form, drag and drop the Title Element onto the workspace and configure the required settings.

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

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

Display Tab

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

Figure 3 Title Element - Display tab

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

  • Title Content: The content for this component.

  • Attributes: Allows you to add an attribute and the corresponding value to the Title Element. For example, a href attribute with URL value or a src attribute with the path to a specific image to display. You can select Add Another button to add multiple attributes to this component.

  • CSS Class: Add the class name for the title component. The title will be styled based on the class name definition in the CSS stylesheet.

  • 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.

  • Initial Focus: When the form is rendered, this component will become the initially focused element 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 4 Title Component - Data tab

The following fields are listed in the Data tab of Title 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.

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 Title 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.