Back to all posts

References: Powerful Content Modeling for any Use Case

Posted by Jake Lumetta on March 20, 2018

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:

Related Articles

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!

Navigation Menu

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 label and url fields.

The 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:

  • Customers
    • Acme Co
    • Tesla
    • 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.

Product Catalog

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.

Wrap up

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.

Make sure you receive the freshest Butter product updates.
    

Related Articles