▼
Streaming live at 10am (PST)

Can't sort my dynamic list based on reference field?

Design help CMS
#1

Hey there!

I’m hoping someone can help me figure this one out. Seems like a bug, but definitely wouldn’t put it past user error either. :wink:

I set up a scratch database to make sure I can do what I need to do for a client through Webflow and am running into a roadblock. I’m using a single reference field for one of my collection items and I want to sort the list with that item, but it’s not showing that item under the sort area?

Specifically, I want to sort a list of people by the country they live in (and the countries are set up in a separate collection and pointed to via a reference field).

Here’s a screen video showing first that the reference item is under “Country” but then when I go to the sort box for the dynamic list, it doesn’t show country to sort by?

How would I sort this list by country when the countries are in another collection?

Thank you!

Here’s my share link (it’s the page under “Map > Europe > Sort by Country tab”):
https://preview.webflow.com/preview/continuum-teachers?preview=475d646093aea2761116ba54d72886b2

#2

You can display all, then use isotope to filter them. Search forum for isotope filtering tutorial.

#3

I looked at isotope, and it looks great, but beyond what I’m needing right now … All I need is to be able to order the list by the “country” column. Would I still need isotope to do that?

#4

You cannot use the Webflow Designer settings panel to sort by reference collection field. See official responses here

#5

You can use custom code to sort instead:

var $countryTab = $('.w-tab-pane[data-w-tab="State"]');
var $dynList = $('.w-dyn-items', $countryTab);
var $dynItems = $('.w-dyn-item', $countryTab);

$dynItems.sort(function(a,b){
  var aText = $(a).find('.text-block').first().text(),
	  bText = $(b).find('.text-block').first().text();

  if(aText > bText) return 1;
  if(aText < bText) return -1;
  return 0;
});

$dynItems.detach().appendTo($dynList);