Conditionally show/hide field based on input selection

[george]

Hey Ed, thanks for reaching out here. I can help you with this.

Expression engine feature request

We are hoping to do an update to our hidden feature at some point. This will allow for better expressions like:

video: 
    type: textarea
    # Not supported yet and may look once implemented
    hidden: media_format != "video"

We refer to this internally as the expression engine project. Ella mentioned this in another post about the Documentation redesign:

@Ella

In the two examples you give, values: data.listings.filtering[*] is a JSONPath selector while hidden: '!enable_banner' is an expression.

• hidden key reference here
• values key reference here

The hidden key for Inputs accepts both boolean and string values. This key is an example of our early implementation of CloudCannon’s expression engine, and we’ll probably update it in the future.

Alternative solution

The expression engine is still a while away, In the meantime I suggest changing your code slightly to use optional objects. For this we can use structures on an object input.

This is what I recommend for your data structure in a video example:

title:
text:
media: 
  _type: video
  video: 

And here is the image example:

title:
text:
media: 
  _type: image
  image: 

The input config would look like this:

_inputs:
  title: 
    type: text
  text: 
    type: markdown
  media:
    type: object
    options:
      structures:
        values:
          - label: Image
            icon: image
            value:
              _type: image
              image:
          - label: Video Embed
            icon: movie
            value:
              _type: video
              video:
            _inputs:
              video:
                type: code
                options:
                  syntax: html

If you use a different key from _type in your structure be sure to checkout the id_key option in the structures reference.

Selector preview:

This gives you an interface where the editor can choose which type of media they want to add. Once they choose they get the controls specific to that option which can be configured further.

Image input preview:

Video Input preview:

I assumed that the editor was pasting html code into the video textarea. As an added bonus I changed this to a code editor with html syntax highlighting.

The last thing left is to change how you read from this structure. Instead of checking media_format you check if media is set and then what media._type is set to.

Hope this helps, I will keep you posted on updates to the expression engine feature request.