Edit Grids allow users to replicate a table like structure when it comes to the capture and display of form data. Users can add multiple components inside the Edit Grid. Additionally, any number of grids can be added within a form, which is especially useful when needing the ability to add or duplicate multiple fields sets.
By default, the grid is empty, but can have other form components placed inside.
Example 1:
The example below illustrates five components placed inside the Edit Gird. Layout components can be used to replicate the split view below, and additional rows are added automatically when additional form elements are dragged into the interface.
Example 2:
The other example below shows the Edit Grid in the rendered form. The form layout is displayed when the 'Add Another' button is pressed, and the form appears below the grid for user entry. Once the forms are filled out, press the 'Save' button inside each of them.
When the forms are saved, the data entries are added to the table, and the data display in the entries below each respective header, independent of the form layout. If you want to edit the saved data entry, press the 'Edit Row' button next to the appropriate entry, which then will turn into the form layout for editing. If you want to remove a certain data entry, just press the 'Remove Row' button.
Display Tab:
- Label: You can place the title or name in this component.
- Label Position: With this setting you can adjust the position of component name and label.
- Label Width: With this setting you can adjust the width of component name and label.
- Label Margin: With this setting you can adjust the margins of component name and label.
- Description: In description field you can enter text which will appear under the Input Field.
- Tooltip: Entering data here will create a tooltip icon on the field.
- Open First Row When Empty: Opens up the first row when the Edit Grid is empty. This way, the Edit Grid will never be empty.
-
Disable Adding / Removing Rows: Hides the 'Add Another' and the 'Remove Row' buttons.
- Conditional Add Button: Gives a possibility to specify a condition when the 'Add Button' will be displayed.
- 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.
- Initial Focus: Enabling this setting can make the field initially focused. Please note that only one field or component can be the initial focus in a form.
- 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 submission list of the table view.
Templates Tab:
It is a list of the specific settings of the Edit Grid component.
- Header, Row and Footer Templates: Edit Grid gives the user flexibility to customize the grid to how they see fit using basic JavaScript. Within the Template section of the component settings, the user can modify what type of components are displayed within the grid row along with the header / footer.
- Add Another Text: Sets the text of the 'Add Another' button.
- Display As Modal: Shows up the form layout to add or edit a data entry in a modal view.
- Save Row Text: Sets the text of the 'Save Row' button.
- Remove Row Text: Sets the text of the 'Remove Row' button.
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 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 make the performance better when queries are submitted.
- Encrypted: Encrypt this field on the server. It is a 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 component if the other component is updated.
- Clear Value When Hidden: As the name suggest the value of this field will be cleared if the hidden option is selected.
- Calculate Value on server: As the name suggest, if you select this setting, it will run the calculations on your server.
- Allow Manual Override of Calculated Value: As the name suggest, if you select this setting, it will allow you to override the calculated values.
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 i.e., Change and Blur.
- Required: Enabling this setting will make this component a must and user can not 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.
- Minimum Length: In this setting you can define the minimum limit required in this field.
- Maximum Length: In this setting you can define the maximum limit required in this field.
- Error Label: With this setting you can enter text which will be displayed when the field display an error message.
- Custom Error Message: In this setting you can enter the error message which will be displayed to the user if any error occurred while filling 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 the 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" if this component should display.
- When the form component: In this setting you can choose if you want the component to be displayed after the it is submitted.
- Has the value: In this setting you can choose the value of the component when it shall be hidden or displayed.
Layout Tab:
- HTML Attributes: In this setting you can enter HTML attributes map for components input.