# Form

![Form](https://1117313960-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzMJAXNyRSI4WE3Jt4z%2Fsync%2Ff84eaa3f61cb942e30b68e5d19115d8fa9082d4e.png?generation=1600778693510790\&alt=media)

## Description:

Form

Forms are input-based components which are designed to collect users data. e.g. registration, login, contact form etc.

### Allowed Parent Components:

1. Card Body
2. Case
3. Col
4. Grid Child
5. Horizontal Section
6. InfoWindow
7. Popup
8. Scroll Layout
9. Tab Item
10. Vertical Section

### Allowed Child Components:

1. Action Button
2. Attachment Upload
3. Button
4. Button Dropdown
5. Button Group
6. Change Role
7. CheckBox
8. Color Select
9. Date Field
10. Icon Menu
11. Icon Select
12. Image Cropper
13. LOV
14. Monaco Editor
15. Multi Field
16. Multi Select LOV
17. Number Field
18. Password Field
19. Popover
20. Pulse
21. RadioBox
22. Rich Text Editor
23. Row
24. Scanner Field
25. Select
26. Slide Toggle
27. Slider
28. Switch
29. Tags Input
30. Text Field
31. Trigger Before Render

### Properties

### ➤ Form Fields Attached

Check this to remove vetical margin gap between the form fields

Allowed Values: Yes/No

### ➤ Form Horizontal

Check this to render form fields horizontally

Allowed Values: Yes/No

### ➤ Form Density

Allowed Values:

1. Default
2. Comfortable
3. Compact

### ➤ Label Width

Enter a numeric value to define the width of the field labels.

Allowed Values: Enter a numeric value to define the width of the field labels.

### ➤ Label Alignment

Select an option to change the alignment of the field label.

Allowed Values:

1. Start
2. End

### ➤ Show Message On Icon

Check this to show the error message on the mouseover on the icon. By default, the message will be displayed below the field

Allowed Values: Yes/No

### ➤ Multi Column

Check this to render the fields using Bootstrap Grid layout. When checked Column Size property will be visible on all fields under this form, which can be used to control the number columns to be rendered in this form.

Allowed Values: Yes/No

### ➤ Class Name Expression

Allowed Values: An expression which should return string after evaluation

### ➤ Use Existing Data Source

Choose this prop if you want to reuse a Data Source that was defined on some other component on this page or any of the parent abstract pages.

Allowed Values: Yes/No

### ➤ Data Source

Select a datasource from the list.

Allowed Values: Select a datasource from the list.

### ➤ Data Source Alias

Allowed Values: Free text field

### ➤ Default Where Clause

Allowed Values: Free text field

### ➤ Max Rows

Allowed Values: Any number value

### ➤ Order By Clause

e.g. #firstAttr#, #secondAttr# DESC

Allowed Values: Free text field

### ➤ Auto Query

Check this property to query the selected datasource on component render.

Allowed Values: Yes/No

### ➤ Execute Count SQL

Check this to execute count SQL to get the total number of rows in the database on a query. You can get this value by using the expression: #{DataStore.totalLength}

Allowed Values: Yes/No

### ➤ Execute Distinct SQL

Check this to execute distinct SQL to get the total number of distinct rows in the database on a query.

Allowed Values: Yes/No

### ➤ Insert Allowed

Allowed Values: Yes/No

### ➤ Update Allowed

Allowed Values: Yes/No

### ➤ Delete Allowed

Check to enable deleting the existing row.

Allowed Values: Yes/No

### ➤ Mask Page On Post

Check to enable page masking on save.

Allowed Values: Yes/No

### ➤ Do Not Monitor Query Request

Check to disable monitoring query request.

Allowed Values: Yes/No

### ➤ Silent Server Validate

Check to enable silent server validate.

Allowed Values: Yes/No

### ➤ Silent Fetch

Check to enable silent fetching.

Allowed Values: Yes/No

### ➤ Make New Records Dirty

Check this property to make new record dirty. If this property is checked the status of the new record will be 'Insert' else it will be 'New'

Allowed Values: Yes/No

### ➤ Margin

Select a value to add margin on all four sides of the component. It is a shorthand for margin-top, margin-right, margin-bottom, and margin-left.

Allowed Values: Any number value

### ➤ Margin Bottom

Select a value to add margin on the bottom of the component.

Allowed Values: Any number value

### ➤ Margin Left

Select a value to add margin on the left of the component.

Allowed Values: Any number value

### ➤ Margin Right

Select a value to add margin on the right of the component.

Allowed Values: Any number value

### ➤ Margin Top

Select a value to add margin on the top of the component.

Allowed Values: Any number value

### ➤ Padding

Select a value to add padding on all four sides of the component. It is a shorthand for padding-top, padding-right, padding-bottom, and padding-left.

Allowed Values: Any number value

### ➤ Padding Bottom

Select a value to add padding in the bottom of the component.

Allowed Values: Any number value

### ➤ Padding Left

Select a value to add padding in the left of the component.

Allowed Values: Any number value

### ➤ Padding Right

Select a value to add padding in right of the component.

Allowed Values: Any number value

### ➤ Padding Top

Select a value to add padding in top of the component.

Allowed Values: Any number value