How to: Customize Navigation Buttons

Preconfiguration

First, you'll configure a Navigation component to manage your two Panel components, which will collect customer information. Then, you'll set up navigation with custom Next and Previous buttons.

Configure the Navigation Component

Configure a Navigation component to manage which Panel component becomes active. You'll notice in this configuration that the default Next and Previous buttons are hidden. You’ll add your own buttons in a later step.

1. In the Module Builder, drag and drop a Navigation component onto your canvas.

2. In the Property ID and Label Text field, enter navPanels.

3. In the Panels table, enter the following:

   Group	Title	Heading	Value	Panel	Hide Previous	Hide Next
   	Personal Information		panelPersonalInfo	panelPersonalInfo		(checked)
   	Contact Information		panelContactInfo	panelContactInfo	(checked)

   

   When you first open the configuration window, you may need to resize the columns in your Panels table.

4. Click Save Component.

Configure the Panel Components

These components separate your input fields based on the information you're collecting. You'll have a Panel component for personal information and one for contact information.

1. Drag and drop two Panel components into your Navigation component.

2. In the Property ID and Canvas Label Text field, enter the following for each component:

   #	Property ID	Canvas Label Text
   1	panelPersonalInfo	panelPersonalInfo
   2	panelContactInfo	panelContactInfo

3. Click Save Component after adding each component.

Configure the Text Field Component

Now, let's add your first input field. You'll use a Text Field component to collect your end-user's full name, placing it inside your panelPersonalInfo Panel component.

1. Drag and drop a Text Field component onto your canvas, placing it inside your panelPersonalInfo Panel component.

2. In the Property ID field, enter name.

3. In the Label Text field, enter Full Name.

4. Click Save Component.

Configure the Date Input Component

Next, let's add the second end-user input field in this configuration. You'll use this Date Input component to collect your end-user's date of birth, placing it inside your  panelPersonalInfo Panel component.

1. Drag and drop a Date Input component inside your panelPersonalInfo Panel component, below your name Text Field component.

2. In the Property ID field, enter dateOfBirth.

3. In the Label Text field, enter Date of Birth.

4. From the Restrict Date Selection to drop-down, select Past Only.

   

5. Click Save Component.

Configure the Phone Number Component

The third end-user input field in this configuration is a Phone Number component that you’ll place in your panelContactInfo Panel component.

1. Drag and drop a Phone Number component inside your panelContactInfo Panel component, below your dateOfBirth Date Input component.

2. In the Property ID field, enter phoneNumber.

3. In the Label Text field, enter Phone Number.

4. Click Save Component.

Configure the Email Component

The last end-user input field in this configuration is an Email component that you’ll place in your panelContactInfo Panel component.

1. Drag and drop an Email component inside your panelContactInfo Panel component, below the phoneNumber Phone Number component.

2. In the Property ID field, enter email.

3. In the Label Text field, enter Email.

4. Click Save Component.

Configuration

Configure the colNext Columns Component

Next, you'll set up a series of Columns components to organize your buttons. You'll leave each column empty except the far-right column. There, you'll place your customized Next button.

1. Drag and drop a Columns component inside your panelPersonalInfo Panel component, below your dateOfBirth Date Input component.

2. In the Property ID field, enter colNext.

3. Select the Column Layout that shows four evenly spaced columns.

   

4. Click Save Component.

Configure the btnNext Button Component

Next, let's add the first Button component to create a custom button to replace the one you set as hidden in the Navigation component.

1. Drag and drop a Button component inside the far-right column of your colNext Columns component.

2. In the Property ID field, enter btnNext.

3. In the Label Text field, enter Next Page.

4. From the Action Type drop-down, select Event.

5. In the On Click field, enter initNext.

   This configuration connects your Button component to an Initializer component you’ll add next.

   

6. In the Right Icon field, enter glyphicon glyphicon-chevron-right.

   This configuration is a standard GLYPHICONS® glyph code supported by the Button component. For a full list of other glyph codes, visit https://getbootstrap.com/docs/3.3/components/.

7. Click Save Component.

Configure the initNext Initializer Component

Now, you'll add an Initializer component that gets triggered when you click your Next button. Then, the Initializer component sends a Next value back to the Navigation component.

1. Drag and drop an Initializer component inside your panelPersonalInfo Panel component, below your dateOfBirth Date Input component.

2. In the Property ID and Canvas Label Text field, enter initNext.

3. From the Trigger Type drop-down, select Manual.

4. In the Outputs table, enter the following:

   Property ID	Type	Value
   navPanels	navigation	next

   

5. Click Save Component.

Configure the colPrevious Columns Component

This Columns component serves the same purpose as the first set of columns that you added. The only difference is that this set will hold your custom Previous button. You'll leave each column empty except the far-right column. There, you'll place your Previous button.

1. Drag and drop a second Columns component inside your panelContactInfo Panel component, below your email Email component.

2. In the Property ID field, enter colPrevious.

3. Select the Column Layout that shows four evenly spaced columns.

   

4. Click Save Component.

Configure the btnPrevious Button Component

Next, let’s add another Button component that represents your Previous button.

1. Drag and drop a second Button component in the far-right column of your colPrevious Columns component.

2. In the Property ID field, enter btnPrevious.

3. In the Label Text field, enter Previous Page.

4. In the Left Icon field, enter glyphicon glyphicon-chevron-left.

   This is a standard GLYPHICONS® glyph code supported by the Button component. For a full list of other glyph codes you can use, visit https://getbootstrap.com/docs/3.3/components/.

5. From the Action Type drop-down, select Event.

6. In the On Click field, enter initPrevious.

   

7. Click Save Component.

Configure the initPrevious Initializer Component

Next, you'll add an Initializer component that is triggered when you click your Previous button. Then, the Initializer component sends a previous value back to your Navigation component.

1. Drag and drop a second Initializer component inside your panelContactInfo Panel component, below your email Email component.

2. In the Property ID and Canvas Label Text field, enter initPrevious.

3. From the Trigger Type drop-down, select Manual.

4. In the Outputs table, enter the following:

   Property ID	Type	Value
   navPanels	navigation	previous

   

5. Click Save Component.

6. Save your module.

Here's how your configured module looks in the Module Builder:

Preview your module in Express View. You'll see your Personal Information panel along with your custom Next button. If you click Next, you navigate to the Contact Information page. Clicking Previous navigates you back a page. This is the same functionality as a Navigation component, but you can control the placement and functionality of your navigation buttons.