...

Steps

Screen (Click to view)

Start the Joget Server 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}

How to Create a Form with Multiple Tabs

Widget Connector

width	650
url	https://www.youtube.com/watch?v=eELNrRay58U

Multi Paged Form Properties

...

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.

...