Managing Multi-page Form Component

TABLE OF CONTENTS

• Configuration Settings
• Appearance Settings
• Configuring Pages
  • Sections Overview
  • Fields Overview
• Example: Creating a Page in the Configurator
• Example: Multi-page User Registration Form

The Multi-page Form Component enables you to create a form split across multiple pages.

Configuration Settings

The Multi-page Form Component includes a wide range of configuration options to tailor the functionality and behavior of your form. Below are the key settings:

Appearance Settings

The Multi-page Form Component supports the following appearance customization:

Configuring Pages

The Configure Pages option allows to add, remove, and customize pages in your multi-page form. Click the Configure Pages option from the Configuration tab to access the configurator. Here, you can configure two main aspects of the form:

• Sections
• Fields

Sections Overview

Sections act as the building blocks of a multi-page form and allow users to group related fields. The configurator has the following key features for managing sections:

• Section List Panel (Left Side): This panel displays an overview of all created sections. Users can click a section name to focus on or edit it. Also, this is where you can add new sections by clicking the "+" button.
  
• Section Layout Panel (Middle Area): This panel displays the structure of the selected sections. Each section includes a placeholder for adding fields where you can drag and drop existing fields from the Fields section or click the + button above to add fields directly into the selected section.
  
• Section Properties Panel (Right Area): This panel on the right-hand side of the configurator displays section properties when the section is selected. This is where you can customize the following section properties:
  
  

  Setting	Description
  ID	A unique identifier for the section.
  Navigation Heading	The label displayed in the form’s navigation.
  Section Heading	The title displayed at the top of the section within the form.
  Show Heading in Form	Toggle to display or hide the section heading.
  Visibility	Control whether the section is visible to users.
  Read-only	Make the section non-editable if required.
  Omit from Summary	Exclude the section from summary views.
  Show Tooltip Icons	Enable tooltips to provide additional guidance.

Fields Overview

Fields represent the input elements of a form where users can enter data. The configurator provides means for creating and organizing the fields. The configurator has the following key features for managing fields:

• Fields Panel (Bottom Left): This panel displays a list of available fields.
  Here you can add new fields by clicking the "+" button and then selecting the required type. After the field has been created, you can drag and drop it onto the Section Layout Panel (Middle Area). Fields added to the layout are marked with a green check icon (), while those not yet added are indicated by an orange exclamation mark ().
  
  The Fields Panel also provides filtering options to help you quickly locate fields:
  1) filter by name (),
  2) filter by the status icons ( / ).
   
• Fields Properties Panel (Right Area): This panel displays field properties. Typically, fields have such properties as Name, Field type, and Visibility. Additional properties depend on the specific field type. For instance, text fields have settings for a header tooltip, read-only mode, default value, and input field size. You also have the options to edit the field's appearance or delete the field.

Example: Creating a Page in the Configurator

In this example, we'll create a new page in the configurator.

Step 1: Add Sections

1. Navigate to the Section List Panel (Left Side) and click the "+" button to add a new section.
2. Rename the section by selecting it and editing its properties. Customize the remaining settings based on your specific requirements.
   

   ID	user_details
   Navigation Heading	User Details
   Section Heading	Personal Information

   
   

Step 2: Create Fields

1. In the Fields Panel, click the "+" button to create a new field. For example, you can add a Short Text type field for the user's name.
2. Rename the field and configure the remaining field properties in the Properties Panel.
   

   Name	Full Name
   ID	full_name

   
3. Repeat the steps to add more fields, such as Date of Birth, Email Address, Phone Number, and so on.

Step 3: Organize Fields into the Section

1. Drag the Full Name field from the Fields panel to the User Details section in the layout panel. The field should become marked with a green check icon.
2. Repeat the step to add additional fields.
   

Step 4: Preview the Page

Once the steps are completed, you can close the configurator and check the form layout.

Example: Multi-page User Registration Form

To demonstrate the Multi-page Form Component, we’ll create a simple user registration form with three pages: Personal Information, Account Details, and Summary.

Step 1: Add the Multi-page Form Component:

From the Components tab of the Explorer and Components panel, drag and drop the Multi-page Form component onto the canvas.

Step 2: Configure Pages

1. Select the component on the canvas and navigate to the Configuration tab of the Appearance and Configuration panel.
2. Open the Configure Pages dialog.
3. Add three sections (pages) and their corresponding fields: Personal Information, Account Details, and Preferences. For details on using the Pages Configurator, see the Configuring Pages section above.
   

Step 3: Complete Configuration Settings

On the Configuration tab of the Appearance and Configuration panel, configure the settings. For example:

• Set the layout to Vertical.
• Enable Prevent rogress if invalid fields, Show previous button, Show next button, and Show submit button.
• Customize the button text:
  • Previous: Back
  • Next: Continue
  • Submit: Create Account
• Select a data set for the form.

Step 4: Customize the Appearance

Navigate to Appearance and Configuration > Appearance and customize the appearance of the form.

The screenshot below demonstrates the Personal Information and Account Details pages of the user registration form .