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. |
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 |