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

Explorer-like style through CSS

Until now we did not pay any attention to the layout of the File Management System. To have the File Management System blend into existing websites, the layout can be completely edited through CSS. The current page is without any CSS styles and in this example it will be transformed into a page with an Explorer-like style.

In our CSS file, 6 separate CSS-styles have been created:

·         folderlisttable

·         folderlisttd

·         folderlistheader

·         folderlist

·         folderlistcontent

·         filelistcontent

First we will attach the Style Sheet to the current page. Make sure the CSS Styles window is visible. If it is not, choose Window, CSS Styles.

1. Download the Source Code available with this article.
2. Unzip the file.
3. Make sure the file fms.css is at the location you choose. In this article it is placed in a folder called css.
4. Click on the button Attach Style Sheet.

5. Click on the Browse button.

6. Browse to the folder containing the file fms.css.
7. Select the file and click OK.
8. The path/filename should be entered in the File/URL field.
9. Click OK once again.

Now that the Style Sheet has been attached, the different styles will be applied.

1. Select the main table. Right-click in the top row and select Table, Select Table.
2. In The Property Inspector activate the Class pull-down menu and select the folderlisttable style.
3. Next, select the table row <tr> that contains the text Folder List and File List. The easiest way to do this is by clicking on the tag in the bar above the Property Inspector.

4. Right click the <tr>.
5. Click the menu-option Set Class and select the folderlistheader style.

6. Now select the <td> that contains the actual Folder List. Set the style by right clicking the <td>, Set Class, folderlisttd or by choosing folderlisttd in the Class pull-down menu in the Property Inspector.
7. Repeat this for the <td> that contains the File List.
8. Next select the row that contains the column headers of the File List.
9. Use any of the above ways to set the folderlist style.
10. Select the <td> that contains the Folder List name.
11. Set the folderlistcontent style on the <td>.
12. Select the link on the Folder List name.
13. Set the folderlistcontent style on the link.
14. Select the row containing the File List content.
15. Set the filelistcontent style on the row.
16. Select the link on the Delete link.
17. Set the filelistcontent style on the link.

Save and upload the page. Also upload the css file to your server. Your File Management System will look something like this.