CMS check list that shows inactive and active items dynamically
Hi All!
I’m trying to create a dynamic CMS list that shows inactive items as grayed out, while showing active items being full opacity and a checkmark in the box next to it (see attached). This is the first time I’ve set up a CMS so I may not be doing it the best way. Here’s a link to the read-only copy of the site for reference:
https://preview.webflow.com/preview/entrust-case-study-2-e3b510e3857353c920?utm_medium=preview_link&utm_source=designer&utm_content=entrust-case-study-2-e3b510e3857353c920&preview=08c5f02622f9f0b6b5d526f7211a1690&pageId=65010708b104dd62f77d84dc&itemId=65010708b104dd62f77d8579&workflow=preview
I want to be able to show a list of Strategy, Creative, and Execution services at all times (grayed out, with no checkbox), and have CMS-controlled conditional formatting for services that were provided for each project (white, with checkboxes) ... see attached image.
Here’s the way I currently have it set up: Strategy Services as a collection, pulled into the Work/Portfolio collection as a multi-reference field).
The problem with this is that I can only select the active Strategy Services to include, but can’t make it active/inactive. Is there a different way to structure the fields to make that possible without having a huge list of services listed in the Works collection?
Can anyone help me figure this out natively or point me to code that handles this? TIA!
16 Replies
Hey @Ballen - the link isn't working for me 😦
@Web Bae Sorry about that. Here's the updated share link:
https://preview.webflow.com/preview/entrust-case-study-2-e3b510e3857353c920?utm_medium=preview_link&utm_source=designer&utm_content=entrust-case-study-2-e3b510e3857353c920&preview=10fcc8961bee865fbcec4cb7231d50a2&pageId=65010708b104dd62f77d84dc&itemId=65010708b104dd62f77d8579&workflow=preview
@Ballen what about each service as a toggle switch? It's 25 fields and you are currently at 41/60 so you'd have to consolidate some. But then you can add everything and style it based on whether the toggle is true or false.
would that work/
I thought about that but thought it'd be really complex and long but that might be the only solution.
@Ballen you could also probably do it with 2 multireference fields and then use CMS combine attribute by finsweet.
I haven't heard about the CMS combine attribute but will check it out. Thanks!
@Ballen here's how I would do it: https://webflow.grsm.io/cloneable-is-bae?sub1=dynamic-attributes-custom-state-cms
Custom State Styling on CMS Fields with Dynamic Attributes
Custom State Styling on CMS Fields with Dynamic Attributes - Webflow
Let's have a look at how to use dynamic attributes to apply custom state variables to CMS fields, which we can them style with CSS targeting these attributes!
Thanks for the awesome challenge! I did a Patreon video about it too!
https://www.patreon.com/posts/custom-state-on-89330135?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link
Wow! That's awesome! Thanks so much!
This site build is full of challenges for someone doing their first website build and first Webflow project, so I may have a lot more challenges for you. 😬
Happy to help :). I have a few Patrons embarking on their first Webflow client builds at the moment so welcome to the club. Turns our web development is HARD haha
Just watched it and it's a brilliant solution! Can't wait to implement it! I come from a print design background so web development is a huge thing that I've challenged myself to learn this year. So far to go. 😩 But I love it so it makes it fun.
@Web Bae I've started trying to implement this approach, but am running into issues with all of the other custom fields in the Works Collection. Is there a way to do your approach as a Strategy Collection that's brought into the Works Colleciton or do I need to have all of these services lists directly inside the Works fields, which would exceed my 60 field limit? I may not be thinking about this correctly.
I think you could extract to a Strategy Collection and use a single ref field in your works collection. Strategy collection would have a separate CMS item for each work item and you just pull that in that way. I’m not sure if it would be available as a custom attribute in the same way I’d have to prototype it to be sure.
I'm not sure I understand what you're recommending but I'll try to figure it out. This is a confusing one for me!
I finally figured out how to do this natively with the CMS structure I originally had, using conditional visibility on all services.
Here's a video on how I set it up:
Here's a video on how I set it up:
nice 👏 job 🤝
that's a great solution
thank you for sharing your work too.
Thanks! You definitely got me pointed in the right direction. Appreciate it!