Are you enjoying the extensions? Did you like the support? Help others decide

Leave a review

12Sep2020
Information
Print

Coding for Joomla 4: radio and list form fields

Information
First published September 12, 2020
219 hits -
 

The administrator console user interface has been greatly improved in Joomla! 4. Focus has been made on accessibility and mobile-first experience.
While moving my own extensions to Joomla 4, I dug into the differences in the look and feel of radio buttons and list fields to ensure they would have a cohesive look throughout.

The radio field

The is probably the most obvious change. When it comes to skinning radio buttons in Joomla 3, the code would be:

<field name="protocol" type="radio" default="0" class="btn-group" label="..." description="...">
    <option value="0">JNO</option>
    <option value="1">JYES</option>
</field>
The Joomla 3 radio button
The Joomla 3 radio button

Adding the class btn-group-yesno would alter the output slightly:

The Joomla 3 yes/no radio button
The Joomla 3 radio yes/no button

Joomla 4 relies more on layouts (which allow all sorts of overrides) and introduced the switcher layout, which can only be used when radio buttons portray 2 states (yes/no, show/hide...).

<field name="protocol" type="radio" default="0" layout="joomla.form.field.radio.switcher" label="..." description="...">
    <option value="0">JNO</option>
    <option value="1">JYES</option>
</field>
The Joomla 4 radio button
The Joomla 4 switch button

The list field

The list field is used when the number of elements to choose from is bigger than 2. Although Joomla 3 allows the use of radio buttons for more than 2 elements, Joomla 4 restricts that number to 2 when using the switcher layout (but nothing prevents you to keep the standard html look).

Single selection

When using a list for a single selection, the field is skinned by default by the template. It is possible, however, to skin elements individually, if they have such values as 0, 1, 2...

In Joomla 3, to skin such a list, you would write:

<field name="show_errors" type="list" class="chzn-color-state" useglobal="true" label="..." description="...">
    <option value="0">JNO</option>
    <option value="1">JYES</option>
</field>
A Joomla 3 state list
A Joomla 3 state list

The skinning relies on the Chosen script, used throughout Joomla 3's interface (Chosen is a javascript library used to beautify list fields).

In Joomla 4, it is just a matter of replacing the Joomla 3 class with custom-select-color-state to obtain:

A Joomla 4 state list
A Joomla 4 state list

Multiple selection

A good example of a multiple select field is the category field. In Joomla 3, you would code the field like this:

<field name="catid" type="category" extension="com_content" multiple="true" size="5" default="all" label="..." description="...">
    <option value="all">JOPTION_ALL_CATEGORIES</option>
</field>
The Joomla 3 category field
The Joomla 3 category field

In Joomla 4, adding the list-fancy-select layout will skin the field properly:

<field name="catid" type="category" extension="com_content" multiple="true" size="5" layout="joomla.form.field.list-fancy-select" default="all" label="..." description="...">
    <option value="all">JOPTION_ALL_CATEGORIES</option>
</field>
The Joomla 4 category field
The Joomla 4 category field

Without the layout, you will get the standard html multiple list.

Custom selection

Some lists may require special attention. For instance, the modulelayout field (which is a list of all layouts available for a module), does not require any special 'treatment' in Joomla 3. Under Joomla 4, however, the field will not look quite right without adding the custom-select class.

The Joomla 4 modulelayout field
The Joomla 4 modulelayout field

In conclusion

These are the most significant differences I came across and changes may still be possible before the actual Joomla 4 release. Form fields have received a much needed 'refresh' and hopefully more developers will follow and use the Joomla 4 standard fields that are available. It is important that the overall user experience remains consistant throughout the interface.