In this article Patrick will show you how to enhance the options of the simple File Management System that was created in the article Creating a File Management System with File Genie – part 1. First he will show you how to give the File Management System the Explorer-style, that could be seen in the first article. Next he will hide the Quick-Add form, when no folder has been selected. After that the header will be edited, in such a way that the name of the selected folder will appear in the header of the File List.

To end this article Patrick will walk you through a couple of steps to enable sorting of all columns.

Watch the demo

Enable column sorting

The current File Management System just shows the content of a folder that was selected, according to the order that was selected when creating the Folder List for the File List section. In our case it was set the sort the list with ascending filenames.

Especially when working with folders that contain a large number of files, it might be easy to have an option to be able to sort the list in multiple ways. This is something that can be accomplished with very little effort.

To be able to sort the columns a Javascript is used. This script is available from the Source Code provided with this article.

1. Make sure you have the file sorttable.js extracted from the Source Code. In this article this file is placed in a folder called js.
2. Swith to Code View.
3. Find the code that links the styesheet to the page. It should be somewhat below the <title> and looks like this.

<link href="css/fms.css" rel="stylesheet" type="text/css" />

4. Below this code, enter the following code to link the javascript file to the page. If you have placed this file in another folder than js, edit the code to reflect your situation.

<script src="js/sorttable.js"></script>

5. Scroll down and find the start of the table that contains the File List.  This code will look like this.

<table width="625" border="0" cellspacing="0" cellpadding="0" class="sortable">
      <tr class="folderlist">
        <td>Name</td>
        <td>Size</td>
        <td>Type</td>
        <td>Last Modified</td
        <td>&nbsp;</td>
      </tr>

6. Add the code class="sortable" to the table tag. Be careful! Unlike the name of the javascript file sorttable.js this is spelled with only one t!

<table width="625" border="0" cellspacing="0" cellpadding="0" class="sortable">

Save the upload the page. Don't forget to also upload the sorttable.js file. Open the page and try clicking on either one of the column headers in the File List. Clicking once more on the same column changed the order from ascending to descending or vice versa. Also notice the little arrows behind the header text.