Mastering Pagination and Filtering for Multi-Reference CMS Fields in Webflow

When working with Webflow's CMS, you might have stumbled upon a common problem that many Webflow users experience - the inability to paginate and filter a multi-reference CMS field on a CMS Collection Page. This can be a frustrating issue, especially when working with complex projects that involve multiple collections. But worry not, we've got you covered! Let's dive into the details of this problem and explore some effective solutions.

The Problem

Webflow is a powerful tool that gives you the ability to create dynamic, CMS-driven websites. However, one limitation that users often encounter is the inability to paginate and filter a multi-reference CMS field. This becomes particularly troublesome when dealing with CMS Collection Pages where you need to display a list of items that are linked via a multi-reference field. For instance, if you’re building a property listing website and you want to list the properties in different cities on separate pages, you'd naturally want to use the city as a filter. However, with the current settings, Webflow doesn’t allow you to do that. We can see this issue reflected in a query raised by a Webflow user, Rebecca Lowe, in the Webflow forum:

"I need to paginate the Neighborhood Guides CMS (multi-reference field) in my City Pages Template but there is no setting for pagination or filtering."

The Solution

Despite the limitation, there is a workaround to this issue. While it's not possible to directly paginate or filter the multi-reference fields, we can use a combination of reference fields and multi-reference fields to achieve the desired outcome. Here's a step-by-step guide on how to do it:

• Add a Multi-Reference field in each Category called Careers.
• Add a Reference field in each Career called Category.
• Add a Collection List to the page and connect it to the Careers CMS Collection (not the multi-reference field).
• Set your pagination (it’s over 1000 items!).
• Set a Filter to only show Careers that contain the Current Category.
• Repeat these steps for each category.

This workaround, shared by Kevin Handy on the Webflow forum, might be a bit clunky, but it's effective. It basically involves setting up a filter that only shows the Careers (or whatever your equivalent is) that contain the Current Category (or your equivalent). This way, you're indirectly filtering the multi-reference field based on the current item on the CMS Collection Page.

Another solution to the issue could be to use an external tool like Jetboost. Jetboost provides a workaround for filtering by multi-reference fields in Webflow. It allows you to set up a dynamic, real-time filter on your Webflow site without writing any code. You can check out their guide on how to set up "Filter by Multi-Reference Field" for detailed instructions.

Note:

Remember, these solutions are workarounds, and they might not be perfect for every use case. However, they should help you get around the limitation and make your multi-reference fields more manageable. Hopefully, Webflow will introduce a built-in solution to this issue in the future, but until then, these methods should help you keep your project moving forward.

Top Tip: Leverage Flexbox for Dynamic List Alignment

If you're dealing with multi-reference fields in Webflow, there's a good chance you're dealing with dynamic lists. While our previous solutions have helped you filter and paginate these lists, here's a top tip that will help you display them in a user-friendly and aesthetically pleasing way.

Webflow's Flexbox feature can be a game-changer for aligning dynamic lists. With Flexbox, you can easily control the alignment, direction, order, and size of your items in ways that were previously only possible with CSS hacks and JavaScript.

Here's how to use it:

• Select your Collection List Wrapper or any element that contains your dynamic list items.
• Go to the 'Style' panel and under 'Layout', click on 'Display Setting' and choose 'Flex'.
• Adjust the 'Direction', 'Align', 'Justify', and 'Wrap Children' options as needed. These options control the direction of the flow, vertical alignment, horizontal alignment, and whether items wrap onto multiple lines, respectively.

What makes this tip advanced is the level of control Flexbox gives you. For instance, you can have your dynamic list items align to the top of the container, even if they vary in height. Or you can space them evenly, regardless of their width. This level of control can be critical when you're dealing with dynamic content, as it keeps your layouts looking consistent and professional, regardless of the content they're displaying.

Keep in mind, though, that Flexbox is not supported in Internet Explorer, so if a significant portion of your audience uses that browser, you'll need to consider a fallback.