Environment / Location Picker Views + Functionality Overview

.DS_Store

L360_ENV_LOCl.md

Views

---

click view to link to functionality description

• Single Environment / Single Location
• Single Environment / Multi-Location
• Multi-Environment / Single Location
• Multi-Environment / Multi-Location

---

UI Image References

image1) Selected Environment

image2) Environment List w/ Selected Environment

image3) Search Bar

image4) Location List

image5) Single Environment w/ Single Location

---

Functionality for Mobile Devices

Single Environment / Single Location

see image5 ---> note: the toggler will not be present in the view

• there should be no dropdown toggler on the selected environment
• there should be no 'x' icon to clear the selected environment
• there should be no search bar
• the single environment name will be displayed in the selected environment grey box
• the single location name will be displayed under the selected environment

Single Environment / Multi-Location

see image4

• there will be a dropdown toggler that will open the location picker list
• the search bar will be there and will filter the list of locations
• the 'x' icon will be there if a location has been selected and will clear the location on click
• the only environment name will be in the gray box on load
• ----> what does the pencil icon do?
• ----> what does the first item in the list do -- site map icon?
• ----> what does the underlined location represent?

Multi-Environment / Single Location

• there will be a dropdown toggler that will open the environment picker list
• the search bar will be there and will filter the list of environments
• the 'x' icon will be there if an env has been selected and will clear the env on click
• ----> will the 1 location be visible on load?
• ----> if the 'x' icon is clicked will the single location remain in view? what should that look like?

Multi-Environment / Multi-Location

• there will be a dropdown toggler that will initially open the environment picker list
• the search bar will be there and will initailly filter the list of environments
• the 'x' icon will be there once an environment has been selected and will clear the environment on click
• once an environment has been selected that environment will be displayed in the gray rounded box inside selected environment section see image1
• once an environment has been selected, the location list will appear in the place of the environment list
• the search bar will remain in view and will filter the location list
• if a location has been selected the 'x' will clear both environment + location on click
• ----> what will the view look like once environment and location have been cleared? whats the default load screen look like?

Other Notes

there would be two scenarios where we would want the ability to clear the input. If a Listen360 rep is logged in we will display a Filterable List of both Environments as well as Locations. For non Listen360 Reps we would want to have a clear option for those Customers who have +1 locations as that list would be filterable as well. We could put a limit on when to display the clear button, say when we see +10 Locations.

there will need to be a parent component that will wrap:

• Menu Component
• SearchDropdown Component
• ListEnvironment Component
• ListLocation Component

location_list.png

search_bar.png

selected_env_and_list.png

selected_environment.png

single_single.png