Getting started with Dynamic Dropdowns with Databridge v1

1. Dreamweaver CS4 or higher.
   
2. Data Bridge (alternately, Dynamic Dropdowns) installed and activated in Dreamweaver.
   
3. Site defined in Dreamweaver with a saved PHP page - Watch video tutorial: Setting up a site in Dreamweaver.
   
4. PHP connection in Dreamweaver to your database. For assistance, view this tutorial: Create a PHP database connection.

Before you begin using Dynamic Dropdowns, you must ensure that your database is configured properly to display the data you need.

1. Once you have decided on how you will implement Dynamic Dropdowns, you will need the database tables to support this. Depending on your needs, your database may need more than two tables.
   
   1. Parent table: One table will be required as the first menu list.
      
   2. Child table: Another table will be required as the Child table.

   
   Example: If this were an automotive website, the Parent table would contain all the manufacturers in the content (text) column. The Child table would contain the various models with the manufacturer ID from the Parent table.
   
   

2. The Parent table only requires two columns, one for the ID, another for content. More columns are permitted, but not required.
   
   
3. The Child table must include an ID column, a Secondary key to the Parent table’s ID, and one for the content.
   
   More details regarding configuring your database can be found in the Context-sensitive help documentation built into the product.

With your database configured, your next step is to add the menu/lists to a page on your website. For this example, we will create a menu list for the parent table, another for the child table, and a final list to which we will add our selections.

1. Parent list
   
   1. Place your cursor where you wish to insert the Parent list.
      
   2. In Dreamweaver, go to Insert > Form > Select (List/Menu).
      
   3. In the ID field enter Parent.
      
   4. In the Label field enter Parent. (The names for IDs and Labels are tutorial examples.)
      
      
      
      
      
   5. Click OK.
      
   6. Click Yes when asked to add form tag.
      
      
      
      
      
   7. Select your new list.
      
      
      
      
      
   8. In the Properties Inspector, choose the List radio button.
      
   9. Set the Height to 10.
      
      
      

   
   

2. Child list
   
   1. Go to Insert > Form > Select (List/Menu) again.
      
   2. Enter Child in the ID field.
      
   3. Enter Child in the Label field.
      
      
      
      
      
   4. Click OK.
      
   5. Select the Child list that was just created.
      
      
      
      
      
   6. In the Properties Inspector, choose the List radio button.
      
   7. In the Height field, enter 10.
      
   8. Choose the Allow multiple checkbox to allow you to select multiple items from this list.
      
      
      

   
   

3. Target list
   
   The target list is not necessary for all applications of Dynamic Dropdowns.
   1. Go to Insert > Form > Select (List/Menu) again.
      
   2. Enter Target in the ID field.
      
   3. Enter Target in the Label field.
      
   4. Click OK.
      
      
      

Dynamic Dropdowns can apply various behaviors to form buttons to add some useful functionality to your lists. The following steps in this section show how to create each button using Dreamweaver’s built-in functionality. (The subsequent sections will show how to use Dynamic Dropdowns to make these buttons active.)

1. Create the Add to List button which adds selections from a list/menu to a target list
   
   1. Choose the Button option from the Forms toolbar.
      
   2. In the ID field, enter Add.
      
   3. Leave the Label field blank, and click OK.
      
      
      
      
      
   4. Select the button that was just created.
      
      
      
      
      
   5. In the Properties Inspector, replace Submit in the Value field with Add to List.
      
   6. Choose None from the Action options.
      
      
      

   
   

2. Repeat the steps to create the Remove button which removes the selected item(s) in a list.
   
   1. Choose the Button option from the Forms toolbar.
      
   2. In the ID field, enter Remove.
      
   3. Leave the Label field blank, and click OK.
      
   4. Select the button that was just created.
      
   5. In the Properties Inspector, replace Submit in the Value field with Remove.
      
   6. Choose None from the Action options.

   
   

3. Repeat the steps to create the Select All button which selects all the items that are in the list.
   
   1. Choose the Button option from the Forms toolbar.
      
   2. In the ID field, enter Select All.
      
   3. Leave the Label field blank, and click OK.
      
   4. Select the button that was just created.
      
   5. In the Properties Inspector, replace Submit in the Value field with Select.
      
   6. Choose None from the Action options.

   
   

4. Repeat the steps to create the Move Up button which moves the selection above other items in the list.
   
   1. Choose the Button option from the Forms toolbar.
      
   2. In the ID field, enter Move Up.
      
   3. Leave the Label field blank, and click OK.
      
   4. Select the button that was just created.
      
   5. In the Properties Inspector, replace Submit in the Value field with Move Up.
      
   6. Choose None from the Action options.

   
   

5. Repeat the steps to create the Move Down button which moves the selection below other items in the list.
   
   1. Choose the Button option from the Forms toolbar.
      
   2. In the ID field, enter Move Down.
      
   3. Leave the Label field blank, and click OK.
      
   4. Select the button that was just created.
      
   5. In the Properties Inspector, replace Submit in the Value field with Move Down.
      
   6. Choose None from the Action options.

   
   

6. View the completed buttons on your page.
   
   
   

Your parent and child lists will both require recordsets before you apply the Dynamic Dropdowns behaviors.

1. From the Server Behaviors panel, choose the Add icon.
   
   
2. Choose Recordset.
   
   
3. In the Name field, enter Parent.
   
   
4. Choose your database connection from the Connection list.
   
   
5. Choose the parent table (in the eCommerce database, this is productcategories) from the Table menu list.
   
   
6. Click OK.
   
   
   
   
   
7. Choose the Add icon from the Server Behaviors panel, again.
   
   
8. In the Name field, enter Child.
   
   
9. Choose your database connection.
   
   
10. Select the child table (in the eCommerce database, this is products) from the Table menu list.
    
    
11. Click OK.
    
    
    

Next, you will turn the Parent list, created earlier, into a dynamic list. As a dynamic list, the Parent list will be populated with the correct data from the database.

1. Select the parent list on your page.
   
   
   
   
   
2. In the Properties Inspector, choose the Dynamic option.
   
   
   
   
   
3. In the Options from recordset menu, choose the Parent table.
   
   
4. From the Values menu, choose the CategoryID column.
   
   
5. From the Labels menu, choose the column that contains the CategoryName.
   
   
6. Click OK.
   
   
   

Now that your page contains all the necessary elements for your Dynamic Dropdowns application, you will add the necessary behaviors to these elements.

1. Create the dynamic array
   
   1. From the Server Behaviors panel, choose the Add icon
      
   2. Select WebAssist > Dynamic Dropdowns > Create Dynamic Array.
      
   3. From the Recordset menu, choose the Child table.
      
   4. From the Parent ID field menu, choose the ParentID column.
      
   5. From the Child ID field menu, choose the ChildID column.
      
   6. From the Child Value field menu, choose the column that contains the text or data for the child table.
      
   7. Click OK.
      
      
      

The following steps utilize the Dreamweaver Behaviors panel, which differs from the Server Behaviors panel.

1. Populate list from array
   
   1. From the Window menu, choose Behaviors to open the Behaviors panel.
      
   2. Select the Parent list.
      
   3. Choose Add from the Behaviors panel.
      
   4. Choose WebAssist > WA Dynamic Dropdowns > Populate List from Array.
      
   5. From the Array source menu, choose the Child table.
      
   6. From the Source list, choose the parent list.
      
   7. From the Target list, choose the child list.
      
   8. Click OK.
      
      
      
      
      
   9. Press Ctrl (Cmd) + S to save your page.

1. Add to List button
   
   1. Select the Add to List button on your page.
      
   2. From the Behaviors panel, choose Add.
      
   3. Select WebAssist > WA Dynamic Dropdowns > Add Value From Source List To Target List.
      
   4. From the source list, choose the Child list.
      
   5. From the Target menu list, choose the Target list.
      
   6. Click OK.
      
      
      

   
   

2. Remove button
   
   1. Select the Remove button on your page.
      
   2. From the Behaviors panel, choose Add.
      
   3. Select Select WebAssist > WA Dynamic Dropdowns > Remove Selected From List.
      
   4. From the Target menu list, choose the Target list.
      
   5. Click OK.
      
      
      

   
   

3. Select All button
   
   1. Select the Select All button on your page.
      
   2. From the Behaviors panel, choose Add.
      
   3. Select Select WebAssist > WA Dynamic Dropdowns > Select All In List.
      
   4. From the Target menu list, choose the Target list.
      
   5. Click OK.
      
      
      

   
   

4. Move Up button
   
   1. Select the Move Up button on your page.
      
   2. From the Behaviors panel, choose Add.
      
   3. Select Select WebAssist > WA Dynamic Dropdowns > Change Position of Selected.
      
   4. From the Target menu list, choose the Target list.
      
   5. From the Move menu, choose Up.
      
   6. Click OK.
      
      
      

   
   

5. Move Down button
   
   1. Select the Move Down button on your page.
      
   2. From the Behaviors panel, choose Add.
      
   3. Select Select WebAssist > WA Dynamic Dropdowns > Change Position of Selected.
      
   4. From the Target menu list, choose the Target list.
      
   5. From the Move menu, choose Down.
      
   6. Click OK.
      
      
      

   
   

6. Press Ctrl or Cmd + S to save your page.
   
   
7. Press F12 to preview your dynamic dropdowns and see how they work.
   
   
   

There are a number of applications for a dynamic dropdown, including providing filtering capabilities for an automobile website. This would allow users to choose their vehicle manufacturer in the first menu, which would then populate the second menu list with options related to that maker. This could even include a third dropdown for specifying more specifics regarding the car.

Another common use for dynamic dropdowns is to allow you to easily provide add, remove, select all, options to an existing menu/list, for example, an email form which contains a list of all possible email addresses. Using dynamic dropdowns you can specify any or all email addresses to send to and have those selections added to the To: field of your contact form.

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments