Search Filter with tree viewer

I recently had to came out with a solution for our client. They have a requirement for search filter where the user could pick some property for them to filter out their search criteria.

One of it is for them to being able to pick multiple organization, branches, device groups and devices. Their current implementation let user to just pick any organization and then related branches would then be available for them to be selected and so on with the devices. However, from the UI perspective, they couldn't tell which device belong to which branch when they pick multiple branches, because its just a box with all of the selected values.

So we discuss and thought that a tree view with checkboxes would fit this requirement. I also added a search input so we can limit the number of item to be shown in the tree view. So that only related organization would be shown. And each selection will always be grouped towards its parent, in this case, device to device group, device group to branch and branch to its organization.

This version presented in a sidebar kinda layout which slides from the side.

Full view: https://d3uepj124s5rcx.cloudfront.net/items/2w3P0M0U140v1z070T0e/search_filter_slide.png

More by Idraki Muhamad

View profile