Relational List
Dreamweaver Extension for MX, DW8, CS3, CS4, CS5, CS6, CC, ...
It often happens that we need to make a form where the clients would have to select an option from a list or a combobox, where these lists are associated. For example, when we make a registration form, or sale of a product, and wish to know what state of what country does our client belong to, or to which city in some state, if the sales are not international. A situation less common but equally important is when we want to know what brand and model of car our client wants to purchase or transport - same thing happens with many products sold online.
In all these cases we make our clients go through enormous lists before they can locate the option that matches their situation. Equally, when we use the same data in several forms, it becomes very tedious when we need to update or introduce new data to these listings, since we must modify every form where these data are used.
Relational List offers an efficient solution to both these problems. Using Relational List, we insert in our form two lists, a main list and a subordinate list. The options that are shown in the subordinate list will depend on the option selected in the main list, or options, in cases when the main list allows a multiple choice. This feature of the Relational List avoids that users of our form have to go through a great amount of options to select the correct one for their situation. (In the previous examples, if we select "United States" in our list, the subordinate list will only show the states that form part of the US.)
Relational List is based on XML files with the structure that will be explained here. One XML file defines the options that the main list will present, and another XML file defines the combination of options that the subordinate list might have. Using XML files to store data to be shown in our forms' lists, we avoid having to modify all the forms that use the same data, when new options need to be introduced, for example, when the company starts catering to clients in a new country or state, or because new product models are available on the market.
Relational List is distributed as an extension for Dreamweaver MX or later. Therefore, its insertion into a website is completely visual and does not require any programming skills.
REQUERIMENTS
Relational List requirements are simple: Adobe Dreamweaver MX or later (including MX 2004, DW 8, DW CS3, DW CS4, DW CS5, DW CS6, DW CC ...).
You can select a different country and view the states update.
Please, check this Relational List Demo (Animated Flash/Video)
You can find more about in our Relational List - FAQ.
Relational List is distributed as an Adobe Dreamweaver MX (or later) extension, packed in a file named HDW_RelationalList.mxp. To install it, you simply need to execute that file. Otherwise, you can use the Adobe Extension Manager tool.
Once installed, the Relational List extension can be accessed, after restarting Dreamweaver, through the menu option Insert > Form > Relational List / Menu, or via InsertBar > Form > Insert Relational List / Menu".
To use Relational List extension in a webpage being developed with Adobe Dreamweaver MX or later, first you need to save the webpage where Relational List will be inserted.
When you execute the option Insert Relational List / Menu (which can be accessed as explained under Installation ), a setup window will be shown, which will allow you to define the options necessary for the good functioning of the form.
The Setup Window's fields are as follows:
- LIST NAME/ID (FOR MAIN LIST): Enter the ID that will identify the main list inside a webpage
- XML DATA (FOR MAIN LIST): Enter the URL to the XML file that contains the options of the main list
- LIST NAME/ID (FOR SUBORDINATE LIST): Introduce the ID that will identify the subordinate list within the webpage.
- XML DATA (FOR SUBORDINATE LIST): Enter the URL to the XML file that contains the options to show in the subordinate list.
Relational List will generate a folder named HDWRelationalList that contains the file RelationalList.js. This folder, as well as the JavaScripts file contained in it, must be published onto your webserver in the same location as related to the webpage where the lists generated by Relational List were installed.
XML Structure
The main list options, as well as the subordinate list options are defined in two XML files with the following structure:
XML Structure with the Main List options
<?xml version="1.0" encoding="iso-8859-1" ?>
<list>
<option value="*">All</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
<option value="e">E</option>
</list>
In the XML stucture with the Main List options:
The tag <list> </list> represents the list.
Each tag <option> </option> represents one of the options shown in the Main List. The value attribute shows the value that is sent to the submit form when the corresponding option is selected. The value attribute is also the value that is used to determine the options to be shown in the subordinate list.
XML Structure for the Subordinate List options
<?xml version="1.0" encoding="iso-8859-1" ?>
<list>
<group id="a">
<option value="aa">AA</option>
<option value="ab">AB</option>
<option value="ac">AC</option>
<option value="ad">AD</option>
<option value="ae">AE</option>
</group>
<group id="b">
<option value="ba">BA</option>
<option value="bb">BB</option>
<option value="bc">BC</option>
<option value="bd">BD</option>
<option value="be">BE</option>
</group>
<group id="c">
<option value="ca">CA</option>
<option value="cb">CB</option>
<option value="cc">CC</option>
<option value="cd">CD</option>
<option value="ce">CE</option>
</group>
<group id="d">
<option value="da">DA</option>
<option value="db">DB</option>
<option value="dc">DC</option>
<option value="dd">DD</option>
<option value="de">DE</option>
</group>
<group id="e">
<option value="ea">EA</option>
<option value="eb">EB</option>
<option value="ec">EC</option>
<option value="ed">ED</option>
<option value="ee">EE</option>
</group>
</list>
In the XML file structure with the options for the Subordinate List:
The tag <list> </list> represents the list.
The tag <group> </group> regroups the combination of options to be shown in the subordinate list when such option is selected in the main list, whose value is equal to the value stored in the attribute id of the <group> tag.
Each tag <option> </option> represents one of the options shown in the subordinate list. The value attribute represents the value of selecting this option within the list.
Preferred payment & download method:
|
||
Paypal or Credit Cards: |
PRICE
USD $29.99
After payment you will be redirected to a direct-download page and the download link will be emailed to the payment address.
|