Advanced CMS Design

CMS Relationships

Overview
Crucial Design Principles
Know Your Limits, and Design with them in Mind
201
Minimize Your Use of Multi-Refs
202
Crucial Design Principles
CMS Relationships
202
Minimize Your Use of Collection Lists
203
Minimize Your Use of Scripts
204
Manageability Matters
205
Design Approach
Design Approach
300
Prototyping
402
Demo Project
Example Project - IMDB
500
Phase 1 - Design
501
Phase 2 - Prototyping
502
Phase 3 - Build
503
Review our Project Results
505
Further refinements
506
Resources
How to structure your Webflow CMS Collections
901
The Xref Pattern for Two-Way References
902
Advanced
Webflow CMS Technical Deep Dive
951
No items found.
Published
March 18, 2024
Updated
March 18, 2024
in lightbox

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. Countries
  • B = 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.

FAQs

Answers to frequently asked questions.

Videos
No items found.
Table of Contents
Comments
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.