Creating Event-Driven Forms

You can easily create a form with different modes on your Web page using the FormManager control. For example, you can create a data-entry form with Insert, Update, and Delete modes. When specified control events, such as clicking a button, occur, the form moves from one mode to another.

You can also specify property settings and methods to run both when a particular form mode is established, and during the transitions from mode to mode. All of this is accomplished without scripting, using the FormManager control's property pages.

For detailed examples of how to create a data-entry form using the FormManager control, see Simplifying Data Entry Pages and Data Entry Form Sample. For more information on the FormManager control's property pages, see FormManager Properties Dialog Box.

The first steps in creating a Web page on which you'll use the FormManager control are to add a Recordset control and any other design-time controls you'll want to display on the page in the various form modes. For example, you may want text boxes to display data, and buttons to use to switch between form modes. For information on how to add data-bound controls to ASP or HTML pages, see Querying the Database, Displaying Records, and Viewing Data.

When you have the controls you want to use in your form modes on the page, you can add a FormManager control, and then define its modes and transitions.

Note   Although it's common, you don't have to display data on forms created using the FormManager control. If you aren't displaying data on your forms, you don't need to use a Recordset control.

To add a FormManager control to a page

1. Make sure that you have set options to view controls graphically. From the View menu, choose View Controls Graphically. To set this option as default, use the HTML node of the Options dialog box.
   
   
2. Open the ASP or HTML page in the editor.
   
   
3. Drag the FormManager control from the Design-Time Controls tab of the Toolbox onto the page.

   Note   If you're using DHTML on your page, be sure to place the FormManager control on the page below any of the controls you want to use with the form. This ensures that the FormManager will have access to all objects on the page.

To add a form mode

1. Right-click the FormManager control on the page and select the Properties command from the shortcut menu.
   
   
2. On the Form Mode tab of the Property Pages, enter a name for the FormManager control if you want. This name is used to identify the control in the script that it generates. If you don't supply a name, a default name is used.
   
   
3. In the States group, enter the name you want to use for the mode in the New Mode box.
   
   
4. Choose the arrow key to the right of the New Mode box.
   
   
5. The new mode's name is displayed in the Form Mode list.

   For information on how to define the mode, see "To define a mode" below.

To specify a default mode

1. Right-click the FormManager control on the page and select the Properties command from the shortcut menu.
   
   
2. On the Form Mode tab of the Property Pages, select the mode you want to use for the default mode in the Default Mode list box.

   This mode must be one of the modes you've named and placed in the Form Mode list.

To define a mode

1. Right-click the FormManager control on the page and select the Properties command from the shortcut menu.
   
   
2. On the Form Mode tab of the Property Pages, select the mode you want to define in the Form Mode list.
   
   
3. In the Actions Performed for Mode table, select a control whose property you want to set or for which you want to run a method in the Object field. For example, you can set a Textbox control's disabled property to true, or use the addItem method to add a value to a Listbox control.
   
   
4. In the Member field, select the property you want to set or the method you want to run.
   
   
5. In the Value field enter the value you want to set the property to, or any parameters for the method.

   If you're setting a property, the Value field will show <value>. Replace this with the property setting. If the setting is a string, use quotation marks.

   If you're running a method, the Value field will show empty parentheses. Put any parameters for the method inside the parentheses. In the drop-down list in the Member field, the methods are listed with their parameters.

6. Repeat steps 3 through 5 until you've defined all the property settings and methods for this form mode.

   For more information on defining form modes, see Simplifying Data Entry Pages. For information on the various script objects for design-time controls and their properties, methods, and events, see Script Objects.

To specify when mode transitions occur

1. Right-click the FormManager control on the page and select the Properties command from the shortcut menu.
   
   
2. On the Action tab of the Property Pages, select the mode whose transition you want to define in the Current Mode field of the Form Mode Transitions table.
   
   
3. In the Object field, select the object you want to use to trigger a change from this mode to another mode. For example, you may want the user to click the Insert button to move from Update mode to Insert mode.
   
   
4. In the Event field, select the control event that will trigger the mode transition. For example, the onclick event of the Insert button.
   
   
5. In the Next Mode field, select the mode you want to move to when the control event occurs. For example, you might move to Insert mode.
   
   
6. Repeat steps 2 through 5 until you've defined transitions among all the modes on your form.
   
   
7. In the Actions Performed Before Transition table, you can also set properties and define methods that will take effect when a mode transition occurs, but before you move to the new mode. For information on how to make these settings, see "To define a mode", above.

In addition to the methods provided with Microsoft Visual InterDev and the design-time controls' Scripting Object Model, you can also reference methods you've defined in the page's script in a mode or a mode transition. For example, you might want to run a method that validates data after you press a Save button, but before you move to a new mode.

To associate user-defined methods with a mode

1. Follow the instructions in "To define a mode" or "To specify when mode transitions occur" above.
   
   
2. In the Member field of the Actions Performed for Mode table on the Form Mode tab, or the Member field of the Actions Performed Before Transition table on the Action tab, enter your user-defined method.
   
   
3. Enter the method's parameters (if any) within parentheses in the Value field.

   Your method will run when the mode is activated, or when the mode transition occurs. If you have more than one user-defined method, the methods will run in the order in which they appear in the table on the property pages.

For an example of a user-defined method on a data-entry form, see the Data Entry Form Sample.