In the left side there is the text/title of the category. The deeper is the category inside the hierarchy, more left padding has the text.
If the node has children, there is a expand [+] /collapse [-] icon button in the right. There is no icon if it is an empty node.
The icon is in the right side to avoid cover the text with the hand while tapping it.

A click in the text-side selects the clicked Category.
A click in the [+] icon expands the node and changes the icon to [-].
A click in the [-] icon collapse the node and changes the icon to [+].
Only there could be one node expanded at the same level (accordion behavior), so, when a node is expanded, if there is already any sibling expanded, it should be collapsed.
When a node is collapsed and (later) reopened again, the previous (the last) children, grandchildren,… status (expanded or collapsed) should be preserved.

The tree is in the right column. Note: The tree only should be shown if the categories are set in a hierarchical way. If it is not the case, the classic right column should be shown.
Once any item is selected, the products of this category are loaded in the left column. Only the direct child products should be shown. Grandchildren and deeper levels of the selected category should not be shown.

The tree is shown in a modal popup once the combo containing the selected category is clicked. Note: The tree only should be shown if the categories are set in a hierarchical way. If it is not the case, the classic combo should be shown.
The label ‘(All Categories)’ should be shown in the top of categorires list.
Once any item is selected, the popup closes itself automatically and the selected category is displayed in the combo.
When the popup is shown, the selected category (of the combo) should be shown as selected in the tree. If this category is not an empty node, it should be shown as expanded (show its children) once the popup is opened. This is because if a user is in the SEARCH window filtering by the “category level N”, and opens the combo again, probably wants to fine-tune more the search by selecting an item of “category level N+1”
In case of clicking outside the popup (in the dark-gray transparency), the popup would be closed and no changes will be made in the selection.
The search should return products (that match the search pattern) of the selected category and all its children, grandchildren, ...

This page has been accessed 1,217 times. This page was last modified on 7 September 2015, at 08:00. Content is available under Creative Commons Attribution-ShareAlike 2.5 Spain License.

Projects:Category Tree In WebPOS/Functional Specifications

Contents