Search Filter Modal

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. We also toy around the idea of preparing some set of syntax for specific search, such as branch, organization, as you can see from the shot, the blue label "branch". This way we can tell the backend what we actually looking for (this is only for the autocomplete, not the actual data search). This way also we can incorporate other search filter, such as search by keyword, etc.

This version presented in a modal view.

Full view: https://d3uepj124s5rcx.cloudfront.net/items/1o3d1w3O0C1A2M42232M/search_filter_modal.png