Advanced CMS Design

The Xref Pattern for Two-Way References

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
Updated
in lightbox

Developers who are familiar with relational database models see the Ref and Multi-Ref fields and immediately assume they are seeing a relational database.

With this perspective comes some assumptions;

  • I should be able to query this somehow
  • I should be able to travel across multiple references, to tables further away in the relationship map
  • Relationships should be two-way

Unfortunately the Webflow CMS is actually based on a key-value document database ( MongoDB ), rather than a relational database, so none of these things are possible.

The Xref Pattern

What you can do, depending on your use case, is to create a third collection using an cross-reference ( xref ) pattern.

Let's say you're building a movie site, and you need to describe Actors and Movies. An actor is probably in many movies, and in fact the role they play in each movie has important details too.

So we structure it this way;

  • Actors collection contains details about your actors
  • Movies collection contains details about your movies
  • Role collection contains a single-ref to Movies, a single-ref to Actors, and other role-specific fields like role name, character name, awards…

Application

This approach solves a number of problems in Webflow page design.

On your Movies collection page, you can include a collection list bound to Role, which is filtered to Current Movie. This allows you to easily show all of the actors that are in that movie.

On your Actors collection page, you can also include a collection list bound to Role, which is filtered to Current Actor. That way, you can easily show all of the movies that this actor was in.

You now have your two-way reference.

Notes

https://discourse.webflow.com/t/reverse-multi-reference-fields/48975/7

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.