For quite some time now, the utilization of conditional fields in Joomla was primarily a task for developers involved in form creation. However, with the advent of Joomla 4.3, there is now the capability to display custom fields conditionally, enhancing the user experience. We’ll explain how it works first, and after that, we’ll show you how you can use conditional fields in your Joomla content.

But what exactly are these conditional fields?

Within the core framework of Joomla, conditional fields are those that rely on the state or values of other fields.

When a field is “dependent”, it will only be available for editing and displayed if the state of the field it depends from matches the right condition.

A practical example to see how this works would be navigating to the global configuration of a Joomla instance and activating the cache settings.

When cache settings are turned off:

When cache settings are turned on, additional options are available to the user.

How does this function technically?

A field attribute called ‘showon’ is used to provide ‘visibility’ information.

In our example, the form is built as follows:

<field
        name="caching"
        type="list"
        label="COM_CONFIG_FIELD_CACHE_LABEL"
        default="2"
        filter="integer"
        validate="options"
        >
        <option value="0">COM_CONFIG_FIELD_VALUE_CACHE_OFF</option>
        <option value="1">COM_CONFIG_FIELD_VALUE_CACHE_CONSERVATIVE</option>
        <option value="2">COM_CONFIG_FIELD_VALUE_CACHE_PROGRESSIVE</option>
</field>

<field
        name="cache_handler"
        type="cachehandler"
        label="COM_CONFIG_FIELD_CACHE_HANDLER_LABEL"
        default=""
        filter="word"
        showon="caching:1,2"
/>

With ‘showon’, we are telling Joomla to show the cache_handler field IF AND ONLY IF the caching field has a value of 1 or 2.

There are quite a few possible configurations:

foo:1[AND]bar:3,4

The field will show if foo has value 1 AND bar has value 3 or 4.

foo:1[OR]bar:3,4

The field will show if foo has value 1 OR bar has value 3 or 4.

foo!:1

The field will show if foo has any value but 1.

foo!: 

The field will show if foo has any value but an empty one.

You can find more information about the syntax of the ‘showon’ attribute at https://docs.joomla.org/Form_field#Showon.

While this functionality works effectively, it’s crucial to understand that this enhancement has been implemented at the user interface level. Despite some fields being hidden, previously set values or default field values are still recorded upon saving the form.

Usually, this is not a big deal. Developers can process the values and properly evaluate them. In our previous example, for instance, when the Joomla cache is set to off, the code won't take into account the hidden values of the cache settings, even though they have been set.

If you are wondering why you should care about this attribute, it's because it gives you more control and flexibility over custom fields. Since Joomla 4.3, you can use this attribute to specify how your custom fields are displayed. This is useful for creating more user-friendly and consistent forms.

When creating a custom field, navigate to the ‘Options’ tab to discover the ‘showon attribute’ parameter.

Let’s see how we can take advantage of this parameter in a practical example.

Create a custom field of type ‘List’ for articles. This field lists different types of vehicle (car, truck or bicycle).

Now, create a new field of type ‘Text’, that will record a registration number, only necessary for cars or trucks.

The 'Options' tab:

In the ‘showon attribute’ field, enter the name ‘type’, then enumerate the values car and truck, which are the values ‘Type’ must have to render the field ‘Registration number’ visible.

As a result, during article edition, the fields will follow the conditions that have been set.

When ‘Car’ is selected, it is possible to enter a registration number.

What about fields of a subform?

While it’s not necessarily more complex, it does require a bit of careful attention. This is because when the sub-fields are recorded, they lose their original names and are instead referenced by their IDs.

Let’s add the previously created fields to a subform called ‘Vehicles’.

The field ‘Type’ has ID 5. We need to modify the conditional value’s first part from ‘type’ to ‘field5’ (we use the keyword ‘field’ concatenated with the ID of the field).

This results in a form where we can add vehicles to the article, with or without registration number, following the rules that have been set.

Remember that the values entered in the fields are still stored, even if they are not visible on the form due to a condition. This can affect how you design the forms and how the data is used later.

To avoid confusion and prevent errors, do not make a field required if it can be hidden by a condition. Otherwise, the user might not be able to save the form because of a missing value in a hidden field.