Versions Compared

Old Version 2

changes.mady.by.user Aadrian Zarin

Saved on

compared with

New Version 3

changes.mady.by.user Aadrian Zarin

Saved on

Key

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


Panel
borderColorpurple
borderWidth1
titleBGColor#ddccff
borderStylesolid
titleNew Feature

This feature has been enhanced in Joget Workflow v6.

  1. AJAX Rendering

Table of Contents

Introduction

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

The Advanced Grid 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:

StepsScreen (Click to view)
  1. Start the Joget Server  and open the  App Center.

  2. Log in as  admin  and click on the pencil icon on the  Expenses Claim  to open the  Design App. (see Figure 1)

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


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

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

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

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

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

  9. 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 Added

Figure 1


Image Added

Figure 2


Image Added

Figure 3


Image Added

Figure 4


Image Added

Figure 5



Multi Paged Form Properties

...

Data Linkage & Validation

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.

Image Modified

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

Data Storing

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

Info

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

UI

NameDescriptionScreen (Click to view)
Display Mode

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

Image Modified



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.