CMS Sort
Create advanced and complex no-code sorting for Webflow CMS Collection List content.
Implement in Webflow
Apply attributes to elements on the page
Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.
It's just needed for date formats like:
July 4, 2021
July 4, 2021 13:30
07/04/2021
07/04/2021 13:30
December 2021
Select field
Text Block, Heading, Paragraph or Text Link
Add IDENTIFIER-asc or IDENTIFIER-desc to the Select Choice Value.
The IDENTIFIER value connects a Sort UI element to the correct field from Webflow CMS. The IDENTIFIER value is like the name of a CMS field. However, it does not need to match your CMS field. IDENTIFIER values can be whatever you want, but they should be descriptive, like "Name", "Countries", "States", "Cities", etc.
Add -asc to the end of the IDENTIFIER to indicate that this Select Choice should be sorting in ascending order
Add fs-cmssort-field="IDENTIFIER" attribute to text inside the CMS Item template in your CMS list. Add it to the dynamic text element connected to the CMS field of your IDENTIFIER.
Watch video below to understand how this works. The video shows this entire process.
Button, Text Link or Link Block
The trigger element must also have the fs-cmssort-field = "IDENTIFIER" attribute with the field identifier that this trigger should sort.
It's just needed for date formats like:
July 4, 2021
July 4, 2021 13:30
07/04/2021
07/04/2021 13:30
December 2021
By default, CMS Sort treats all fields as alphanumeric strings. This attribute is needed to define a numeric field that can contain decimals or negative values like:
25.89
-13
-2.68
100.50
Useful for lists that come in asc sort order by default with Webflow native sorting options.
Button
If this attribute is not set, by default the library will add a fs-cmssort_asc CSS class to the button.
If this attribute is not set, by default the library will add a fs-cmssort_desc CSS class to the button.
Use this feature like CSS. Apply these ascending and descending classes at the list level or the button level.
Apply these attributes to the element with fs-cmssort-element = list to apply these classes to all buttons in the Sort UI.
Apply these attributes to the element with fs-cmssort-field = IDENTIFIER (the button), to apply unique classes to each button.
Text Block, Heading, Paragraph or Text Link
Add fs-cmssort-field="IDENTIFIER" attribute to text inside the CMS Item template in your CMS list. Add it to the dynamic text element connected to the CMS field of your IDENTIFIER.
Watch video below to understand how this works. The video shows this entire process.
Text Link or Link Block
Text Block, Heading, Paragraph or Text Link
Add IDENTIFIER-asc or IDENTIFIER-desc to the Text Link or Link Block inside the Dropdown.
The IDENTIFIER value connects a Sort UI element to the correct field from Webflow CMS. The IDENTIFIER value is like the name of a CMS field. However, it does not need to match your CMS field. IDENTIFIER values can be whatever you want, but they should be descriptive, like "Name", "Countries", "States", "Cities", etc.
Add -asc to the end of the IDENTIFIER to indicate that this Dropdown option should be sorting in ascending order
Add fs-cmssort-field="IDENTIFIER" attribute to text inside the CMS Item template in your CMS list. Add it to the dynamic text element connected to the CMS field of your IDENTIFIER.
Watch video below to understand how this works. The video shows this entire process.
Dropdown
For example, if the user selects "Name (A>Z)" in the Dropdown, the dropdown label element with this attribute will update to "Name (A>Z)".
It's just needed for date formats like:
July 4, 2021
July 4, 2021 13:30
07/04/2021
07/04/2021 13:30
December 2021
Element
Useful for improving ux of sort interfaces with many items. Anchor scrolling to the top of the page will assure the user is always seeing content from the top of the List.
Values are in milliseconds. Default is 100ms.
If you already have fs-cmsfilter-duration applied to the list, this attribute is not needed. Only one duration is needed.
CMS Sort uses a new attribute for multiple instances. Use fs-cmssort-element = "trigger-x" and fs-cmssort-element = "list-x" to create multiple instances of CMS Sort.
If more than one trigger belongs to the same list (currently only supported with Button Triggers), all the triggers must match the list instance number.
Working examples
See this solution working live in this Webflow project.
The Trevi Fountain is a fountain in the Trevi district in Rome, Italy.
October 18, 2021
Copacabana is a bairro (neighbourhood) located in the South Zone of the city of Rio de Janeiro, Brazil.
October 25, 2021
It is named after the engineer Gustave Eiffel, whose company designed and built the tower.
October 18, 2021
Is a natural history museum on the Upper West Side of Manhattan, New York City.
October 25, 2021
Iguazú Falls are waterfalls of the Iguazu River on the border of the Argentine and Brazil.
October 25, 2021
Casa Milà or "The stone quarry", a reference to its unconventional rough-hewn appearance.
October 18, 2021
Is a large unfinished Roman Catholic minor basilica in the Eixample district of Barcelona.
October 18, 2021
The Arc de Triomphe de l'Étoile is one of the most famous monuments in Paris, France.
October 18, 2021
Parc Güell is a privatized park system composed of gardens and architectural elements.
October 18, 2021
The Golden Gate Bridge is a suspension bridge spanning the Golden Gate.
October 25, 2021
It is named after the engineer Gustave Eiffel, whose company designed and built the tower.
October 18, 2021
Is a colossal neoclassical sculpture on Liberty Island in New York Harbor in New York City.
October 25, 2021
It is the home of many of the most known work of arts, including the Mona Lisa.
October 18, 2021
Is a natural history museum on the Upper West Side of Manhattan, New York City.
October 25, 2021
Iguazú Falls are waterfalls of the Iguazu River on the border of the Argentine and Brazil.
October 25, 2021
Parc Güell is a privatized park system composed of gardens and architectural elements.
October 18, 2021
The Taj Mahal is an ivory-white marble mausoleum on the right bank of the river Yamuna in the Indian city of Agra.
October 25, 2021
The Colosseum is an oval amphitheater in the center of the city of Rome, Italy.
October 18, 2021
Combinations using CMS Sort:
You can combine this Attribute with others to create more complex solutions.
Frequently Asked Questions
Everything you need to know about this attributes solution.
Sure they can!
There is a work around using custom Javascript, you should setup the sort attributes and add a sort button with the class ".fs_cmssort_button" that you set style to display:none .
Then add the following script to the footer code.
<script>
window.onload=function(){
document.querySelector(".fs_cmssort_button").click();
};
</script>
This can be achieved with a little custom JS, basically follow these steps:
1. Add the CMS Sort script after the CMS Combine script
2. Set up the sort attribute using this docs https://www.finsweet.com/attributes/cms-sort/
3. Set the sort button to display:hidden and give it a unique class name (ie. ".fs_cmssort_button"). Add the script below before the </body> tag
<script>
window.onload=function(){
document.querySelector(".fs_cmssort_button").click();
};
</script>
Developer documentation
Next time implement inside Webflow
