HOWTO: Create a Visual InterDev 1.0 Data Form Wizard with VI 6.0

ID: Q192665

The information in this article applies to:

SUMMARY

This article describes how to use the tools provided with Visual InterDev 6.0 to create a data-driven Web application analogous to the Data Form Wizard provided by Visual InterDev 1.0.

There are some noticeable differences in the final product from Visual InterDev 6.0 to the original output of Visual InterDev 1.0. However, the functionality is the same, if not improved. The Visual InterDev 6.0 application is much more flexible and easy to maintain. The Visual InterDev 6.0 application is also much more customizable than the static code that generated by the Visual InterDev 1.0 wizard.


MORE INFORMATION

This article will not cover the Filtering capability provided by the Visual InterDev 1.0 Data Form Wizard. For instructions on adding Filtering capability to the sample application created in this article, refer to the following article in the Microsoft Knowledge Base:

Q195340 HOWTO: Create a VI 1.0 Data Form Wizard with VI 6.0: Add Filter

Overview

The Visual InterDev 1.0 Data Form Wizard creates a three-page application that provides two views: A List View that provides a read-only view of the data in a tabular format and a Form View that displays one record at a time and allows for updates to the data.

Your Visual InterDev 6.0 application will be a single page application, and you will use the Visual InterDev 6.0 Form Manager Design-Time Control (DTC) to manage your views.

The Visual InterDev 1.0 Data Form Wizard provides a seven-step wizard that generates static code. With your Visual InterDev 6.0 application, you have nine steps:
  1. Add a Data Connection.


  2. Add an Active Server Pages (ASP) page.


  3. Add a Recordset Design-time control (DTC).


  4. Add a Grid DTC.


  5. Add Form View Fields.


  6. Add Action Buttons.


  7. Add Button Events.


  8. Add the FormManager DTC.


  9. Add the PageObject DTC


As you cover each step of the process, you will be creating a sample application using the Adventure Works database, which you can use as a sample and reference.

NOTE: There is very little coding for this application. For this sample, the code will be written in VBScript.

Before You Begin

As with the Visual InterDev 1.0 Data Form Wizard, you first needed to be in an open project and have an existing Data Connection (The Visual InterDev 1.0 Data Form Wizard also provided an option for us to create a Data Connection).

For this example, you will create a new project and add a Data Connection to AdvWorks. These steps assume that an ODBC DSN called AdvWorks exists and is directed to a copy if the Adventure Works database (Advworks.mdb). If the AdvWorks DSN does not exist on your server, use the ODBC administrator (from the Control Panel) to create a System DSN called AdvWorks. The most common locations for Advworks.mdb are in \Program Files\Common Files\System\msadc\Samples or \InetPub\ASPSamp\AdvWorks.

Step 1: Open Visual InterDev 6.0 and select the option to create a New Web Project under the New tab. Give the project a name and select your preference for whether you want to add the project to your current solution, or to close the current solution and create a new one (a solution is similar to a Visual InterDev 1.0 workspace).

Step 2: A wizard, very similar to the one from Visual InterDev 1.0, will start up This wizard allows you to create a new Web project. Select your Web server and click Next. Create a new Web application called dfwsamp. The wizard also allows you to specify a layout and a theme. For the purposes of this sample, select <none> for both layout and theme.

Visual InterDev 6.0 will create a project and a Web for you at this time. It will copy the Visual InterDev 6.0 Script Library to the new Web, which is essential for this application. If you are adding a Visual InterDev 6.0 application such as this to a Web created in Visual InterDev 1.0, it is essential that you answer Yes to copy the Script Library when prompted.

1) Add a Data Connection

Step 1: Right-click your project (<server>/dfwsamp) and select Add Data Connection.

Step 2: The Select Data Source dialog box appears. Click the Machine Data Source tab and select the AdvWorks data source.

Step 3: In the properties dialog box that appears, the default name for the connection is Connection1; change this to AdvWorks and click OK.

2) Add an Active Server Page

Rather than a three-page application, such as the applications created by Visual InterDev 1.0's Data-Form Wizard, your Visual InterDev 6.0 application will exist on a single page. You will use the FormManager Design-Time Control (DTC) to create multiple views in the last step of the process.

Step 1: Right-click your project (<server>/dfwsamp). From the Add menu, select Active Server Page.

Step 2: The Add Item dialog box appears. Select the New tab and give your ASP page a name. For the purpose of this example, call your page Dfw.asp. Click Open.

3) Add a Recordset DTC

The Recordset DTC is a wrapper used for inserting the code required to instantiate and use an ADO Recordset object. It provides data binding capability that you will use to bind your data to a grid for your List View, and to your input fields in your Form View.

