Magento 2 System Configuration Field Types

Declare ACL For The Config In Our Extension

Directory

app/code/VendorName/ExtensionName/etc/acl.xml

Content for this file

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
    <acl>
        <resources>
            <resource id="Magento_Backend::admin">
                <resource id="Magento_Backend::stores">
                    <resource id="Magento_Backend::stores_settings">
                        <resource id="Magento_Config::config">
                            <resource id="VendorName_ExtensionName::config" title="Extension config example" sortOrder="50" />
                        </resource>
                    </resource>
                </resource>
            </resource>
        </resources>
    </acl>
</config>

Add Our Extension Config File

Directory

app/code/VendorName/ExtensionName/etc/adminhtml/system.xml

Content for this file

<?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="example_tab" translate="label" sortOrder="1000">
            <label>Example tab config</label>
        </tab>
        <section id="example_section" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Example config section</label>
            <tab>example_tab</tab>
            <resource>VendorName_ExtensionName::config</resource>
            <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>General</label>
                <field id="dropdown_example" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dropdown with custom source model example</label>
                    <source_model>VendorName\ExtensionName\Model\Config\Source\Custom</source_model>
                </field>
                <field id="text_example" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Text example</label>
                </field>
                <field id="logo" translate="label" type="image" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Image example (with a comment)</label>
                    <backend_model>Magento\Config\Model\Config\Backend\Image</backend_model>
                    <upload_dir config="system/filesystem/media" scope_info="1">logo</upload_dir>
                    <base_url type="media" scope_info="1">logo</base_url>
                    <comment><![CDATA[Allowed file types: jpeg, gif, png.]]></comment>
                </field>
                <field id="depends_example" translate="label" type="text" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Dependant text field example with validation</label>
                    <depends>
                        <field id="*/*/dropdown_example">1</field>
                    </depends>
                    <validate>validate-no-empty</validate>
                </field>
                <field id="textarea_example" translate="label" type="textarea" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Textarea example</label>
                </field>
            </group>
        </section>
    </system>
</config>

Add Custom Config Tab “Example tab config” And One Group Of Config Fields Within

In the system.xml file, we declare our tab:

<tab id="example_tab" translate="label" sortOrder="1000">
    <label>Example tab config</label>
</tab>

There is only a single group of fields (<group id=”general”>) and acl relation (“” tag) that belongs to tab (with “” tag) in the config section.

<section id="example_section" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
    <label>Example config section</label>
    <tab>example_tab</tab>
    <resource>VendorName_ExtensionName::config</resource>
    <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
        <label>General</label>
        ......................
    </group>
</section>

First Example Config

A dropdown with a custom source model is our first field:

<field id="dropdown_example" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
    <label>Dropdown with custom source model example</label>
    <source_model>VendorName\ExtensionName\Model\Config\Source\Custom</source_model>
</field>

Source Model Directory

app/code/VendorName/ExtensionName/Model/Config/Source/Custom.php

Content for this file

<?php

namespace VendorName\ExtensionName\Model\Config\Source;

class Custom implements \Magento\Framework\Option\ArrayInterface
{
    /**
     * @return array
     */
    public function toOptionArray()
    {

        return [
            ['value' => 0, 'label' => __('Zero')],
            ['value' => 1, 'label' => __('One')],
            ['value' => 2, 'label' => __('Two')],
        ];
    }
}

Second Example Config

A simple text field is an example in the config section.

<field id="text_example" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
    <label>Text example</label>
</field>

Third Example Config

An image file upload field:

<field id="logo" translate="label" type="image" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
    <label>Image example (with a comment)</label>
    <backend_model>Magento\Config\Model\Config\Backend\Image</backend_model>
    <upload_dir config="system/filesystem/media" scope_info="1">logo</upload_dir>
    <base_url type="media" scope_info="1">logo</base_url>
    <comment><![CDATA[Allowed file types: jpeg, gif, png.]]></comment>
</field>

Fourth Example Config

<field id="depends_example" translate="label" type="text" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
    <label>Dependant text field example with validation</label>
    <depends>
        <field id="*/*/dropdown_example">1</field>
    </depends>
    <validate>validate-no-empty</validate>
</field>

Fifth Example Config

A simple textarea:

<field id="textarea_example" translate="label" type="textarea" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
    <label>Textarea example</label>
</field>

If you are looking for Magento Developers, visit Magento Development Agency.