I’m building a dashboard assessment that takes inputs from a likert scale and outputs a score. I’m setting up each user’s results on a single CMS page. Each score is stored on a different field of the CMS page.
My goal is to be able to sort these scores from highest to low and vice versa via a dropdown or button. I made a Loom explaining the idea more here and screenshot below. I’ve already tried to use some of FNSweet’s Attributes and it’s not working because this isn’t different CMS items. It’s one single CMS item with different numbers on the page.
SA5 has a sorting feature that works outside of collection lists and would work very well for your scenario- however it’s not typically used in a dynamic situation where you’d change the sort order after the page is loaded.
If you are trying to sort values from different fields of a single CMS item in Webflow, it requires a more custom approach. The process involves the use of custom JavaScript to fetch and sort the data when you need to sort it. Here’s a high-level approach to how you can achieve it. Let me know if this is helpful!
Structure of the Dashboard Assessment Page:
Make sure every score field you have is given a unique class or ID for easy referencing. For instance, if you have scores related to, say, “Communication”, “Technical Skills”, and “Team Work”, they could have class names like .score-communication, .score-technical, and .score-team.
Dropdown or Button for Sorting:
Implement a dropdown or a button group that allows the user to choose the sorting method (highest to lowest or vice versa).
Custom JavaScript:
You’ll need to add custom JavaScript to your Webflow page to handle the sorting logic. Here’s a basic structure to help you get started:
// Get all score elements
var scores = document.querySelectorAll('.score'); // Assuming all scores have a 'score' class
// Dropdown change event or button click event to sort the scores
document.getElementById('sort-dropdown').addEventListener('change', function(event) {
var sortOrder = event.target.value; // Assuming the value of the dropdown options are 'asc' or 'desc'
// Convert NodeList to Array and sort
var sortedScores = Array.from(scores).sort(function(a, b) {
if (sortOrder === 'asc') {
return parseFloat(a.textContent) - parseFloat(b.textContent);
} else {
return parseFloat(b.textContent) - parseFloat(a.textContent);
}
});
// Now re-arrange the DOM elements based on the sorted array
var parentElement = document.getElementById('score-container'); // Assuming all scores are inside this container
sortedScores.forEach(function(scoreElem) {
parentElement.appendChild(scoreElem);
});
});
Implementing in Webflow:
First, embed your custom JS code within a script tag in the “Before Body” section of the page’s custom code settings or in the project settings for it to apply site-wide.
Ensure the dropdown/button triggers and the score fields have the appropriate IDs and classes as referenced in the code.
Testing:
Always test your functionality in various scenarios to make sure the sorting is working as expected.
Hey @natashazhu, I really appreciate your input here. I think I’ve gotten pretty close to implementing your set up but I’m not quite there. I tried setting up the tagging in different ways and I made a 2 minute loom to explain the issue.
Would you have any thoughts on how I could approach this?
I was checking out some of your videos while looking for a solution to this (very nice git-repo for Webflow users you have created). I hadn’t seen this Advanced Element Sorting so that you for sharing. This could be a great backup solution if I can’t figure out how to make Natasha’s code work. Ideally, I could give button control access to the user to control the sorting order which is why I’m going a custom code route.
I did go through the documentation and I got stuck at the key-sorting element.
In your demos you using a dynamic CMS value to sort but my use case needs to use a number from multiple fields in the CMS. Would you have a work around for how I could approach this?
SA5 sort doesn’t actually care if your elements are in a collection list or not. As long as they’re in a parent-child element structure and tagged properly, it will be sorted.
Here, you’d put the wfu-sort, wfu-sort-dir and wfu-sort-type attributes on the parent container element, and then on its immediate child items, you’d apply the wfu-sort-key.
In your case, you’d just bind the field you want to sort on for each of your cards.
I’m building a dashboard assessment that takes inputs from a likert scale and outputs a score. I’m setting up each user’s results on a single CMS page. Each score is stored on a different field of the CMS page.
My goal is to be able to sort these scores from highest to low and vice versa via a dropdown or button. I made a Loom explaining the idea more here and screenshot below. I’ve already tried to use some of FNSweet’s Attributes and it’s not working because this isn’t different CMS items. It’s one single CMS item with different numbers on the page.
I wasn’t able to make either of these use cases work but I did take the code from you @natashazhu and work it to something that is semi-low code. I put it up here on Github:
Hey Nicholas, thanks for your patience here. It seems like Michael was able to help above. I took another look and had some additional ideas you could play around with in case it’s still helpful. Otherwise, it sounds like you were able to figure it out!
Dropdown & Sorting: You’ve correctly given the dropdown an ID of sort-dropdown. Make sure the option values within this dropdown are set as ‘asc’ for ascending and ‘desc’ for descending. The actual visible text inside the dropdown can still be “High to Low” or “Low to High”.
<select id="sort-dropdown">
<option value="desc">High to Low</option>
<option value="asc">Low to High</option>
</select>
Score Containers: Your scores need to have a common class, for example, .score, for the script to fetch all of them at once. Each individual score can then also have a unique ID if needed, like score-compartmentalization, score-adaptability, etc.
The Parent Container: The script rearranges the score divs within a parent container. It looks for a parent with the ID of score-container. This container should wrap all the scores and only the scores. If it’s inside your collection list, it should be wrapping all the individual collection items that contain the scores.
Script Placement: The script should be placed in the “Before Body” section of your page settings. This ensures it runs after all the page content has been loaded.
Improving the Script: You might also need to ensure that the event is being correctly fired. If the dropdown isn’t firing the event, the sorting won’t work. Here’s a slight improvement to the script:
document.getElementById('sort-dropdown').addEventListener('change', function(event) {
var sortOrder = this.value; // Fetch the selected option value
// ... (rest of the script remains unchanged)
});
