Best approach to design an UI for creating users and assigning them to a level

Question

I am trying to come up with an UI design for creating a user in Account (Customer) and assigning them a to a one of the levels in hierarchy. And the hierarchy can change depending on the Account selected. I am developing this in an Ionic 2 app.

Would appreciate if you guys can suggest some best approaches in going about it. And, honestly, I am not able to come up with anything good.

Following is an example of various levels that can be setup up for different Accounts. There's going to be 10 levels but not all Accounts will use all 10 levels.

Account is the top most level. All the levels under that will have multiple values. And selecting a value at a level should show only the relevant values in the remaining levels.

Account - Store1 [A Super User having access to all features (Stores)]
 |
Country - USA, Canada [User will have access to features of selected country]
 |
Region - Eastern, Northern [Features only for the selected region]
 |
States - CA, NY, etc.
 |
City - San Francisco, San Jose, NYC, etc.
 |
Store - Store1, Store2, etc.

Not all Accounts (Customers) will have all the levels. Some might have only 3 or some will have just 2 or others will have 5 and then some might have all 10 of them.

What's the best way to design the User Interface for such data.

Any ideas, suggestions, pointers will be very helpful. Thanks.

Answer 1

Well , firstly i am sure you could come up with some good ideas you just need to be drinking better coffee ;) . You are a programmer .. its what we do.

Jokes aside. I have recently had to implement a similar hierarchical select structure and did it with each selection navigating to a new view. At first i didnt think this approach was the best but for my use case it actually was because each page had CRUD operations and so clearly differentiated each section.

In your case it is a bit different as they are only selects.

What i would do is show or hide a <ion-list> for each child in the selection process with the selected value at the top separated by an arrow icon.

Selection 1 -> Selection 2 -> Selection 3

Please select

item 1

item 2

item 3

item 4

So basically just show and hide with *ngIf based on the user role and where they are in the selection process with selected options at the top