TransWikia.com

Best UI pattern to allow the user to assign 1 level nested items to two groups

User Experience Asked by Swathi on February 18, 2021

My issue is something similar to this one – Best UI pattern for letting a user assign items to groups

I am looking for a good UI design for mapping items between 2 groups (only one-to-one mapping). These items can be under a parent or by itself.
I thought of drag-and-drop/ having checkboxes (or switch like) to turn on for any one group.

Items Group 1 Group 2

Item A
Item A1 checkbox checkbox

Item B checkbox checkbox

2 Answers

On the simplest level you could just try a dropdown which lets you select the item on the right - might not be fancy though.

On a little interactive method you could use something like s chord diagram where after a drag amd select you display the relationship.

Answered by rohan on February 18, 2021

Sounds like a transfer list could be what you're looking for.

A transfer list (or "shuttle") enables the user to move one or more list items between lists.

Transfer list_Material UI

(Note: both link and screenshot refer to Material UI. There might be other visualizations or implementation that might suit your needs better. Nonetheless, you should get the idea)

Answered by QWERTZdenker on February 18, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP