Joget DX 8 Stable Released
The stable release for Joget DX 8 is now available, with a focus on UX and Governance.
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
Figure 2: 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 34: 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 45: 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 |
...