Main page

Multi-Step Registration

Description

This example shows how to create a multi-page user registration and editing form.

Usage

To register a new user:

  1. On the first Multi-Step Registration page click on the Sign up Link.
  2. Enter the information for step 1 and click Next >> to save the data and go to the next step.
  3. Enter the information for step 2 and click Next >> to go to step 3 or << Prev to return to the previous step without saving the changes.
  4. Enter the information for step 3 and click Save to save the data and return to the grid or << Prev to return to the previous page without saving the changes.

To modify a user's information:

  1. Select a user by clicking on the login name in the user list of the first Multi-Step Registration page.
  2. Perform the same steps as when registering a new user.

Note: In this example the information is stored in the database after the first registration step. The data is not deleted if the registration is cancelled or the browser is closed.

Steps to recreate

Create four blank pages: MultiStepRegistrationGrid, MultiStepRegistration1, MultiStepRegistration2 and MultiStepRegistration3.

Page 1 (MultiStepRegistrationGrid):

  1. Use the Grid Builder to create the List of Users Grid based on the users table.
  2. Change the user_login field type from Label to Link, then select MultiStepRegistration1 in its Href Source property. Also add a Link Parameter with the following property values: Data Source Type = DataSource Column, Parameter Source = user_id and Parameter Name = user_ id.
  3. Add a Sign up Link below the grid and select MultiStepRegistration1 as the value of its Href Source property, then enter user_id in its Remove Parameters property.

Page 2 (MultiStepRegistration1):

  1. Use the Record Builder to create the users Record form which is based on the following fields of the users database table: user_login, user_password, First_name, Last_Name and Email .  In Step 3 of the Record Builder, check the following options: Allow Insert, Allow Update and Allow Cancel .
  2. After creating the Record form, set the Required property of all it's Text Boxes to Yes.
  3. Select Email in the Input Validation property of the email Text Box. 
  4. In the Format tab of the Properties window, set the Value property of the Add and Submit buttons to Next >> .
  5. Set the Return Page property of the Record form to MultiStepRegistration2.
  6. Set the Return Page property of the Cancel Button to MultiStepRegistrationGrid.
  7. Add the appropriate programming code in the Record form's After Insert event as shown in the example.

Page 3 (MultiStepRegistration2):

  1. Use the Record Builder to create the users Record form with all the address and phone fields.  In Step 3 of the Record Builder, check the following options: Allow Update and Allow Cancel.
  2. After generating the form, move the Cancel button to the left of Submit button.
  3. In the Format tab of the Properties window, set the Value property of the Submit buttons to Next >> and the Value property of the Cancel button to << Prev.
  4. Convert the state_id TextBox to a ListBox. For the ListBox set the Connection property to InternetDB  and select  states in the Data Source property. Select state_id in the Bound Column property, state_name in the Text Column Property and Integer in the Data Type property.
  5. Convert the country_id TextBox to a ListBox. For the ListBox set the Connection property to InternetDB  and select  countries in the Data Source property. Select country_id in the Bound Column property, country_name in the Text Column Property and Integer in the Data Type property.
  6. Set the Return Page property of the Record form to MultiStepRegistration3.
  7. Set the Return Page property of the Cancel Button to MultiStepRegistration1.

Page 4 (MultiStepRegistration3):

  1. Use Record Builder to create the users Record form with the remaining fields from the users database table. In Step 3 of the builder, check the following options: Allow Update and Allow Cancel .
  2. After generating the form, move the Cancel button to the left of Submit button.
  3. In the Format tab of the Properties window, set the Value property of the Submit buttons to Save and the Value property of the Cancel button to << Prev.
  4. Convert the gender_id TextBox to a Radio Button. For the Radio Button set the Connection property to InternetDB  and select genders in the Data Source property. Select gender_id in the Bound Column property, gender_name in the Text Column Property and Integer in the Data Type property.
  5. Convert the age_id TextBox to a ListBox. For the ListBox set the Connection property to InternetDB  and select ages in the Data Source property. Select age_id in the Bound Column property, age_name in the Text Column Property and Integer in the Data Type property.
  6. Convert the language_id TextBox to a ListBox. For the ListBox set the Connection property to InternetDB  and select languages in the Data Source property. Select language_id in the Bound Column property, language_name in the Text Column Property and Integer in the Data Type property.
  7. Convert the education_id TextBox to a ListBox. For the ListBox set the Connection property to InternetDB  and select educations in the Data Source property. Select education_id in the Bound Column property, education_name in the Text Column Property and Integer in the Data Type property.
  8. Convert the income_id TextBox to a ListBox. For the ListBox set the Connection property to InternetDB  and select incomes in the Data Source property. Select income_id in the Bound Column property, income_name in the Text Column Property and Integer in the Data Type property.
  9. Set the Return Page property of the Record form to MultiStepRegistrationGrid.
  10. Set the Return Page property of the Cancel Button to MultiStepRegistration2.

Database Tables used

Database: Internet

Table: users

Programming Notes

The Record form's After Insert event is used to retrieve the last inserted key (user_id) after the user record is created. The key is then passed to the next page as a URL parameter.