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)
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>
Hi Luis, I need to sort by 2 items from the referenced field: first by State, then by city, like this list: Find Your Nearest TOCA Football Center | Elevate Your Soccer Training. I don’t get how to set this sort up, and then I need to make the dropdown disappear? Is this still possible?
Here’s a preview link of my site: Webflow - TOCA Production Live!
I’ve tried to implement the sort but I have not got it work yet. Still need to do the next steps after.
See second list: Sort by referenced CMS item
Can you please tell me what you think the next steps are to implement sorting data by two fields (state, then city) coming from a reference field in another collection.
Hey @Susan_MacPhee! I’m afraid we can not currently achieve a “stacked” sorting, you can see this in action if you go the Example #2 and try to sort by name and then the date.
However, if the user does not manage this sorting we can try adding some JS on top to sort the list by city after we sort it by state 
Does this sound good?
Yes, that sounds good. I wrote to Webflow this was their response (what we knew already) " While you can display data from a reference field in your collection list, sorting that data based on the referenced field isn’t natively possible in Webflow.
One workaround for this is to add a proxy field to your collection, such as a plain text field, where you manually store the data you want to sort by (For example, adding a State field to your Center Programs collection).
To set this up:
- In your Center Programs collection, create a new plain text field (this will be your “proxy” field) and name it something like “State”
- Manually enter the name of the State for each collection Item (the same state abbreviation from the Centers collection) in this “State” field
- Now, you can sort the Center Programs collection by this “State” field, as it contains the State names in a sortable format
I understand that Finsweet’s Sort tool was also proposed as part of this solution. However, their documentation appears to show that sorting is user controlled through actions such as pressing a button, selecting an option, or using a dropdown.
Please let me know if you have any further questions and I’ll be happy to assist."
My choice is to add the “proxy” fields as Webflow suggests or see if we can find a solution with JS. As you know, I just want to sort the list by state and then city without user controlling the sort. What do you suggest the next steps are for the JS scenario? I added a preview link above. The sort attribute has been added but that’s not working either yet. Looking forward to your advise. Thank you!
hey @Susan_MacPhee! I have been thinking about this, and the best way to implement it. Couldn’t we sort the list by state natively on Webflow and then handle the state sorting with Attributes? I believe this is what Webflow is recommending on the message above but correct me if I am wrong
This would eliminate the need to add custom JS.
Hi Luis, Thank you for thinking this through.
We could sort by name because the city name happens to be the first word in the name of the Center Program!
Sothe only task is to then sort the list after city (Center Program name), then state (which comes from Center reference values)
Webflow - TOCA Production Live! the page is the last one in the list “Sort by referenced CMS item”
Hey @Susan_MacPhee! Apologies! I am only now seeing the newer reply to the thread!
I am a bit lost on this comment, are we doing like a “stacked” sorting?
So the only task is to then sort the list after city (Center Program name), then state (which comes from Center reference values)
I would really appreciate a visual or the final result you are looking on the page 
Let’s close this ticket. I decided to create a “proxy” field and add the state abbreviation to every collection item (300+) so I could sort by state abbreviation, which was not available in the filter options because it came from a referenced field. I have written to Webflow about this issue and they are aware.
Thank you for letting me know @Susan_MacPhee. Apologies for not finding an easier solution!
1 Like
