Something I continually find myself needing is Collection-driven population for FORM SELECT elements. WebFlow doesn’t provide support for this so I’ve usually hacked together some script to populate it myself.
Finally I decided to do it properly as a jQuery-based databinding utility library.
Sharing it here in case others have the same need.
Key features;
Allows you to bind any CMS Collection to a Webflow Select form control.
Allows you to filter and sort the Collection to your needs, before binding.
Generates legit JSON from your Collection Data, so that it can be used in other creative ways too.
Supports as many Collection Lists, and Select controls, as you need, on the same page.
That shouldn’t be too difficult using my approach above. I’d add your additional data (anything you want from your collection) into the JSON chunk, making sure to format it properly as JSON. Be cautious of quotes in your content, you’d need to find a way to JSON-escape those if you have them. Then add a jquery onchanged event that watches your dropdown, which takes the newly selected item, looks it up in the JSON data set, and then assigns the role value as the textbox value.
All of the pieces you need are there- unfortunately I"m not a jquery / scripting expert, so I can’t whip up the code from memory- but Google makes finding the details quite easy. Hope that helps!
Hi @memetican and thank you for a great tutorial. I need to change the page url by the option selected in the selection field, i.e. change it to the slug. I would really appreciate it if you can help me understand how do I do that
Hey Charles,
for some reason I can’t load your webflow preview, I’m getting a webflow error there…
The video walks through the implementation in detail, probably too much detail, so revisit that. I can’t guess what you’ve missed but make sure your datasource ID matches between your drop down control and your datasource collection list.
Hey man, thank you for the prompt reply! I finally figured out where I went wrong.
I didn’t realize that the name had to be “data-source”! I just thought that I could name it whatever… I didn’t realize it was the key for the data to be found. lol… (I have virtually no coding experience, soooooo…) anyway, maybe add a note in your instructions that it must be named that? Cheers mate and thank you so much for the awesome and simple tutorial!
Good, glad you found it. Yes that’s in the documentation and the video. It might not be obvious to non-programmers, but any time you see something formatted as code, you can assume that means that it must be this exactly.
Unfortunately, every documentation platform formats code differently, including this one. I like the red though, can’t miss it.
@memetican Is there a way to sort the select field by number(or something else) instead of the default alphabetical sort?
I have a website which has product downloads in different languages. Each product has different language support, so the CMS generated select field is great! But I would like English to always be the default selection and currently its Chinese because of how Webflow is sorting it.
It has been a long time since I’ve looked at this but as I recall, the SELECT list is populated by the javascript, from the collection list. That means whatever order you define for your collection list should be simply carried directly over into the SELECT, Webflow isn’t involved in that process.
In terms of controlling the ordering of your Collection List output, yeah, Webflow does not have any feature for manually ordering items, which is a pain. Your only option is to add a numeric field, I call mine “Pos” and then stick numbers in it. If you number then 10, 20, 30… you’ll have some space for insertions later. Obviously, make certain to configure your Collection List to sort on that Pos field, ascending. Added warning, I’d make the Pos field required, because blanks sort to the top ( rather than the bottom ).
Thanks! That makes a lot of sense. I didn’t even think about sorting the data-source collection list, I was too focused on trying to sort the content inside of the select field itself. It’s working just like you said.
It is definitely somewhat a pain to have to put a priority number field in almost every CMS data base so that you can sort in a specific order for sure.
Thank you for your solution on this! It works great!
