Add companies: Insert Record Form Wizard

This page offers the possibility to add a new company to the database . The actual insert action and form will be generated automatically through the use of the Insert Record Form Wizard (Insert bar -> MX Kollection tab).

To build the insert page, you will have to follow the next steps:

  1. Open the company/insert file from the company folder in Dreamweaver's editable area.
  2. Design your page using Dreamweaver's tools. Create a page to suit your taste.
  3. Click in an empty place where the insert form will be placed.
  4. Use the Insert Record Form Wizard to add both an HTML form and application logic to the page. Configure the user interface for your own table and fields.
  5. When done configuring, click the OK button to add the elements into the page.
  6. At this point, the company insert page is fully functional, and you can test it, by previewing it in the browser. Just press the F12 key.

Creating the page design

Since creating web page designs is not the goal of this document, the page will have a pretty basic look, using only a header to quickly identify the page and the actual form added by the wizard.

First off, add some text to the page, stating its purpose: "Add company" (without the quotes). Set the text's format to Heading 2, so that it will become clearer to read, while maintaining reasonable proportions. Select the text and use the Format drop-down menu in the Property inspector to change its style.

Second, you'll have to add a horizontal rule after the text. This allows a neater separation between the page title and the actual insert form. To insert it, use the horizontal rule button on the Common tab (if using Dreamweaver MX) or the HTML tab (for Dreamweaver MX 2004) of the Insert bar.

The last thing to do when it comes to the page design, is to create a new paragraph after the horizontal ruler. This is where the insert form will be added. Just press the ENTER/RETURN key to create the new paragraph.
 

 

Now start the Insert Record Form Wizard. Either click its associated button on the MX Kollection tab of the Insert bar, or select it from the Server Behaviors tab -> MX Kollection -> Forms -> Insert Record Form Wizard.

Configure the Insert Record Form Wizard

The Insert Record Form Wizard will have 2 or 3 steps, depending on if you have MX Form Validation installed. For this tutorial the validation step is not important. If you have installed the MX Kollection 3 bundle, then MX Form Validation is installed too, and you will have the third step in the wizard.

After opening the Insert Record Form Wizard (either from the Insert panel -> MX Kollection tab, or from the Server Behaviors tab -> MX Kollection), you will have to configure the first two steps:

  1. In the first step, enter your database connection, table name, primary key and redirects.
  2. In the second step you will have to set up the fields to use in the insert transaction : what fields to display in the form, and how.
 

For the first step, you will have to use the following options:

  1. In the Connection drop-down menu, select the database connection defined at the beginning of this tutorial - connContacts.
  2. In the Table drop-down select company_com; we want to add companies.
  3. In the Primary key column drop-down menu you must select the field containing the primary key for the table. By default the id_com field is selected.
  4. In the After inserting, go to text field, enter the page to display after the insert operation is successful. Use the Browse button to select the index page located in the company folder.
  5. The completed dialog box should resemble the example below:


        
  6. You can press the Next > button to proceed to the wizard's next step.
 

In the second step you have to decide which fields to display, and under which form:

  1. In the Form fields grid, all fields in the current table are initially displayed (except for the primary key, which is usually auto-generated from the database). You will have to keep/remove the fields that don't need to have an HTML form counter-part (e.g. an auto-incremented primary key). Use the +/- buttons to add/remove fields from the grid. The order for the form fields is established through the ^ and v buttons.
  2. For each of the two fields you must select the labels, the way it will be displayed (the Display as drop-down menu) and how to submit it into the database (the Submit as drop-down menu).
    · The Labels will be automatically recognized from the field names as the wizard knows the InterAKT database notations.
    · For the name_com field you can leave the display and submit options at their defaults: Text field / Text.
    · For the address_com field you should change the Display as option, and set it to Text area. This is done because an address contains a larger number of characters, and is easier to read with a text field.
    · Leave the Default value text field empty.
  3. The completed dialog box looks like in the image below:

 

The last step in the wizard concerns validation for the form elements. For the two existing fields there are no validation rules that can be applied to restrict bad input, and therefore the last step can be skipped. Click on the Finish button to exit the wizard's user interface and add it into the page.

Note: for the ASP and ColdFusion server models, the approach is similar; just replace the page extension with the one required by your server model .

You should now see the following code generated in the Dreamweaver design view:

    

There is a Display error message server behavior that will be in charge of showing any handled error message. Also field hints and field error message are generated in the form.

The company insert page is now finished, and you can save and preview it in the browser. Let's see now how the generated page behaves in a browser.