Scenario 2: Vehicle Registration Form

Vehicle registration form scenario shows how you can show or hide Panel Form containers to display relevant information based on a selection.

Requirements

A vehicle registration form which:

• captures information about a vehicle owner, vehicle registration number, and vehicle type.

• displays the two wheeler additional information by default.

• automatically displays the relevant additional information to capture based on the selected vehicle type.

• captures additional information about the selected vehicle type such as brand, model, number, and type.

The following figure represents the Vehicle Registration Form for entering information about Two Wheelers.

The following figure represents the Vehicle Registration Form for entering information about Four Wheelers.

Design

1. Create a form.

2. Add two Text controls on the form to capture vehicle owner and vehicle registration number.

3. Add a Radio Button control on the form to select the vehicle type and set the Default Value to the value of the two wheeler option.

4. Add two Panel Form containers on the form to capture additional information about the selected vehicle type.

5. Add two Text controls on each of the Panel Form to capture model and number.

6. Add two Radio Button controls on each of the Panel Form to capture brand and type.

7. To hide the Four Wheeler Panel Form, set the value of the Visible property to No in the Appearance tab.

Scripts

Code the script as follows for the On Data Change property of the Vehicle Type control to automatically displays the relevant additional information based on the selected vehicle type:

if( currentValue == "2")

 {

 control.findById('P1').visible = true;

 control.findById('P2').visible = false;

 }

else

 {

 control.findById('P1').visible = false;

 control.findById('P2').visible = true;

 }

Vehicle Type control has the value 2 and 4 set for the Two Wheeler and Four Wheeler options respectively. P1 and P2 are the IDs for the Two Wheeler Details and Four Wheeler Details containers respectively.