CodePeople List

Demo

The ComBox (<select> label, also named List / Menu) are very common among forms and users are very familiar with them. The ComboBox allows selection of an option in a list of options of the same nature, for example, when we want our users to select their country of origin, or the month they were born.

The ComboBox can also be configured to allow selection of multiple options, but in this case a list of options with CheckBox is much more intuitive for users. The problem becomes even more complex if the nature of the data allows you to add new options that were not  intended when the ComboBox was created. Consider the following example:

In a form for creating a user profile, an input field is the list of interests. But interests can be very different: from cowboy movies, Rolling Stone magazine, to DIY. To create a comprehensive list of interests covering all the possibilities is virtually impossible. The best solution to this is the inclusion - in the same form - of a list that allows to  incorporate brand new options, options that are not included in the initial listing.

To meet both needs (to transform ComboBox with multiple selection into a CheckBox list, and also to allow the incorporation of new options that are not part of the initial listing), we created the CodePeople List.

CodePeople List is distributed as a Dreamweaver extension, making it extremely easy to use. It transforms a ComboBox (<select>) with multiple selection into a CheckBox list making the selection of options more natural.

To insert a CodePeople List, you just need to select the ComboBox that you wish to transform and press on the menu option  "CodePeople List" (which is described in detail under Installation). A window will be shown that allows to configure CodePeople List  to match the needs of your form. (The setup window is described under Use.)

The summary of the main features

• Easy to use, because is distributed as a Dreamweaver extension
• Transform a multiple combo-box form field in a more intuitive list of check-box
• Allow to add new options to the list dynamically

CodePeople List is distributed as an extension for Adobe Dreamweaver, the only requirement for this product is the use of Adobe Dreamweaver MX 2004 or later versions (Includes Dreamweaver CS6).

Note: If your operating system is Windows Vista or higher version, Dreamweaver CS3 or a higher version is required.

To install CodePeople List you need to use the Adobe Extension Manager, this is a product distributed free by Adobe. It is required to install all extensions in Adobe products.

Run Adobe Extension Manager, click on the "Install", and enter the path to the file CodePeopleList.mxp downloaded from our website. After installation, restart Dreamweaver and the new extension will become accessible through the menu: "Insert> Form> CodePeople List" or through "Insert Bar> Form> CodePeople List" (Figure 1).

Figure 1. Insertion option

Use

To insert CodePeople List into your website is simple, just follow the steps below:

1. Run the Adobe Dreamweaver.
2. Open in Editing mode the website where you wish to insert a CodePeople List.
3. Select the ComboBox (<select>) you want to transform into a CodePeople List (This must be a ComboBox previously inserted in your website and set up to accept multiple selection).
4. Press Menu and complete the CodePeople List Setup window (Figure 2).
5. After inserting CodePeople List in your website, update your page on your webserver. You also need to publish the directory codepeople_list which contains the code for our product.

The setup window

Figure 2. Setup window

The setup window allows you to adapt CodePeople List to the requirements of your form. The settings are:

Allow to add new options: Allows adding new options to your list. A button with the "+" symbol  along with a user-defined text that will allow the incorporation of new options to list.

Add button title: Enter the text to be displayed when the mouse moves over the button to add new options. "Add option" is the default value.

Add button label: Enter explanatory text to be displayed next to the button to add new options. "Add option" is the default value.

Text box title: Enter the text to be displayed when you select the field for introduction of new options. CodePeople List allows the incorporation of several options at once separated by the comma symbol (",").Once the values of new options have been entered, press "enter" to insert them into the list. The default value of this field in the configuration window is "Separate different options by comma."

Cancel button title: Enter the text to be displayed when moving the mouse over the button to cancel the entry of new options. "Cancel" is the default value.

CodePeople Modify List:

To change any of the product settings after it was inserted, just select the span tag (Figure 3) surrounding the ComboBox (this span tag will be assigned CodePeople-list class) and change the values in the Properties window (Figure 4).

Figure 3. Select the CodePeople List tag

Figure 4. Properties inspector