...

Steps

Screen (Click to view)

Start the Joget Server and open and open the App Center.
Log in as admin and click on the pencil icon on the Expenses Claim to open the Design App. (see Figure 1)
Click on the Create New Form button and fill up the Form Details as follows (see Figure 2):
1. Form ID: multiPageForm
2. Form Name: Multi Paged Form
3. Table Name: j_expense_claim
Drag and drop a Multi Paged Form element on to the canvas.
Hover the mouse over the Multi Paged Form element on the canvas and click on Edit to open up the Edit Multi Paged Form properties.
Click on the Next button to access the Page 1 properties. (see Figure 3)
In the Form field, select Expense Claim New and click Next button to access the Page 2 properties.
In the Form field, select Expense Claim Form and click on the OK button. (see Figure 4)
Click on Preview and navigate between the forms by clicking on Page 1 or Page 2 to their respective forms. You can also click Prev and Next button at the lower corner to navigate between the forms. (see Figure 5)

^{Figure 1}

^{Figure 2}

^{Figure 3}

^{Figure 4}

^{Figure 5}

...

Name	Description	Screen (Click to view)
Display Mode	Determines if the multi-paged form will be displayed in wizard or tabs.
Previous Button Label	Previous Button Label.
Next Button Label	Next Button Label.
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.

Multi Paged Form Tips

Here is some rule of thumb for multi-page forms:

Parent form and child forms (subform in multi-page) should have different table names. For example:
- "Main parent form" table name is my_table_parent,
- "Child subform" table name is my_table_child.

Child forms in multi-page should have different table names from other child forms. If the same table name is required, disable AJAX Rendering and tick the following properties to force Joget to save tab1 before loading it in tab2, etc.:

Recommended Multi-Page Properties settings if child forms have the same table name:

Edit Multi Paged Form > Page 1 > Page 2 > Page 3 > Advanced Options
- Data Storing
  - Partially Store Form When Page Changed? Yes
  - Store Main Form Data When Partial Storing Is Enabled? Yes

Check out the free Simple Employee Management app that uses multi-page forms from Joget Marketplace.

Space shortcuts