How can I sort scores from highest to lowest or vice versa on a single CMS page in Webflow?
TL;DR
- Add a Collection List linked to your Score data via a Reference or Multi-Reference field.
- In the Element Settings, sort the list by the numeric Score field in ascending or descending order as needed.
To sort scores from highest to lowest (or vice versa) on a single CMS page in Webflow, you’ll need to use a Collection List and apply sorting rules based on your score field.
1. Prepare Your CMS Collection
- Ensure your CMS Collection includes a numeric field (e.g., "Score") that stores the values you want to sort.
- The numeric field must be set up as a Number field type in the CMS, not as plain text.
2. Use a Collection List on the CMS Template Page
- On your CMS Template page (for example, "Game" or "User Profile"), add a Collection List element.
- Make sure this Collection List is connected to a Reference or Multi-Reference that pulls in the related scores (if scores are stored in a separate Collection like "Scores").
3. Apply Sorting Settings
- Select the Collection List.
- In the Element Settings Panel, under the Sort Order section:
- Choose the Score field.
- Select Descending (Z → A) to show scores from highest to lowest.
- Select Ascending (A → Z) to show scores from lowest to highest.
4. Customize Display (Optional)
- Use dynamic binding inside the Collection List to display additional info like player name, date, or game.
- Ensure the list layout is styled for clarity (e.g., using a table or cards).
5. Current Limitations
- Webflow does not support dynamic sorting controlled by user input (like clicking a "Sort by" dropdown) without custom code or third-party tools.
- Sorting must be predefined in the Designer.
Summary
To sort scores on a Webflow CMS page, use a Collection List bound to the relevant data, then apply sorting in the settings based on the numeric Score field, choosing either ascending or descending order.