A Tree component is very similar to the Edit Grid component. It replicates a table like structure when it comes to the capture and display of form data. But, in comparison with the Edit Grid, the Tree component creates a tree like pattern where users can create a numerous number of data branches. There can only be one top level data entry - a root data entry, which is followed by level 1 data branches, which then are followed by level 2 data branches and so on.
By default, the component is empty, but can have other form components placed inside.
Example 1:
The example below illustrates four components placed inside the Tree. 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 example below shows the Tree component in the rendered form. The form layout is displayed when initialized, by default. Once filled in, click the 'Save' button to save the top level data entry.
How to Enter Data:
1. When the form is saved, the root data entry is added to the table. To add a level 1 data entry, press the 'Add' button next to the root data entry, and the new form layout will open then for filling in. Once filled in, it will display as a branch below the root entry. The same way it works for any other levels of data entries.
2. When the form is saved, the level 1 data entry is added to the table as a branch entry stemming from the top level entry. If you want to edit any data entry, just press the 'Edit' button next to the data entry you want to edit. It will turn to the form layout, which can be edited then. If you like to delete any data entry, press the 'Delete' button next to that data entry.
3. For convenience matter, when the number of data entries is quite big, you can collapse them by pressing an appropriate button next to the parent data entry.
4. When you want to show them again, press the 'Expand' button next to a corresponding parent entry. If you edit data of one of the entries and save the changes, you will see the 'Revert' button next to that data entry. When pressed, the changes will be reverted.
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.
- Placeholder: With this setting you can place text which will appear in the field when it's empty.
- 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.
- Custom CSS Class: With this setting you can add a CSS class. Multiple classes can be added and they class names can be separated by only a space.
- Tab Index: The setting Tab Index indicates which element in a form can be focused and which can be unfocused. It works as a global attribute. It gives 3 different type of results depending on the integer. Negative Integer (-1) indicates that the elements are unfocused and they are unreachable by sequential navigation. Zero Integer (0) indicates that the elements are focused and they can be reached with a sequential navigation. Positive Integer (1) it works as the zero integer but in the positive integer you can set up 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.
- 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.
Data Tab:
- Multiple Values: If you enable this setting you can add multiple values in the field. By clicking on "Add Another" button you can add more values and they will form an array.
- Default Values: The default value (if given) will be the value in the text field unless user enter it manually. If you use default value you can no longer use place holder settings.
- 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:
- 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.
- 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.
- 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.