Question

Need suggestions on implementing associating single or many objects to an entity.

1. All soccer team players are registered individually (e.g. they are part of ‘players’ table)

2. A soccer team has many players. The click sequence is like this:-
   a] Soccer team owner provides a name and brief description of the soccer team.
   b] Now it wants to add players to this team.
   c] You have the following button ‘Add players to team’ which lets you navigate to the ‘View Players’ page and lets you multi select users from there.

Assuming this is a paginated list of players, how do you handle the following:-

• Do you provide a check box against each player and let the manager do a multi selection.
• If you need to add more players, it doesn’t make sense to show the players who have been already added to the team. Do you mark those entries as not selectable or you would still show them but provide some other indication
• If you need to filter, do you provide search filters at the top of this page.

Am looking for ideas on how to implement this or sites which have already done something similar.

Answer 1

I would have something that looks like the following:

     Players                     Roster
+---------------+          +---------------+  
|               |          |               |
|               |          |               |
|               |          |               |
|               |          |               |
+---------------+          +---------------+

Filter: ---------

With list elements in the Players list having (maybe) a picture, name, and other information about the Player.

The Filter text box would allow the user to type a partial name and filter the list to make finding the desired player easier.

Each element is draggable to the Roster column at which point the player would be added to the roster.

I have intentionally left this platform agnostic since you didn’t mention if this was for a Desktop or Web app.

Since this is for a web app, I would suggest making each player in the list its own seperate div, using jQuery Draggable to enable the drag/drop functionality, and using jQuery’s AJAX functionality for posting back to the server to make sure the player gets added to the roster.