Conditional fields

#Overview

Conditional visibility shows Hygraph's commitment to increasing the productivity of editors and developers who are dealing with complex content.

As deeply nested content structures can sometimes challenge editors, conditional visibility allows to show selected fields only when editors truly need them.

#What you can do

You can use the conditional visibility option on the configuration of certain fields to make them visible or hidden in the content editor.

The main use case for conditional fields is to simplify the content form when a model contains complex nested menu structures, where each item may serve as a link or as another layer of dropdowns.

#Conditional visibility

You will find the Conditional visibility option in your field configuration, in the Advanced tab.

Conditional visibility inside field details

When you select the checkbox, more options display:

Conditional visibility options

The dropdown will allow you to select a Boolean or an Enumeration field from the same model, which will be used to set the condition.

Condition setting differs depending on which field type you select from the dropdown. The following sections explain how to set conditions using each type.

#Boolean field

Conditional visibility - Boolean

If you select a boolean field from the Conditional visibility dropdown you will have the option to select is or is not in the following dropdown, and then true or false in the last one.

Let's look into an example of how this works. Imagine we have a schema for a bookshop, with a model for Author and a model for Product (books). In the Author model, we have a boolean field called In stock, followed by a reference field that allows adding related books.

The reference field has conditional visibility settings that use the In stock boolean and are set to In stock is true. This means that the reference field to add books will only display in the content editor if you set the In stock boolean to true.

Here's a video showing you how we set this up:

Similarly, you could have a component that displays information about when a book will be in stock and use the same In stock boolean to set the condition to In stock is false. In this case, if your book is not in stock and so you set the boolean to false, the component will display on the content form for your editors to add information about when the product will be available.

#Enumeration field

Conditional visibility - Enumeration

If you select an enumeration field from the Conditional visibility dropdown you will have the option to select one of the following conditions in combination with one of the enumeration values:

Let's look into an example of how this works. Imagine we have a schema for a bookshop, with a model for Author and a model for Product (books). In the Author model, we have an enumeration field called Offers containing 3 values (Location 1, Location 2, Location 3), followed by a reference field that allows adding related books that are on sale.

The reference field has conditional visibility settings that use the Offers enumeration and are set to Offers is Location 2. This means that the reference field to add books on sale will only display in the content editor if you use the Offers dropdown to select the Location 2 value.

Here's a video showing you how we set this up:

#Edit the base field

If you edit the base field - boolean or enumeration - by changing the selected condition on the content form, you will not lose the content stored in the conditional fields.

This applies when you change any of the visibility conditions from TRUE to FALSE or null (by clearing the boolean field in the content form).

#Nested structures example

The conditional visibility functionality is especially useful for simplifying content forms by only showing sections when the configured conditions are met.

Check out the following video to see how conditional visibility does this with nested components:

#Querying hidden fields

You can query the values of hidden fields, as conditional visibility only affects the ability to see a field in the UI.

You can add content to a conditional field, save it, and then edit the base field so the condition is no longer met and the field becomes hidden. You will still be able to query the content of that field through the API.

#Troubleshooting

Is your Conditional visibility checkbox grayed out? This can help: