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

Changing the Delete Link

Up until now a text link was you to be able to delete a specific file from a folder. Now that the layout was giving an Explorer-like look, the Delete link will be edited so that an image is used.

1. Make sure you have an image ready for use. In this article the image delete.png is used. In this article it is placed in a folder called images and is available from the Source Code provided with this article.
2. Remove the Delete link from the File List.
3. Make sure the cursor is placed where the image should be inserted.
4. From the menu select Insert, Image.
5. Browse to the location where the image is at.

6. Select the desired image and click OK.
7. If the Image Tag Accessibility Attributes windows appears, typ Delete File in the Alternate Text field. Leave the Long description empty and click OK.

8. The image is now inserted in the page. Make sure it is selected.
9. From the Property Inspector, type 0 in the Border field.

10. If the Image Tag Accessibility Attributes windows did not appear before, also type Delete File in the Alt field.
11. Again, make sure the image is selected.
12. Open File Delete under Server Behaviors, DMX Zone, File Genie, File Delete.
13. Make sure the Folder List named Files is selected in the Folder List Name field.
14. The Action Link should read Selection: "<img src="images/delete.png" alt="Delete File" width="20" height="20" border="0" />".
15. Click OK.

Save and upload the page. Also upload the image that was used for the Delete link. When viewing the page with a folder selected, the Delete link now shows the image that was entered.