Set conditional visibility in components based on CMS field state

Within unlinked components we can set conditional visibility based on whether a specific CMS field "is set." With components we only have conditional visibility based on "toggle" fields. I'd like to set an icon button to appear only if a specific link "is set" and hide if not set.

  • Patrick Foley
  • Nov 29 2023
  • Simon Smallchua commented
    25 Jan 01:16am

    This has become even more important with shared component libraries and component slots.
    And after hours of trying, building components for this page in a shared library we've come to realise this.

    Intention
    1. Make a component with slot to use on a collection page

    2. Put small component into a component slot

    3. Want to hide/show small component based on CMS logic ... can't...

    Tried

    Create local component with collection filters inside it - drag into component slot - no dice, doesn't work. Was pretty sure it wouldn't but tried anyway.

    Solution
    Recreate the section locally, Nest a little component inside a div and use CMS visibility on that.

    Meaning about 10 components we wanted to use in this section we were using are unusable.

    That means we now have branching of logic and components that need to be specifically maintained in multiple places both with styles and components. Ugh.

  • Lukas Graf commented
    9 Dec, 2024 08:53pm

    Yeah I don't understand why there is a difference between conditional visibility and visibility and user access in the first place ... Please allow us to add conditional visibility as a component prop! (or enhance the "visibility and user access" thing to support conditional visibility)

  • Stof Hofer commented
    30 Sep, 2024 01:36pm

    And here I need to come back again. Why is this even inconsistent to begin with? Please unlock the potential power of components.

  • Sanavita AG commented
    13 Aug, 2024 02:19pm

    And it doesn't work for dropdowns as well, unfortunately.

  • Sanavita AG commented
    13 Aug, 2024 02:16pm

    And the worst thing is, you can't even invert a toggle!

    For example: If I want an element to be HIDDEN instead of visible, when a toggle is set to true – not possible. Really annoying because it seems like such a small thing. Now I have to make to switches in the cms collection which makes the UX worse for the end user.

  • Sanavita AG commented
    13 Aug, 2024 02:12pm

    YES! Why not bring the power of conditional visibility over to the component properties??!

    It's literally so simple: make the same settings for conditional visibility available at "normal visibility" for components.

  • Giuseppe Legrottaglie commented
    22 May, 2024 05:29pm

    This is very crucial. For example, I have a 'New' tag that appears on the blog post card for up to 15 days from the publication date, but I can't use components because the conditional visibility is locked for toggles.

  • Jon Way commented
    10 Feb, 2024 03:55pm

    I'm fairly amazed this hasn't shipped– it seems like it would be low effort and high return. With a site that has a lot of CMS content and uses collection lists with a large amount of conditional visibilities to display it, not having this is really curtailing the actual power of using components.

    An easy example is with product tiles. I can't use components if I want to have something like a 'new' tag for recent products published in the last 14 days. There's a lot more use cases, but something as simple as that is preventing me from using components in a meaningful way and I still have to update every instance of product tiles.

  • Stof Hofer commented
    17 Dec, 2023 03:46pm

    I would love to see this