Joget DX Beta Available for Download

Check out Joget DX, the next generation successor to Joget Workflow for faster, simpler digital transformation.

Skip to end of metadata
Go to start of metadata

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

Important Note about Parent Form Field to keep Child Form ID

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.


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