NOTE: If the Toolbox is not showing, Toolbox from the View menu.

Step 1: In the Toolbox, select Design-Time Controls.

Step 2: Select the DTC labled Recordset and drag it onto Dfw.asp after the <BODY> tag. When prompted to enable the Scripting Object Model, click Yes.

Step 3: Right-click the Recordset DTC and select Properties. In the General tab, name the Recordset DTC "rstProducts." For Source of data select Database Object. Select Tables as the type of database object and Products as the Object name. Close the properties page of the Recordset DTC.

For this sample application, you will be validating a field against a list from a second Recordset DTC using the Listbox DTC. Follow steps 1 and 2 to add a second Recordset DTC, then continue with step 4.

Step 4: Right-click the second Recordset DTC and select Properties. In the General section, name the Recordset DTC rstProductType. For Source of data select SQL Statement. In the text area provided, code the following SQL Statement: 

SELECT DISTINCT ProductType FROM Products

Close the properties page of the Recordset DTC and save your changes.

4) Add a Grid DTC

You will use a Grid DTC to display your data in List View. The Grid DTC will provide the navigation functionality as well. The following steps will show you a sample of binding data to a Grid DTC, as well as some customization features that allow you to do more than just display the value in a field.

Step 1: Select Grid from the Design-Time Controls toolbox and drag it onto Dfw.asp after the two Recordset DTCs.

Step 2: Right-click the Grid DTC and select Properties. In the General tab, Change the Name (Grid1 by default) to grdProducts. Change the Width from Pixels to Percentage.

Step 3: Select the Data tab of the Grid DTC properties. In the Recordset field, select rstProducts. In the Available Fields list select ProductCode, ProductType, ProductName, and UnitPrice. The Grid Columns list box will show the selected fields. Select UnitPrice. The Field/expression will show as UnitPrice. Change this value to: ="$" + [UnitPrice]. Click Update. This will append a dollar sign ($) to the value returned from the UnitPrice field when displayed.

NOTE: The syntax for customizing the Field/expression is JavaScript. To insert a field into the expression, enclose it in brackets ([]).

Step 4: Select the Navigation tab of the Grid DTC properties. Change the "records/page" value to 10. Check "Enable row navigation" and set the "Row color" to "Teal." Click OK.

Step 5: Select the Navigation tab of the Grid DTC properties. Change the records/page value to 10. Check Enable row navigation and set the Row color to Teal. Click OK.

Save your changes.

At this point, you have the elements of the List View portion of our Data Form Wizard application (with an additional Recordset DTC).

5) Add Form View Fields

Now you are going to set up the fields and labels that make up your Form View. You will place the fields and labels in an HTML table to align them appropriately.

Step 1: Place the cursor after the Grid DTC and press ENTER to insert a carriage return. From the Table menu, select Insert Table. Set the rows to be 5 and the columns to be 2. Set the Width to 300 pixels and the Border size to 0. Click OK.

Step 2: Place your cursor in the first cell of the first row of the inserted table; that is, between <TD> and </TD>. Double-click Label in the Design-Time Controls toolbox. In the second cell of the row, do the same with a Textbox DTC.

Step 3: Right-click the Label DTC you just added and select Properties. Change the Name to lblProductCode and the Field/Expression to Product Code. Click OK.

Step 4: Right-click the Textbox DTC and select Properties. Change the Name to txtProductCode. Set the Recordset to be rstProducts and the Field to be ProductCode. Click OK.

Repeat steps 2 through 4 for the following: 

   Table Row 2:  Cell 1 -  Label Name=lblProductName
                           Field/Expression=Product Name
                 Cell 2 -  Textbox Name=txtProductName
                           Recordset=rstProducts
                           Field=ProductName

   Table Row 4:  Cell 1 -  Label Name=lblUnitPrice
                           Field/Expression=Unit Price
                 Cell 2 -  Textbox Name=txtUnitPrice
                           Recordset=rstProducts
                           Field=UnitPrice
Step 5: Place your cursor in the first cell of the third row of the table. Double-click the Label option of the Design-Time Controls toolbox. In the second cell of the row, do the same with a Listbox DTC.

Step 6: Right-click the Label DTC you just added and select Properties. Change the Name to lblProductType and the Field/Expression to Product Type.

Step 7: Right-click the Listbox DTC and select Properties. In the General tab, change the Name to lstProductType. Set the Recordset to be rstProducts and the Field to be ProductType.

Step 8: Select the Lookup tab. Set the List source to be Recordset. Set the Row Source to be rstProductType, the Bound column to be ProductType and the List field to also be ProductType. Click OK.

