I'm looking for some suggestions on how to implement the UI for sub-categories.
I have already added the code to support unlimited sub categories on the Repository settings page. My problem comes in designing the UI for the three areas that the user will interact with categories, and I'm looking for some comments or suggestions on how you would envision it working...
1. User Upload/Edit page.
Let's say you are building a repository for recipes and have about a dozen top level categories, Low Fat, Low Salt, Keeper, Vegetarian, Holiday, etc. and under Holiday you have a bunch of sub-categories, Christmas, Thanksgiving, Halloween, etc. and finally under each holiday you have sub-sub-categories for Breakfast, Lunch, Appetizer, Dinner. Now it comes time to upload a new recipe. Keeping in mind that you can specify single selection or multiple selection for categories .. there are a couple of options .
a. check boxes. Keeping the same UI as currently exists, I would render all of the available categories and sub-categories as a checkboxlist. I would label each checkbox with a breadcrumb-like label so you would have checkboxes like [ ] Holidays [ ] Holidays->Christmas [ ] Holidays->Christmas->Dinner, etc. as you can see this might render a huge/ugly mess of checkboxes.
b. another option is a dual listbox. In the left list box list all the categories ( also using breadcrumb-like labelling ) that are not selected, and a right list box with all the categories that are selected with buttons in between to move categories between listboxes. Again, the issue might be real-estate. if your sub-categories are 5, 6, 7 or more levels deep, the breadcrumbs will start to get very long
c. a third option is a treeview with checkboxes on each node. I could inject a DNNTree Web Control, although I'm not sure what versions of DNN the DNNTree would support. I'll look into this further as an option to see if it's technically feasible.
d. there's also the 'drill-down' selection technique that would work great for single section but not so well for multiple selection. This would display a list box that would initially display the root categories, and allow you to click on a category and 'drill' into it, replacing the listbox contents with the sub-categories for that item and the initial item would be '<parent>' to allow you to 'drill' back up one level. As I said, this works good for selecting a single category, not sure how it would work if allowing multiple selections.
2. The Repository header.
The second UI challenge is the header. Right now you can place a dropdown list and select a category to 'filter' the items listed. Here we're talking about single selection, so a treeview would work, but the real-estate necessary would not work in the header. I could still render a dropdownlist with all the categories and sub categories but that could be unweildly. One UI paradigm I like is the new Vista Explorer bar that expands a series of dropdowns from left to right as you select, so initially in the header the dropdown display only the root categories. Select a category and a second, new dropdown appears immediately to the right displaying the sub-categories for the selected item, etc. again with 5 or 6 levels deep this could be a real-estate problem
3. The Dashboard
Not too much to worry about here, A treeview would be ideal as you could expand/collapse nodes to select a category ( in this UI the dashboard would work like a menuing system) or the drilldown listbox would work equally well, so I'm not too concerned about the Dashboard. I will allow you to set the <root> node in the dashboard settings so if you only wanted to display a partial tree like 'Holidays' you could.
A Functional Question.
While on the subject of sub-categories .. if a category has sub-categories, should the parent category be user-selectable? or auto-selected. In the above example, should I just be able to check 'Holidays' without checking any of the sub-categories? or would 'Holidays' be disabled and if none of the sub-categories are checked then it's not checked and if at least one sub-category is checked, then the parent is checked? What do you think?
So bottom line, I'm looking for some ideas .. I know some of you other there have implemented sub-categories, how did you modify the UI? does it work well for you? would you like to share your design?
Any and all ideas are most welcome.