Magento 2

Master Radios Field in Magento 2 system.xml: A Step-by-Step Guide

In Magento 2, the system.xml file is a configuration file that allows developers to create system configuration fields. One of these field types is radios, which allows the admin to select one option from multiple choices.

Introduction

Radios Field Type

Step 1: Define the Radios Field in Magento 2 system.xml

First, we need to define our radios field in Magento 2 system.xml file. This file is typically located in the etc/adminhtml directory of your module.

PHP
<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
	<system>
		<tab id="magefusions" translate="label" sortOrder="100">
			<label>magefusions</label>
		</tab>
		<section id="field_type_demo" sortOrder="10" showInWebsite="1" showInStore="1" showInDefault="1" translate="label">
			<label>Field Type Demo</label>
			<tab>magefusions</tab>
            <resource>MageFusions_FieldTypeDemo::config_magefusions_fieldtypedemo</resource>
            <group id="demo" sortOrder="10" showInWebsite="1" showInStore="1" showInDefault="1" translate="label">
				<label>Demo</label>        
                <field id="example_radios" translate="label" type="radios" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1" >
                    <label>Example Radios</label>
                    <source_model>MageFusions\FieldTypeDemo\Model\Config\Source\ExampleRadios</source_model>
                </field>
            </group>
        </section>
    </system>
</config>

In this example, example_radios is the ID of the field, and MageFusions\FieldTypeDemo\Model\Config\Source\ExampleRadios is the source model that provides the options for the radio buttons.

Note : It’s necessary to include the line <resources> if you have the magento version 2.4.6 . This line sets the Access Control List (ACL) for the configuration section, allowing only users with the appropriate permissions to view and modify this section in the Magento admin panel. The system.xml file is typically located in the etc/adminhtml directory of your module. Remember to define this ACL resource in your module’s acl.xml file as well.

Step 2: Create the Source Model

Next, we need to create the source model that will provide the options for our radios field. We will use Magento\Framework\Data\OptionSourceInterface instead of Magento\Framework\Option\ArrayInterface, Because the Magento\Framework\Option\ArrayInterface was marked as deprecated in Magento 2.3. The recommended replacement is Magento\Framework\Data\OptionSourceInterface1. This change was made because the ArrayInterface was not flexible enough for some use cases, and the OptionSourceInterface provides a more flexible and robust solution

Create a new file at MageFusions\FieldTypeDemo\Model\Config\Source\ExampleRadios.php and add the following code:

PHP
<?php
namespace MageFusions\FieldTypeDemo\Model\Config\Source;

use  Magento\Framework\Data\OptionSourceInterface;

class ExampleRadios implements OptionSourceInterface
{
    /**
     * Get options
     *
     * @return array
     */
    public function toOptionArray()
    {
        return [
            ['value' => 'option1', 'label' => __('Option 1')],
            ['value' => 'option2', 'label' => __('Option 2')],
            ['value' => 'option3', 'label' => __('Option 3')]
        ];
    }
}

In this example, toOptionArray method returns an array of options for the radio buttons. Each option is an array with value and label keys.

Conclusion

In this blog, we learned how to create a radios field in Magento 2 system.xml file, which allows the admin to select one option from multiple choices. We also learned how to create a source model that provides the options for the radio buttons, and how to use the Magento\Framework\Data\OptionSourceInterface instead of the deprecated Magento\Framework\Option\ArrayInterface. By following these steps, we can master radio fields in our Magento 2 system.xml file and create more flexible and robust system configuration fields.

Magento 2 Developer Documentation on system.xml:

https://experienceleague.adobe.com/docs/commerce-operations/configuration-guide/files/config-reference-systemxml.html

If you’re eager to learn about every field type in Magento 2 system.xml, don’t miss out on our comprehensive blog post here.

Magento 2 Field Types In System.xml

I hope this blog post has been helpful. If you have any questions, please feel free to leave a comment below.

Leave a Reply

Your email address will not be published. Required fields are marked *