Webflow's CMS single-ref and multi-ref fields allow you to create relationships between collections, and to describe more complex structures.
However there are key limitations;
- You can have a max of 5 relationship-type fields in a collection on CMS plan ( 10 on business plan )
- Relationships are one-way, which is somewhat limiting to process of querying the CMS data.
Multi-ref fields;
- Sometimes have to be expressed through a nested collection list, which has a limit of 5 items, and only one per page.
- Have no ordering, or filtering capabilities
- Are somewhat difficult to manage, due to the fact that you cannot insert or reorder them easily
Master-Detail patterns
Let's consider a master detail relationship involving two collections. A and B;
A = master, e.g. CountriesB = detail, e.g. Cities
In Webflow, there are three common patterns that can be used to express this relationship.
Master-Multiref-Detail ( Many to Many )
Here, A contains a multiref field, pointing to B
Characteristics;
- Strongly Ordered. The list of Detail items is directly specified.
Advantages;
- Keeps the ref with the master item, convenient in some admin scenarios
- Can describe Many-to-one relationships, allowing the same Detail item to be referenced by more than one Master. The Webflow CMS describes Categories and Products in this way, for this reason.
Limitations;
- In nested collection lists, you are limited to showing 5 detail items
- Ordering cannot be changed in the view layer, except with custom code
- Items cannot be reordered in the CMS UX, they must be deleted and re-added
- Quickly becomes unmanageable for very large detail sets, especially if reordering or insertions are common
Detail-Ref-Master ( One to Many )
Here, B contains a single ref to A, such that each detail item points to its master.
- Describes a One-to-Many Master-Detail relationship. Each Detail item has one and only one Master, e.g. Country-City.
- Easy to manage.
- Combined with a sequence field, you have sorting control of the Detail items.
XRef ( Many to Many )
A and B contain no ref fields to describe their relationship. Instead we introduce a third collection, C, which contains a single ref to A, and a single ref to B.
- Describes a Many-to-Many relationship.
- Maximally flexible
- Has access to the full info of both the Master item and the Detail item.
- Can contain additional information to describe the relationship itself
- Allows multiple relationships between the same entities
- Avoids the use of multi-refs, which have some complexities
- Allows direct access from the role to both A and B's data
- Including, within HTML embeds
Limitations;
- Requires a third collection
- Requires administration to be done separately from A and B
Examples;
Actor-Role-Movie
Typically, actors are in many movies, and movies have many actors. Here, we can create an XRef collection named Role, which has a single-ref to both Actor and Movie.
This setup allows-
- Listing all Actors in a Movie, and the Role they played. On the Actor collection page, you setup a collection list; bound to role, constrained to Actor. The full Movie data is accessible as a Single-ref.
- Listing all Movies an Actor has performed in, and the Role they played
- Describe the role itself, such as the character's name, and a photo.
- Referencing the Role directly from other collections, so that other data can be attached to the role, such as awards.
Person-Role-Company
e.g. Sarah is the VP of Branding for Microsoft. Sarah is also the Director of Online Marketing for Microsoft. We can describe these as two distinct relationships, with titles, dates, etc.