Step 9: Place a Label DTC in the first cell of the fifth row of the table. Name the Label lblOnSale and set the Field/Expression to On Sale.

Step 10: Place an OptionGroup DTC in the second cell of the fifth row of the table. Name the OptionGroup DTC optOnSale and set the Recordset to rstProducts and the Field to OnSale.

Step 11: In the Lookup tab of the OptionGroup DTC, set the List Source to Static list and enter the following: 

   Bound value      Display
   -----------      -------
   true             Yes
   false            No
Click OK.

Step 12: Drag a RecordsetNavbar DTC on the page after the HTML table (that is, after </TABLE>). Right-click the RecordsetNavbar DTC. Change the Name to navProducts and set the Recordset to rstProducts. Select Update on Move so that if changes are made in Form View, the client can either click Update or simply move off the record to apply the changes.

Save your changes.

6) Add Action Buttons

At this point, you will be adding the button objects that allow the client to change from List to Form view, and to delete, add, or update records. You will also be placing a header table on the page that will contain a page title and your action buttons.

Step 1: Paste the following code before the Grid DTC on dfw.asp: 

<TABLE WIDTH=100% BORDER=0 CELLSPACING=1 CELLPADDING=1 bgcolor=Teal>
    <TR>
        <TD align=left><FONT size=+2 face=Arial>DFW Sample</FONT></TD>
        <TD align=center>

        </TD>
    </TR>
</TABLE>

Step 2: Place your cursor in the second cell of the table (that is, after <TD align=center>). Double-click the Button selection from the Design-Time Controls toolbox.

Step 3: Right-click the Button DTC and select Properties. Change the Name to btnUpdate and the Caption to Update. Click OK.

Repeat steps 2 and 3 for the following: 

   Button Name=btnDelete, Caption=Delete
   Button Name=btnNew, Caption=New
   Button Name=btnRequery, Caption=Requery
   Button Name=btnView, Caption=Form View
Save your changes.

7) Add Button Events

Now you will add the code that will run when the buttons are clicked (update a record, delete a record, and so forth). To do this, you will specify the onClick events for the buttons.

NOTE: If the Script Outline is not visible, select Other Windows from the View menu, and click Script Outline.

Step 1: Select the Script Outline and expand Server Objects & Events.

Step 2: Locate and expand btnUpdate. Double-click onclick. Enter the following in the btnUpdate_onclick() event: rstProducts.updateRecord

NOTE: Intellisense will display all of the method and property options for rstProducts. After typing rstProducts.up, simply press Tab to have Visual InterDev complete updateRecord.

Repeat step 2 for the following: 

   Button=btnDelete, Event=onclick, Insert code=rstProducts.deleteRecord
   Button=btnNew, Event=onclick, Insert code=rstProducts.addRecord
   Button=btnRequery, Event=onclick, Insert code=rstProducts.requery
The resulting event code will look something like this: 

 Sub btnUpdate_onclick()
   rstProducts.updateRecord
 End Sub

 Sub btnDelete_onclick()
   rstProducts.deleteRecord
 End Sub

 Sub btnNew_onclick()
   rstProducts.addRecord
 End Sub

 Sub btnRequery_onclick()
   rstProducts.requery
 End Sub

Save your changes.

8) Add the Form Manager

At this point, you have all of the elements for your Data Form Wizard application on your page. You also have all of the necessary code for button events. However, all of the objects show on your page all of the time. Now you need to differentiate between List View and Form View. To do this, you'll add a Form Manager DTC to the page and let it manage your views.

You use the FormManager DTC to identify which objects are available in List View and which objects are available in Form View.

Step 1: Select the Design-Time Controls option of the Toolbox and drag a FormManager DTC before the end-BODY tag (</BODY>) on Dfw.asp. Right-click the FormManager DTC and select Properties. Set the Name to fmgrDFW.

Step 2: Enter ListView in the New Mode field and click ">" to define it as a Form mode. Do the same for FormView.

At this point you have both your views created and all that remains is to define which elements of the page are visible and which are invisible for each view.

Step 3: In Form mode, select ListView. In the Actions Performed for Mode list box, create the following table of actions (NOTE: drop-down boxes are provided for Object and Member for accuracy and ease of use): 

   Object         Member Value
   -------------- ------ -----
   grdProducts    show   ()
   btnDelete      hide   ()
   btnNew         hide   ()
   btnUpdate      hide   ()
   btnView        value  "Form View"
   lblProductCode hide   ()
   lblProductName hide   ()
   lblProductType hide   ()
   lblUnitPrice   hide   ()
   lblOnSale      hide   ()
   lstProductType hide   ()
   navProducts    hide   ()
   optOnSale      hide   ()
   txtProductCode hide   ()
   txtProductName hide   ()
   txtUnitPrice   hide   ()
