Today we're announcing our most powerful content modeling feature, References. References (more specifically reference fields) allow you to create links between your content in ButterCMS, thus enabling you to tackle any use case, from linking to related articles to multi-level navigation menus and more.
Here are some examples to illustrate:
Let's say you've added an articles section to your website using our new Page Types feature and you want to make the articles even more helpful by showing related articles. References make this very simple to achieve.
First you would add a Reference to your "Articles" page type for
Related Articles. It will link to many articles so it's "One-to-Many" and links back to itself, the "Articles" page type.
Then, when you edit an Article page, you'll see this new field at the bottom.
Adding and removing related articles is as a simple as:
Then, in your API response, you'll have a new
related_articles field returned as an array of Article objects. Simple as that!
Another example: you can use References to enable a self-referencing scenario to build out nested content models for things like a multi-level navigation menu or deep category/tag taxonomy.
This scenario uses our Collections feature. First, create a
Menu Item collection with
child_items Reference configuration is One-to-Many and self-references the
Menu Item collection.
Then, let's say we want our menu to look like this:
- Acme Co
- Space X
Creating a top-level menu item called "Customers" that links to child menu items (specific customers) is as simple as this:
In this example we have one collection, referencing itself, to power an entire menu system.
The previous examples illustrate a Page Type linking to itself and a Collection linking to itself. References can also be used create links between a Page Type and Collection. This is a very powerful combination that opens up rich possibilities of mixing pages with more abstract data concepts.
For example, you can create a product catalog where each product has an associated set of tags used to group products and allows for filtering products by a tag.
First, create the
Product Tags collection
Then create the
Product page type with a reference field to the above
Product Tags collection.
Then create a Product page and apply the appropriate tags.
Success! A rich product catalog with a customizable tagging system.
There are countless more examples of what's possible, from creating Conference websites with a directory of speakers, their talks, and related talks, to an education platform where teachers can reference courses they teach.
Modeling out any content scenario you or your client needs is now possible with References. If you're a developer, take a look at our API Docs to see how query and integrate References into your app.