Browse Source

docs: form view

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
pull/6467/head
Raju Udava 1 year ago
parent
commit
7c0bd4d6fd
  1. 8
      packages/noco-docs/docs/080.views/025.share-view.md
  2. 80
      packages/noco-docs/docs/080.views/040.view-types/030.form.md
  3. BIN
      packages/noco-docs/static/img/v2/views/form-specific-configurations.png
  4. BIN
      packages/noco-docs/static/img/v2/views/form-view-add-field.png
  5. BIN
      packages/noco-docs/static/img/v2/views/form-view-field-label-and-help-text.png
  6. BIN
      packages/noco-docs/static/img/v2/views/form-view-field-label-help-text.png
  7. BIN
      packages/noco-docs/static/img/v2/views/form-view-layout.png
  8. BIN
      packages/noco-docs/static/img/v2/views/form-view-remove-field.png
  9. BIN
      packages/noco-docs/static/img/v2/views/form-view-required-field.png
  10. BIN
      packages/noco-docs/static/img/v2/views/form-view-settings.png
  11. BIN
      packages/noco-docs/static/img/v2/views/form-view-title-description.png
  12. BIN
      packages/noco-docs/static/img/v2/views/form-view.png
  13. BIN
      packages/noco-docs/static/img/v2/views/survey-form.png

8
packages/noco-docs/docs/080.views/025.share-view.md

@ -32,6 +32,14 @@ You can toggle `Allow Download` button to enable or disable download CSV/XLSX op
![download options](/img/v2/views/share-view-download.png)
### Share Form View Options
Form view has additional customizations for shared view. You can enable/disable the following options for shared form view:
1. `Survey mode`: This option when enabled, will display the form in survey mode.
2. `RTL Orientation`: This option when enabled, will display the form in RTL orientation.
3. `Themes`: You can select a theme for the form from the dropdown.
![form view options](/img/v2/views/form-specific-configurations.png)
## Access Share View
To access the shared view, please follow the steps below:
Click on the `Shared View URL`. If the URL is password-protected, you will be prompted to enter the password to unlock it. Please input the required password to proceed.

80
packages/noco-docs/docs/080.views/040.view-types/030.form.md

@ -3,10 +3,84 @@ title: 'Forms'
---
Form View allows you to arrange fields in a form to input data.
![1010-2 Form](/img/content/form.png)
You can drag-drop fields from the form to form-field-menu-bar as required.
![1010-2 Form](/img/v2/views/form-view.png)
## Form View Builder
Form view builder layout can be divided into 3 sections:
1. **Fields Area** - This is the area where fields available in the tables that are not yet added to the form are listed.
2. **Form Area** - This is the area where fields added to the form are listed.
3. **Form Settings** - This is the area where you can configure the form view. This mainly consists of actions & customisations that can be performed after a form view is submitted.
![Form Builder](/img/v2/views/form-view-layout.png)
## Form View Actions
1. [Create a New Form View](/views/create-view/#create-new-view)
2. [Rename an Existing Form View](/views/actions-on-view#rename-view)
3. [Duplicate a Form View](/views/actions-on-view#duplicate-view)
4. [Remove a Form View](/views/actions-on-view#delete-view)
5. [Share a Form View](/views/share-view)
6. [Lock Form View for Edits](/views/overview#view-permission-types)
## Form View Operations
### Add Form Title & Description
In the **Form View** area, click on in input boxes provided for **Title** <1> & **Description** <2> to add/update title & description to the form.
![Form Title & Description](/img/v2/views/form-view-title-description.png)
### Add Fields to the Form
To add a field to the form, either
- Drag and drop the field from the **Fields Area** to the **Form Area** at required position
- Click on the field in the **Fields Area** to add it to the end of the **Form Area**
### Change field label & help-text
To change the field label displayed on the form & add help-text, click on the field in the **Form Area** and update the values in the input boxes provided for **Label** <1> & **Help Text** <2>.
![Field Label & Help Text](/img/v2/views/form-view-field-label-help-text.png)
### Mark a Field as Required
To mark a field as required, click on the field in the **Form Area** and toggle the `Required` switch.
![Required Field](/img/v2/views/form-view-required-field.png)
### Rearrange Fields Within the Form
To rearrange fields within the form, drag and drop the field to the required position.
### Remove Fields from the Form
To remove a field from the form, either
- Drag and drop the field from the **Form Area** to the **Fields Area**
- Hover over the field in the **Form Area** and click on the `hide` icon
![Hide Field](/img/v2/views/form-view-remove-field.png)
### Add a New Field to the Table
To add a new field to the table,
- Click on the `+ Add new field to this table` in the **Fields Area** and
- Select the field name & type from the dropdown.
- Click on `Save Column`
![Add Field](/img/v2/views/form-view-add-field.png)
### Form View Settings
NocoDB allows you to configure the form view to perform various actions after a form is submitted. These actions can be configured in the **Form Settings** area.
1. **After Submit Message**: You can configure a message to display on successful submission of the form.
2. **Show `Submit Another Form` Button**: This option when enabled, will display a `Submit Another Form` button after the form is submitted.
3. **Show a Blank form**: This option when enabled, will display a new blank form 5 seconds after the form is submitted.
4. **Email me**: Enable this option to receive an Email after the form is submitted.
![Form View Settings](/img/v2/views/form-view-settings.png)
## Survey Form View
NocoDB supports a special type of form view called `Survey Form View`. This view is ideal for creating surveys & questionnaires. This view can be enabled by toggling the `Survey Mode` switch when creating [shared form view](/views/share-view#share-form-view-options).
When enabled,
- Form input fields will be displayed one at a time.
- Users can navigate between fields using the `<` & `>` buttons.
![Survey Form View](/img/v2/views/survey-form.png)
## Related articles
[Grid View](/views/view-types/grid)
[Form View](/views/view-types/grid)
[Gallery View](/views/view-types/gallery)
[Kanban View](/views/view-types/kanban)

BIN
packages/noco-docs/static/img/v2/views/form-specific-configurations.png vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 386 KiB

BIN
packages/noco-docs/static/img/v2/views/form-view-add-field.png vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 342 KiB

BIN
packages/noco-docs/static/img/v2/views/form-view-field-label-and-help-text.png vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 412 KiB

BIN
packages/noco-docs/static/img/v2/views/form-view-field-label-help-text.png vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 322 KiB

BIN
packages/noco-docs/static/img/v2/views/form-view-layout.png vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 336 KiB

BIN
packages/noco-docs/static/img/v2/views/form-view-remove-field.png vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 297 KiB

BIN
packages/noco-docs/static/img/v2/views/form-view-required-field.png vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 313 KiB

BIN
packages/noco-docs/static/img/v2/views/form-view-settings.png vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 321 KiB

BIN
packages/noco-docs/static/img/v2/views/form-view-title-description.png vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 321 KiB

BIN
packages/noco-docs/static/img/v2/views/form-view.png vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 260 KiB

BIN
packages/noco-docs/static/img/v2/views/survey-form.png vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 205 KiB

Loading…
Cancel
Save