Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

Introduction

English

The Multi Paged Form enables one to incorporate multiple forms in one single form, in a simple and elegant way.

...

This form element is only available

...

on Professional and Enterprise Edition.

Get Started

The easiest way to see how the Multi Paged Form works are to use the existing built-in App Expenses Claims. Here are the steps:

...

  1. Start the Joget Server

...

  1. and open the

...

  1. App Center.

  2. Log in as admin and click on the pencil icon on the  Expenses Claim to open the

...

  1. Design App. (see Figure 1)

    Image Added
    Figure 1

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

    Image Added
    Figure 2

  3. Drag and drop a  Multi Paged Form element on to the canvas.

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

  5. Click on the Next button to access the Page 1 properties. (see Figure 3)

    Image Added
    Figure 3

  6. In the Form field, select Expense Claim New and click Next button to access the Page 2 properties.

  7. In the Form field, select Expense Claim Form and click on the OK button. (see Figure 4)

    Image Added
    Figure 4

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

Image Removed

Figure 1

Image Removed

Figure 2

Image Removed

Figure 3

Image Removed

Figure 4


  1. Image Added

  1. Figure 5

How to Create a Form with Multiple Tabs

Widget Connector
width700
urlhttps://www.youtube.com/watch?v=eELNrRay58U
height600550


Multi Paged Form Properties

Edit Multi Paged Form

Image Added

Image Removed
NameDescription
IDScreen (Click to view)

Element ID (By declaring as "page1", a corresponding database table column "c_page1" will be created).

Please see Form Element for more information about defining the ID and list of reserved IDs.

IDElement ID.

Number of PagesNumber 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

General

Image Added

Image Removed
NameDescriptionScreen (Click to view)
Label

Page name displayed in the form of breadcrumb or tab, depending on its setting in the UI.

FormTarget 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

Image Added

Image Removed
NameDescriptionScreen (Click to view)
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.

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

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 Advanced Options

Data Storing

Image Added

NameDescriptionScreen (Click to view)
Partially store form when page changed?Partially store form when the user navigates between pages.

Image Removed

Store main form data when partial storing is enabled?

Store main form data when partial storing is enabled.

Info

This option is available when "Partially store form when page changed?" is enabled.

UI

Image Added

Image Removed
NameDescriptionScreen (Click to view)
Display Mode

Determines if the multi-paged form will be displayed in wizard or tabs.

Previous Button LabelPrevious Button Label.
Next Button LabelNext 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 .