Show / Hide Fields Dynamically base on Select Dropdown

Hi,

Our growing slices have a number of select fields.

It's becoming challenging to continue to add fields to slices and not knowing which fields relate to selected options because there is no option to show / hide fields.

UI / UX is becoming cluttered.

I saw there was a feature request about dynamic content fields and what was given as a temporary solution was Slice Machine tabs. This solution is not sufficient in the long run.

Is there a feature for developer to modify the UI base on selected options in select field dropdown?

Thank you.

2 Likes

Hello @charlotte.lopez, yes, in Slice Machine, this is solved using Variations, not tabs. They allow you to choose between different versions of the same Slice. Check out the documentation here:

For the moment, Slice Machine doesn't officially support Gatsby. Although you could get it working if you're interested: How to use Slice Machine with Gatsby today. Please keep in mind that this isn't yet considered an alpha version of the integration, but it can help you get it working with a bit more configuration if you are willing to add it to your project as a test.

I hope this is helpful.

1 Like

Thanks for reply and link @Pau, much appreciated.

Is there a feature request to be able to dynamically modify fields or only show fields related to select option?

Hey @charlotte.lopez, we're always happy to help out.
For the moment, this is only possible with Slice Machine.

I know, I know. I love necro-raising old ideas.

Variations help but I'd like to offer a scenario to @guy.proops and @Phil

I find myself data modeling a promo grid

Variations make sense for how many columns that grid will take up. We'll skip any sort of masonry setup for now but it would play into this if I didn't.

Each card has three options for it's layout. Under most circumstances this would be uniform... but not all.

Easy peasy so far, right?

But here's where we run into issues:

  • Image Card: requires an image, potentially a custom alt tag override or a caption
  • Video card: requires a video link or media file, a cover photo, auto preview boolean, and potentially other features

Current scenario:
Either include all fields (not great UX) on every card or explode my variant options (1-up, image / 2-up, image / 3-up, image. 1-up / video / 2-up, video / 3-up, video / continue for text variants). The variant explosion still has the problem of how to handle mixed card types. The amount of dev to support all of these scenarios is unappealing, especially in an age of copilots that will tend to introduce an element of chaos differentiation into extremely similar processes unless they're handled in an extremely tight way.

Ideal scenario

  • Variants for grid types (static, masonry, etc) with column counts as a dropdown
  • Conditional form fields depending on the dropdown type (image, video, text), though this would require a bit of handling when swapping a type
  • Better yet, solve it by sub-nesting the "promo card" type and its options within the group. This is essentially how ACF would handle it in WordPress.

As far as flexible building goes, without conditional fields, none of this is terribly appealing. It forces me to think about just how on-rails I want my content modeling to be instead of how my agency's work can gracefully handle changing needs over time.

Hi @ian6 thanks a lot for this detailed message.

This is a level of flexibility that we have added to Slices with slice variations but still you are not the first user to require this granularity at a group or field level. I can't say that this is our top priority right now as the team is focused on enhancing the modeling options for most of the cases that involve nested fields, but this is definitely something that we would like to improve at some point.