How to order items using the List Sorter

In this 'how to' tutorial you will learn how to use the List Sorter widget to order items in a database. Aside changing the order visually in a web page, you will also save the order in the database.

For example, you have a database table storing your favorite movie titles. By default, movies are displayed in the order they were inserted into the database. To show them in the preferred order, a new column is used to store the order value. The List Sorter will allow building a page to change the order visually.

The database structure used for this tutorial is rather simple, as it uses only one table:

Note: The database diagram in the image above was built with MX Query Builder (also referred as QuB) to better illustrate the database structure. You do not need to build it in order to complete this 'how to' tutorial.

The database stores the following information:

• id_mov - movie ID.

• title_mov - movie title.

• order_mov - movie order.

To quickly create the database structure, use the scripts provided in the zip package (either .sql or .mdb) corresponding to your database server. You can find the scripts in the \tutorials\_HOW_TO\Order items with List Sorter\db\ folder.

For the purpose of the tutorial, only two pages will be created:

• index - this will contain a dynamic table, displaying the list of movies.

• change_order - will allow changing the movie order with the List Sorter widget.

Before you start building the application, open the index page and create a new Dreamweaver database connection to the database containing the table described above.

Create the movie list

The index page will display the movie titles, in the desired order. To build this page, follow the next steps:

1. Open the index page in Dreamweaver.

2. Add a new recordset that will retrieve data from the movie_mov table. To add a new recordset, click the Plus (+) button on top of the Bindings tab and select the Recordset (Query) from the pop-up menu that is displayed. Configure the user interface as in the image below:
   
   
   
   Note: you must sort the recordset by the order_mov column. This will ensure that the titles will be displayed in the desired order.

3. Click OK to add the recordset to the page.

4. From the Application tab of the Insert bar add a new Dynamic Table:
   
   
    

5. Configure the Dynamic Table to use the rsMovies recordset and to display all records in the table.
   
   
    

6. In Dreamweaver, remove the id_mov and order_mov columns from the dynamic table. To do so, select both the cell containing the header and the one with the dynamic value, and press the Delete key:
   
   
    

7. For the remaining column change the header from title_mov to Movie. Also click the Header option in the Property Inspector for the cell:
   
   
    

8. Save the page and preview it in a browser window. It will display the movies in the inserted order:
   
   

Change the movie order

Once movies are entered in a database (you can create a page that performs the insert easily, with the Insert Record Form Wizard), you must have a way to change the default order. For this you will use the List Sorter widget in the change_order page:

1. Open the change_order page in Dreamweaver.

2. Add a new recordset that retrieves the movies, identical to the one created for the list page, as shown here.

3. Add a list/menu form element from the Forms tab of the Insert bar. When (and if) asked whether to add a form tag, click Yes:
   
   
    

4. The menu will allow changing the order of elements, after the List Sorter widget is applied. Click on the menu to select it. You can access the List Sorter server behavior from the Server Behaviors tab -> Plus (+) -> MX Kollection -> Form Controls. Configure the user interface as follows:

• In the Apply to field drop-down menu, the name of the selected form element is displayed. Since there are no other elements on page, leave this as is.

• In the Recordset drop-down menu select the rsMovies item.

• In the Get labels from drop-down menu select the recordset field storing the movie titles: title_mov.

• In the Get values from drop-down menu select the primary key column of the movie recordset: id_mov.

• In the Order field drop-down menu select the recordset field storing the movie order: order_mov.
  
  
   

• Click OK to apply the server behavior once the configuration is finished.

5. The server behavior will change the menu's type to list. You can decide how many movies will be displayed in the list through the Height text field in the Property Inspector. Set it to 10:
   
   
    

6. Create a new paragraph, right after the inserted menu, inside the form boundaries. Click next to the list/menu and press the Enter/Return key.

7. Add a form button that will submit the page.
   
   
    

8. Change its label to Save. You can do this by clicking on the inserted button, and using the Label text field in the Property Inspector:
   
   
    

9. Save the page and upload it to the server. To preview it, press F12 in Dreamweaver:
   
   
    

10. Change the order of the movies a bit, and press Save to see that it works:
    
    
     

11. For the final test, load the index page in a browser once more. The changes made in the list sorter must be visible in the dynamic list:
    
    

The List Sorter widget is a powerful tool that helps order items retrieved by a recordset. But in order to see the changes, the recordsets must use the ordering column to sort ascending the results.