A Container serves as a wrapper around a set of fields, akin to a Field Set. However, the key difference lies in how the data is stored. In most layout components, field values are directly stored in the data of the submission.
For instance, a Field Set with the following fields:
firstName = First Name field
lastName = Last Name field
would be submitted as:
Conversely, when using a Container, the fields are encapsulated within an object bearing the container key. This is particularly useful when you need to create more intricate data structures within your form.
For instance, a Container with the key "user" and the same fields as above would be submitted as:
This arrangement enables you to structure and organize your form data in a more complex and meaningful manner.
Display Tab:
- Label: You can place the title or name in this component.
- Label Position: This setting allows you to adjust the position of the component name and label.
- Label Width: This setting allows you to adjust the width of the component name and label.
- Label Margin: With this setting, you can adjust the margins of the component name and label.
- Tooltip: Entering data here will create a tooltip icon on the field.
- Custom CSS Class: With this setting, you can add a CSS class. Multiple classes can be added, and class names can be separated by only a space.
- Tab Index: The Tab Index setting indicates which element in a form can be focused and which cannot. It works as a global attribute and provides 3 different results depending on the integer. A Negative Integer (-1) indicates that the elements are unfocused and unreachable by sequential navigation. Zero Integer (0) indicates that the elements are focused and can be reached with sequential navigation. A Positive Integer (1) functions like the zero integer but allows setting an order depending on the number.
- Hidden: Enabling this setting will hide your field from viewing when the form is extracted.
- Hide Label: In this component, you can hide the label or name. Sometimes you only need the component field and not the label; hide label is used for that purpose.
- Disabled: Enabling this setting will disable the component from the form.
- Table View: When this setting is enabled, the data on this component will only show up in the submission list of the table view.
Data Tab:
- Persistent: If you enable this setting, your data will not emerge in the properties.
- Protected: If you do not want to show the input value in properties when queried by the API, you can enable this setting.
- Database Index: If you select this setting, this will create an index within the database which will help to improve performance when queries are submitted.
- Encrypted: Encrypt this field on the server. It is two-way encryption, and it is not appropriate for passwords. This setting is only available on the ‘Enterprise’ project plan.
- Redraw On: With this option, you can link or connect another component; you can redraw the component if the other component is updated.
- Clear Value When Hidden: As the name suggests, the value of this field will be cleared if the hidden option is selected.
- Calculate Value on server: As the name suggests, if you select this setting, it will run the calculations on your server.
Validation Tab:
- Validate On: Selecting this setting will determine when to allow the front-end validation of the component. It provides two options to choose from: Change and Blur.
- Required: Enabling this setting will make this component a must, and the user cannot submit the form without filling this component.
- Unique: Enabling this setting will help the user understand that this information is not provided before while submitting the form.
- Error Label: With this setting, you can enter text that will be displayed when the field displays an error message.
- Custom Error Message: In this setting, you can enter the error message that will be displayed to the user if any error occurs while filling out the form.
API Tab:
- Property Name: In this setting, you can provide the name of the field in the API endpoint.
- Field Tags: In this setting, you can enter the tags for the field that can be used in custom logic.
- Custom Properties: In this setting, you can enter any custom properties to configure this component.
Conditional Tab:
- This component should Display: In this setting, you can choose "True and False" to determine if this component should display.
- When the form component: In this setting, you can choose if you want the component to be displayed after it is submitted.
- Has the value: In this setting, you can choose the value of the component when it should be hidden or displayed.
Layout Tab:
- HTML Attributes: In this setting, you can enter HTML attributes map for the component's input.