Multi Paged Form

The Multi Paged Form enables you to incorporate multiple forms elegantly and simply into one form.

How does it work?

To see how the Multi Paged Form works, use the built-in App Expenses Claims by following these steps:

1. Start the Joget Server and open the App Center.
2. Log in as admin and click the pencil icon on the Expenses Claim to open the App Composer.
   
3. Click the Create New Form button and fill in the Form Details:
   • Form ID: multiPageForm
   • Form Name: Multi Paged Form
   • Table Name: j_expense_claim
     
     
     
4. Click Save.
5. Drag and drop a Multi Paged Form element onto the canvas.
6. Click the Multi Paged Form element to open the Configure Multi Paged Form properties.
   
7. Scroll down to access the Page 1 properties. In the Form field, select Expense Claim New.
   
8. Scroll down to access the Page 2 properties. In the Form field, select Expense Claim Form and click on the Apply Change button.
   
9. Click Preview and navigate between the forms by clicking on Page 1 or Page 2 to see their respective forms. You can also click the Prev and Next buttons at the lower corner to navigate between the forms.
   

Configure multi paged form

The Multi Paged Form properties allow you to configure various aspects of the form, such as the number of pages, AJAX rendering, labels, and data linkage.
Fields to configure:

• ID: Element ID. A corresponding database table column c_page1 will be created by declaring it as "page1". See Form Element for more information about defining the ID and a list of reserved IDs.
• Number of Pages: Number of pages to be presented in integer.
• AJAX Rendering?: Renders page only when clicked. This option improves loading times if the end-user does not use all the forms and the number of pages is large.

Page

The Page configuration in Joget allows you to define both the general properties of a page and the data linkage and validation rules that govern its behavior within the application. This ensures that each page is properly integrated with the forms and data structures it interacts with, providing a seamless and efficient user experience.

General

The General section in the Page configuration defines a page's basic properties and behaviour within the Joget platform. This includes settings for the page name, associated form, and its read-only status. These properties help organize and appropriately display the page content within the application.

Fields to configure:

• Label: Page name displayed in the form of a breadcrumb or tab, depending on its setting in the UI.
• Form: Target Form.
• Readonly?: Determines if the page is editable.
• Display field as Label when readonly?: Displays the value of the element as plain text when an element is set to Readonly.

Data linkage & validation

The Data Linkage & Validation section is essential for managing how data flows between parent and child forms in a Joget application. This includes establishing relationships between forms and ensuring data integrity through validation when navigating between pages. These settings help maintain consistency and accuracy of data across linked forms.

Fields to configure:

• Parent Form Field to keep Child Form ID: The 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: This field must be specified if the individual form is not stored in the same table as the parent form. The field specified does not need to be first created in the parent form.
• Child Form Field to keep Parent Form ID: The ID of the field in the page form to store the parent form's primary key.
• Validate when change page: Performs validation upon changing pages if checked.

Advanced Options

The Advanced Options section provides additional settings that enhance forms' functionality, customization, and performance in Joget applications. These options allow users to fine-tune how forms behave, including how data is stored and managed, ensuring that the application meets specific requirements and handles data efficiently.

Data Storing

The Data Storing settings focus on how and when form data is saved during the user's interaction with the form. This includes options for partial data storage, which allows for more flexible and responsive form navigation by saving data incrementally as the user moves through different pages.

Fields to configure.

• Partially store form when page changed?: Partially store form when the user navigates between pages.
• Store main form data when partial storing is enabled?: Store main form data when partial storing is enabled.
  This option is available when Partially store form when page changed? is enabled.

UI

The UI (User Interface) section allows you to customize the visual presentation and navigation of multi-paged forms in Joget applications. These settings control how forms are displayed, how users move between pages, and the overall look and feel of the form, enhancing user experience and ensuring clarity and ease of use.

Fields to configure:

• Display Mode: Determines if the multi-paged form will be displayed in the wizard or tabs.
• Previous Button Label: Label for the previous button.
• Next Button Label: Label for the next button.
• Only enable submit button on last page?: If checked, all of the pages' forms must be completed before submission of the form or task completion.
• CSS: Custom CSS implementation.

Video tutorial

This video tutorial will guide you in creating a multi-tab form in Joget step-by-step. You will learn how to configure pages and link data between forms, ensuring smooth navigation and accurate data validation.

Multi paged form tips

Here are some best practices for configuring multi-page forms:

1. Different Table Names for Parent and Child Forms:

   • Parent Form: The main parent form should have a different table name than the child forms.
     • Example: my_table_parent
   • Child Form: The child subform should also have a unique table name.
     • Example: my_table_child
2. Unique Table Names for Each Child Form: Child forms in a multi-page setup should have distinct table names. If the same table name is necessary, follow these steps to ensure proper data saving:
   • Disable AJAX Rendering: This ensures that each tab's data is saved before moving to the next tab.
   • Set Properties: Configure the properties to save the form data properly.
3. Recommended Multi-Page Properties Settings:

• • Edit Multi-Paged Form:
    • Page 1: Configure as required.
    • Page 2: Configure as required.
    • Page 3: Configure as required.
  • Advanced Options:
    • Data Storing:
      • Partially Store Form When Page Changed? Yes
      • Store Main Form Data When Partial Storing Is Enabled? Yes

Additional resources

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