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: 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. |
Important Note
This field must be specified if the individual form is not storing into the same table as the parent form.
Field specified do not need to be first created in the parent form.
|
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 |
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 |