Configuring **many-to-many** relationships in Umbraco UI Builder, the backoffice UI builder for Umbraco.
Related collections add support for editing many-to-many relationships with UI Builder. These are found when multiple entities from one collection are associated with multiple entities from another. They are modeled in a database via two tables related to a junction table.
A classic example is with Students
and Courses
. Each course has many students, and each student takes many courses.
A representation of your collections would look like this:
And the entities would be represented using the following Models:
You can get started with related collection through a two step process:
Add collection definition
Add related collection entity picker and definition
Define a related collection by calling the AddRelatedCollection
method on a given collection config builder instance.
Adds a related collection to the current collection with the given names, descriptions, and default icons. A property accessor expression is required for the entity ID field of the entity. The relation configuration will define the junction entity by specifying the references to parent and child entities.
Define the child collection entity picker by calling the AddRelatedCollectionPickerField
method on the parent collection fieldset config.
Adds an entity picker with the specified Data Type name to the editor of the parent collection.
Relation Config Alias: The relation config alias must correspond to the related collection picker field alias! (e.g. studentsCourses
)
Retrieves the related collections based on the ID of the parent entity.
Adds a new related collection to the current parent entity.