A Comprehensive Guide to Collection References in Dynamic Content

Imagine you're struggling with the repetitive task of manually linking related items or attributes to your website content. In that case, you're not alone—this time-consuming chore can quickly become a source of frustration. But what if there was a smarter way to handle it?

Enter SP Page Builder’s Dynamic Content! The Dynamic Content is already packed with incredible advantages, but its reference and multi-reference fields take the game to a whole new level. 

So in this guide, we’ll demystify how dynamic content works in SP Page Builder and provide a step-by-step tutorial to help you get started.

Ready to transform your workflow? Let’s dive in!

Understanding Reference & Multi-References in Dynamic Content

In any content-rich website, maintaining relationships between various types of data is crucial for organization, usability, and scalability. This is where the reference and multi-reference fields in Dynamic Content shine—they simplify and automate these connections and make your site not only more organized but also more dynamic and interactive for your audience.

The Reference fields are designed for one-to-one connections, and this is what makes them ideal for linking a single item to another.

Similarly, with the Multi-reference fields, you can easily establish one-to-many connections, associating one item with multiple related elements. Examples can be tags, keywords, categories, and so on.

And SP Page Builder makes sure you can achieve this daunting task as smoothly and hassle-free as possible. So let's dive into understanding this in detail.

Reference Fields in SP Page Builder

In SP Page Builder's Dynamic Content, you can use Reference fields while creating your collections to link the related items efficiently. For instance, if you manage a “Recipes” collection and a “Chef's Name” collection, you can easily link each chef to their respective recipes without manually inserting the chef’s details for every recipe while creating your layout.

And when it comes to making an update, simply change it once, and it will automatically update everywhere on your site.

Multi-Reference Fields in SP Page Builder

Multi-reference fields work much like reference fields but with added flexibility. Instead of linking one collection to another, they let you associate several related items with a single piece of content. Imagine tagging your recipes with multiple related tags like Asian Cuisine, Protein, and Noodles in just a few clicks. All you have to do is define the fields while creating your collections and assign them their respective recipes.

Speaking of recipes, if you're planning to build a dynamic recipe site in Joomla, be sure to explore our detailed tutorial!

A Quick Tutorial on Implementing Collection References with SP Page Builder

Now that you understand the basics of reference and multi-reference fields in Dynamic Content and how it streamlines managing your growing content, let's see how SP Page Builder can help you attain this through a simple example. Let’s get started!

Step 1: Install the Latest Version of SP Page Builder

Ensure you have the latest version of SP Page Builder installed, as Dynamic Content is supported from version 5.5.0 onward.

Once installed, navigate to Components > SP Page Builder Pro and select Dynamic Content. 

For this demonstration, we’ll work with a real estate website where we already have a dynamic Property and Property Details page. This is where we’ll implement our dynamic data using Reference and Multi-reference fields.

Step 2: Get Your Collections Ready

Next, set up your dynamic collections. You can either choose from the Collection Presets or create your own from scratch.

We have created three collections: Properties, Agents, and Features.

Use fields like Image, Title, Location, Price, Type, and more to structure your collections.

Step 3: Include Your Collection Items

After setting up each collection, it's time to add your collection items.

1. Click the Add Items button to populate the fields with relevant data.
2. Once completed, click Save to store your items.
3. Add as many collection items as needed for each collection.

Step 4: Plan How You Want to Connect Your Collection References

Planning is key! Decide how you want to connect your collections using the reference and multi-reference fields.

In this demonstration:

• “Properties” will serve as the primary collection.
• The “Agents” collection will be linked to the Properties collection using a Reference field (allowing one agent per property).
• The “Features” collection will be linked to the Properties collection using a Multi-reference field (allowing multiple features per property).

Step 5: Add Reference and Multi-Reference Fields to Your Collections

With your collections ready, it’s time to include Reference and Multi-reference fields in the Properties collection.

1. Open your created Properties collection by clicking the three dots next to it and selecting Edit.
2. Click Custom Fields, scroll down, and select the Reference field. Then, choose "Agent" as the source.
3. Similarly, select the Multi-reference field (located just below the Reference field) and choose "Features" as the source.
4. Click Update Collection to save your changes.

Step 6: Populate Your Collection Items with Reference and Multi-Reference Data

Now, update your Property items to include their respective “Agents” and “Features”.

1. Open each Property item in the Properties collection.
2. In the Agents dropdown (Reference field), select one agent per property.
3. In the Features dropdown (Multi-reference), select multiple features for each property as needed.

Repeat the process for each item in your Property Collection to establish accurate links to their respective agents and features.

Step 7: Add Reference and Multi-Reference Fields to Your Dynamic Index Page

At this stage, the heavy lifting is done! All that's left is to add the reference fields you created to your SP Page Builder Dynamic Content pages.

Design your Dynamic Index page as you would with any SP Page Builder page. The key difference here is the ability to include dynamic data into your layout using the Dynamic Content addons.

Our Properties page is already set up as the Dynamic Index page. If you are not sure about how to create one, feel free to breeze through the Collection Index documentation.

Let's integrate the reference fields into the Dynamic Index page layout.

To display the reference fields data:

1. Inside the Collection addon, add a Dynamic Text addon and rename it to your preference.
2. Set the addon’s Field Source to Property Agents > Title.
3. Customize the addon to align seamlessly with your layout. For instance, we’ve set the font to Inter and adjusted the size to 12px.
4. As an optional step, you can use some custom CSS to enhance the design. We have presented the Agents' names as a badge overlay on each image.

To display the multi-reference data:

1. Add a new Dynamic Collection addon within your existing Collection addon and set its source to Features.
2. Inside this newly added Collection addon, include the Dynamic Text and Dynamic Media addons. 
3. Set the Dynamic Text addon's source to Value and the Dynamic Media addon's source to Image.
4. Hit Save once done.

Step 8: Add Reference and Multi-Reference Fields to Your Dynamic Details Page

For the Property Details page, use a similar method by mapping Dynamic Text and Dynamic Media addons to the appropriate fields. Keep in mind that a Collection addon is only necessary for displaying multi-reference fields. For all other fields, you can directly use the Dynamic Text and Dynamic Media addons without additional setup.

Step 9: Final Result

Give yourself a well-deserved pat on the back for making it this far! Your Dynamic Content page now seamlessly displays both reference and multi-reference data. To modify this data, simply update your dynamic collection items—no need to adjust the page layout.

Filter for Your Dynamic Content

By now, you’ve hopefully followed the steps to integrate reference and multi-reference fields into your dynamic content. But the possibilities don’t stop there. You can expand the functionality even further by utilizing the Dynamic Filter addon.

With the Dynamic Filter, your users can seamlessly filter through your dynamic content. For example, if your real estate website features a wide range of properties, you can give visitors the ability to filter listings according to their preferences. Allow them to sort by property price, category, amenities, and more to find exactly what they’re looking for.

Check out the Collection Filter documentation, where you can learn the steps to add the filter.

Wrapping Up!

We hope this tutorial has answered many of your questions about the reference and multi-reference fields in SP Page Builder's Dynamic Content. If you've explored these features in your projects, we’d love to hear about your experience! Share your thoughts in the comments below—your feedback helps us and the community grow together.

Get SP Page Builder 5Live Demo