Step 4: In the Form mode list box, select FormView. In the Actions Performed for Mode window, create the following table of actions: 

   Object         Member Value
   -------------- ------ -----
   grdProducts    hide   ()
   btnDelete      show   ()
   btnNew         show   ()
   btnUpdate      show   ()
   btnView        value  "List View"
   lblProductCode show   ()
   lblProductName show   ()
   lblProductType show   ()
   lblUnitPrice   show   ()
   lblOnSale      show   ()
   lstProductType show   ()
   navProducts    show   ()
   optOnSale      show   ()
   txtProductCode show   ()
   txtProductName show   ()
   txtUnitPrice   show   ()
Step 5: Select the Action tab. In the Form Mode Transitions section, create the following table of transitions and actions to be performed before those transitions occur (NOTE: use the drop-down boxes for accuracy and ease of use):

Form Mode Transitions: 

   Current Mode Object      Event     Next Mode
   ------------ ----------- --------- ----------
   FormView     btnView     onclick   ListView
   ListView     btnView     onclick   FormView
The "Form Mode Transitions" settings tell our application that when "btnView" is clicked in "ListView" mode, switch to "FormView" mode and vice versa. The "Actions performed for Mode" that we defined in Steps 3 and 4 identify which objects are visible for which mode, and what the caption of "btnView" will be for that mode. Step 6: Click Close and save your changes.

9) Add the PageObject

The Visual InterDev 1.0 Data Form Wizard application has a function for the "List View" mode that your Visual InterDev 6.0 application does not yet possess. A hyperlink was created for each row at the start of the row. When this hyperlink was clicked, the application went directly to "Form View" for the selected record.

Using the PageObject DTC, and with a little creative coding, you will now add this functionality to your Visual InterDev 6.0 application.

Step 1: You first need to create a function that will navigate to the selected record and switch to "FormView." To do this, add the following code to the page in the <HEAD> section (that is, before "</HEAD>" and after "</SCRIPT>"). Notice that this code is JScript. This is because we will be calling one of the FormManager DTC's "hidden" methods that begins with an underscore ("_"). This violates VBScript naming rules, so we will use JScript. 

<SCRIPT LANGUAGE=javascript RUNAT=Server>

  function ShowRecord(strAbsolutePosition) {
    rstProducts.moveAbsolute(parseInt(strAbsolutePosition));
    _fmgrDFW_SetMode('FormView');
  }

</SCRIPT>

Step 2: Now that you have your custom function, you need to set up a hyperlink. Do this by customizing the value in the Field/expression for the first column of the Grid DTC. Right-click the Grid DTC ("grdProducts") and select Properties. Select the Data tab. In the Grid Columns section, select the column for ProductCode. The Field/expression shows as "ProductCode." In the Edit Columns section, change the Field/expression to: 

="<a href=javascript:thisPage.navigate.ShowRecord(" +
rstProducts.absolutePosition + ")>" + [ProductCode] + "</a>"
Click Update. This will result in the ProductCode showing up as a hyperlink. The hyperlink will call your custom ShowRecord() method, which will navigate to the selected row and switch to FormView. The selected row is identified by its absolutePosition property. An example of the resulting hyperlink would be as follows: 

<a href=javascript:thisPage.navigate.ShowRecord(4)>AW210-12</a>
Step 3: The last step you need to perform is to identify your ShowRecord() function as a navigate method. To do this, you need a PageObject DTC. Select the Design-Time Controls option of the Toolbox and drag a PageObject DTC before the FormManager DTC (fmgrDFW) on Dfw.asp. Set the Name to "pageDFW" (The Name shows in Red after an Exclamation Icon. This is normal). Right-click the PageObject DTC and select Properties. In the Methods tab, in the Navigate methods section, select ShowRecord as an entry in the Navigate methods list using the drop-down list. Click Close and save your changes.

You have completed your Data Form Wizard application. From the View menu, select View in Browser to see the results.


REFERENCES

For additional information, please see the following article in the Microsoft Knowledge Base:

Q195340 HOWTO: Create a VI 1.0 Data Form Wizard with VI 6.0: Add Filter

Additional query words: dataform 


Keywords          : kbASP kbCtrl kbScript kbVisID600 kbGrpASP 
Version           : WINDOWS:6.0
Platform          : WINDOWS 
Issue type        : kbhowto

Last Reviewed: May 27, 1999