Using List/Menu form elements
Lists or Menus are form elements that you place within a form on your page. Typically, they are populated with static content specified in a list directly in the web pages HTML.
The list or menu uses a s tag to create the list and o tags for each entry in the list. The difference between the two is that a menu is a dropdown and a list has all values visible on the page. An attribute of multiple is placed in the tag for a list as well as a size attribute which sets the size and number of values in the list. Both lists and menus work with the WA Dynamic Dropdowns extension. We will use the term list when referring to a list or a menu for the purposes of the rest of this documentation.
There are three types of lists/menus that you will need to use for the Dynamic Dropdowns Extension: Parent Lists, Child Lists and Target Lists.
In order to begin implementing the Dynamic Dropdowns extension, you need to add the following to your document (see figure 1 below):
Note: It is important that unique names are used for all form elements incorporated with this extension. For your convenience, it is helpful to come up with a naming convention that easily identifies each, as we do in our example with the terms Parent, Child, and Target.
The first Item in the list will always be the one initially selected, as you can see in the list property inspector.
The Dynamic Dropdowns Behaviors allow you to use these items as placeholders (or messages), which cannot be selected, or as active items within the list. This is accomplished by giving them a value that you can designate within the Dynamic Dropdowns Behaviors as an active value or inactive value. Each of the values that you assign here can be called within the Dynamic Dropdowns behaviors to allow you to manipulate when these options appear based on events which the Behaviors are attached to.
Above is the property inspector for a sample list and its list values.
For the List Values, you can see that the first List Item is for "Select One", which is a static text option added to direct the user to choose an option in the list. It has been given a value of "0", so that if a behavior needs to manipulate that list option later, it will recognize it by its value. As list and menu content populated from your database will all have real numerical keys to uniquely identify them, 0 values can be used to distinguish these static values from those populated from a database. See Database Structure for more information.
The middle option you see is the Recordset that retrieves the main menu selections from the database. See Creating a Dynamic List/Menu for more information.
The last option is filled with table spaces. This is done so that your list or menu will have a set width at all times. The reason for this is that the width of your list or menu is always dictated by its largest option, so setting a static width greater than all values that can possibly populate the list or menu gives it an unchanging width.
As you can see the last option also has a value of zero. This is so that it is manipulated by the Dynamic Dropdowns behaviors in the same manner as the first list value.
The list or menu uses a s tag to create the list and o tags for each entry in the list. The difference between the two is that a menu is a dropdown and a list has all values visible on the page. An attribute of multiple is placed in the tag for a list as well as a size attribute which sets the size and number of values in the list. Both lists and menus work with the WA Dynamic Dropdowns extension. We will use the term list when referring to a list or a menu for the purposes of the rest of this documentation.
There are three types of lists/menus that you will need to use for the Dynamic Dropdowns Extension: Parent Lists, Child Lists and Target Lists.
In order to begin implementing the Dynamic Dropdowns extension, you need to add the following to your document (see figure 1 below):
- A form
- 3 lists
- 5 form buttons
Note: It is important that unique names are used for all form elements incorporated with this extension. For your convenience, it is helpful to come up with a naming convention that easily identifies each, as we do in our example with the terms Parent, Child, and Target.
Parent List
- This list will contain your main options.
- Specify the options for this list in a Parent table in the database.
- A Parent Recordset is used to retrieve the list information from the database.
- Applying the Dynamic List server behavior to this list will populate it with its options from the database.
- You may also set static List values through the property inspector that populates the list on load of the page.
Child List
- This list populates with sub-options based on selections made in the main list.
- Specify options for this list in a Child table in the database.
- A Child Recordset is used to retrieve the list information from the database.
- The Create Dynamic Array server behavior is applied to the page creating an array containing the Child list information from the Child Recordset.
- The Populate List From Array behavior is applied to the Parent List and points to the Child List. Sub-options populate the Child List from the Dynamic Array based on selections made in the Parent List.
Target List
- This list accepts and manipulates values from a Child list to better organize your selections.
- The Add Value From Source List to Target List behavior is applied to a form button that on Click passes selected values from a Child List to a Target List.
- The Remove Selected From List behavior is applied to a form button that on Click removes selected values from a specified Target List.
- The Change Position Of Selected behavior is applied to a form button. The button on Click moves a selection in a Target List either up or down one option, allowing you to set the order.
- The Select All In List Behavior is applied to a form button which when clicked, will select all available options in the Target List. You may also set options that cannot be selected.
Static List Values with the Dynamic Dropdowns Extension
Look at the property inspector for a list or a menu on your web page and notice the following options are available:- Give the list or menu a name.
- Select list or menu.
- If a list, set the height and whether multiple selections should be allowed.
The first Item in the list will always be the one initially selected, as you can see in the list property inspector.
The Dynamic Dropdowns Behaviors allow you to use these items as placeholders (or messages), which cannot be selected, or as active items within the list. This is accomplished by giving them a value that you can designate within the Dynamic Dropdowns Behaviors as an active value or inactive value. Each of the values that you assign here can be called within the Dynamic Dropdowns behaviors to allow you to manipulate when these options appear based on events which the Behaviors are attached to.
Above is the property inspector for a sample list and its list values.
For the List Values, you can see that the first List Item is for "Select One", which is a static text option added to direct the user to choose an option in the list. It has been given a value of "0", so that if a behavior needs to manipulate that list option later, it will recognize it by its value. As list and menu content populated from your database will all have real numerical keys to uniquely identify them, 0 values can be used to distinguish these static values from those populated from a database. See Database Structure for more information.
The middle option you see is the Recordset that retrieves the main menu selections from the database. See Creating a Dynamic List/Menu for more information.
The last option is filled with table spaces. This is done so that your list or menu will have a set width at all times. The reason for this is that the width of your list or menu is always dictated by its largest option, so setting a static width greater than all values that can possibly populate the list or menu gives it an unchanging width.
As you can see the last option also has a value of zero. This is so that it is manipulated by the Dynamic Dropdowns behaviors in the same manner as the first list value.