Related Collections
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.
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F2059272600-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fj6FmBruCSGbXJIJB2aRu%252Fuploads%252Fgit-blob-dd4d9983acc366aa5f94c3c42b444047340d7bd8%252Frelated_collections_child.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=fe5b6cca&sv=1)
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F2059272600-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fj6FmBruCSGbXJIJB2aRu%252Fuploads%252Fgit-blob-5eb13764b05762cc8d2a0fb56cbc67a76041a1a4%252Frelated_collections_parent.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=676670ef&sv=1)
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F2059272600-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fj6FmBruCSGbXJIJB2aRu%252Fuploads%252Fgit-blob-dc812be81e1e3f0b1cddf1641a352e3090d97533%252Frelated_collections_entity_picker.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=8db953c2&sv=1)
Collections Representation
A representation of your collections would look like this:
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F2059272600-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fj6FmBruCSGbXJIJB2aRu%252Fuploads%252Fgit-blob-007436a85bf855e8c75742d38691f6bacf3543ae%252Frelated_collections_diagram.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=cdf0d83&sv=1)
And the entities would be represented using the following Models:
Defining a related collection
You can get started with related collection through a two step process:
Add collection definition
Add related collection entity picker and definition
Collection definition
Define a related collection by calling the AddRelatedCollection
method on a given collection config builder instance.
AddRelatedCollection<TEntityType, TRelatedEntityType, TJunctionEntityType>(Expression<Func<TRelatedEntityType, object>> idPropertyExpression, string nameSingular, string namePlural, Action<RelationConfigBuilder<TBuilder, TEntity, TRelatedEntityType, TJunctionEntityType>> relationConfig)
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.
Configuring a related collection entity picker
Define the child collection entity picker by calling the AddRelatedCollectionPickerField
method on the parent collection fieldset config.
AddRelatedCollectionPickerField<TValueType>(string alias, string dataTypeName, string label)
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
)
Last updated