Sort a collection list by a referenced collection's data

Attributes
1

Hi, Me again jumping from our Slack conversation.

I was wondering why we can display data in a collection list from a reference field but not sort by it. The below diagram illustrates my question. I am also wondering if there is an FS workaround. In slack it was confirmed that attribute FS Sort will be a part of the solution, but I don’t want this to be a user-controlled sort. I want the list to sort by a referenced item on load with no sorting UX available.

I don’t understand why we can’t do this natively, especially since we can display the data, just not sort by it.

In slack we left off here:

“You can set it up with CMS Sort and hide the trigger button to then click it when the page finishes loading with some simple JS.
Here we have it working alongside CMS Nest → CMS Nest + CMS Sort | Attributes”

However, I don’t know what next steps are. I’m familiar with setting up attributes. I’ve done this many times for filters, but this is sorting and making the UX of the user sort feature not available.

I’m guessing I add CMS Sort script to the same page I want to perform this sort on and follow some of the steps here: Sort items in a Webflow CMS dynamic Collection List but how do I avoid having the trigger or interface be available to the user. See this screenshot. I want to it look just like this but sorted by city (which is refereernced from another collection)

Screenshot 2024-09-05 at 1.39.51 PM
Screenshot 2024-09-05 at 1.39.51 PM1920×1275 189 KB

2

Hey @Susan_MacPhee! That is correct, you can follow the CMS Sort setup docs for a button trigger option. This button does not need to be visible to the end user as we can automatically click it with some code after being sure CMS Sort has loaded onto the page by giving this button an ID and pasting this snippet on to the page’s </body> custom code section.

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmssort',
    (listInstances) => {
      document.getElementById('YOUR_SORT_BUTTON_ID').click();
    },
  ]);
</script>