Disclaimer - I am a backend developer who has to sometimes do frontend development.
Our web application has entities. Entities correspond to database tables. Entities have fields. Fields correspond to columns in the database table. Entities are related to each other via foreign key fields. So, entities can have a belongs-to and has-many relationships with each other.
I have to implement a screen which will allow selecting fields. Selection process will start from an entity, let's call it primary entity. The user can select fields from the primary entity or its related entities (belongs-to as well as has-many). They can select fields from entities related to those related entities and so on.
My first stab at it:
The screen would be divided horizontally. Bottom section will be hold the selected fields. Top portion will initially show primary entity, its fields and its relationships:
The user can drag and drop fields from entity A into the bottom portion. If they want to select fields from Entity B which is related to Entity A via Field Y, they would click on the 'Belongs to Entity B via Field Y' link. This will cause the top portion of the screen to be re-rendered like below (via ajax):
I may add logic to not show the "Has Entity A's via Entity A's Field Y"on the second screen. The Back button will take them back to screen 1.
How would you implement UI for such a requirement? Note, that two entities can have multiple relationships (via different fields). Entities could be related to themselves via a chain of relationships.