Multi Paged Form enables one to incorporate multiple forms in one single form, in a simple and elegant way.
The form in the example shown below contains a multi-paged form with 4 pages in tabbed style.
Figure 1: Sample Multi Paged Form
The first 2 pages point to "Personal Form" and "Education Form", while the next 2 pages point back to the same set of forms but as confirmation screens. Configurations are shown below.
Figure 2: Sample Multi Paged Form Properties
Pages 3 and 4 must be referenced to the same key used in pages 1 and 2 in order to show the intended form data. Note that pages 3 and 4 are set to "Readonly". The option Partially store form when page changed? in the general settings must be checked as well.
Figure 3: Multi Paged Form - Properties
ID | Element ID |
Label | Element Label |
Number of Page | Allocates the number of pages |
Partially store form when page changed? | Stores form data of the current page on page change |
Figure 4: Multi Paged Form - Properties - Page
Label | Page name displayed in the form of breadcrumb or tab, depending on its setting in the UI |
Form | Form to be assigned to the page |
Readonly? | Determines if the page is editable |
Parent Form Field to keep Child Form ID | ID of the field in the parent form to store the page's primary key. Page data will be loaded based on the record ID retrieved from this field. |
Child Form Field to keep Parent Form ID | ID of the field in the page form to store the parent form's primary key |
Validate when change page | Performs validation on page change if checked |
| Info | ||
|---|---|---|
| ||
This field must be specified if the individual form is not storing into the same table as the parent form. |
Figure 5: Multi Paged Form - Properties - UI
Display Mode | Determines if the multi-paged form will be displayed in wizard or tabs |
Previous Button Label | Label of the navigation button |
Next Button Label | Label of the navigation button |
Only enable submit button on last page? | If checked, all of the pages' forms must be completed before form submission or task completion. |
CSS | Custom CSS implementation |