How to Configure Magento 2 Custom System

Magento 2 allows you to extend the system configuration using modules. This will allow you to integrate the configuration of your module into the Magento 2 system menu.

Adding such custom settings is done using the app/code/Vendor/Module/etc/adminhtml/system.xml 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="custom_tab" translate="label" sortOrder="100">
           <label>Custom Tab</label>
       </tab>
       <section id="custom_section" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
           <label>Custom Config Section</label>
           <tab>custom_tab</tab>
           <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
               <label>General</label>
<field id="yesno_dropdown" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Custom Yes/No Dropdown</label>
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
               </field>
               <field id="custom_dropdown" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                   <label>Dropdown with custom source model example</label>
                   <source_model>Vendor\Module\Model\Config\Source\Custom</source_model>
               </field>
               <field id="custom_text" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                   <label>Custom Text</label>
               </field>
               <field id="logo" translate="label" type="image" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
                   <label>Custom Image</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="*/*/custom_dropdown">1</field>
                   </depends>
                   <validate>validate-no-empty</validate>
               </field>
               <field id="custom_textarea" translate="label" type="textarea" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
                   <label>Custom Textarea</label>
               </field>

              <field id="custom_secret" type="obscure" translate="label" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1">
                   <label>Custom Secret Field</label>
                   <backend_model>Magento\Config\Model\Config\Backend\Encrypted</backend_model>
               </field>
           </group>
       </section>
   </system>
</config>

<?xml version="1.0"?>

<label>Custom Tab</label>

</tab>

<label>Custom Config Section</label>

<tab>custom_tab</tab>

<label>General</label>

<label>Custom Yes/No Dropdown</label>

<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>

</field>

<label>Dropdown with custom source model example</label>

<source_model>Vendor\Module\Model\Config\Source\Custom</source_model>

</field>

<label>Custom Text</label>

</field>

<label>Custom Image</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>

</field>

<label>Dependant text field example with validation</label>

</depends>

<validate>validate-no-empty</validate>

</field>

<label>Custom Textarea</label>

</field>

<label>Custom Secret Field</label>

<backend_model>Magento\Config\Model\Config\Backend\Encrypted</backend_model>

</field>

</group>

</section>

</system>

</config>

And now in parts:

  <tab id="custom_tab" translate="label" sortOrder="100">
           <label>Custom Tab</label>
       </tab>

<label>Custom Tab</label>

</tab>

This xml code allows you to add a new tab to the settings menu of Magento 2.

   <section id="custom_section" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
           <label>Custom Config Section</label>
           <tab>custom_tab</tab>

...
       </section>

<label>Custom Config Section</label>

<tab>custom_tab</tab>

...

</section>

This code adds a new section and assigns it to the custom_tab tab. Here can be used any tab from existing ones.

The parameters showInDefault = “1”, showInWebsite = “1” and showInStore = “1” indicate the scope in which our section will be visible.

This code adds a new section and assigns it to the custom_tab tab. Any tab from existing ones can be used here.

The parameters showInDefault = “1”, showInWebsite = “1” and showInStore = “1” indicate the scope in which our section will be visible.

Elements

Simple Text Field

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

<label>Custom Text</label>

</field>

Yes/No Dropdown

Partner With Us Let's discuss how to grow your business. Get a Free Quote.

Talk to Andrey

<field id="yesno_dropdown" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Custom Yes/No Dropdown</label>
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
               </field>

<label>Custom Yes/No Dropdown</label>

<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>

</field>

Dropdown With The Custom Source model

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

<label>Dropdown with custom source model example</label>

<source_model>Vendor\Module\Model\Config\Source\Custom</source_model>

</field>

And our custom model can look like this: app/code/Vendor/Module/Model/Config/Source/Custom.php

<?php
namespace Vendor\Model\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')],
       ];
   }
}

<?php

namespace Vendor\Model\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')],

];

}

File Upload

   <field id="logo" translate="label" type="image" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
                   <label>Custom Image</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>
Dependent 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="*/*/yesno_dropdown">1</field>
                   </depends>
                   <validate>validate-no-empty</validate>
               </field>

<label>Custom Image</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>

</field>

Dependent Field

<label>Dependant text field example with validation</label>

</depends>

<validate>validate-no-empty</validate>

</field>

<validate>validate-no-empty</validate> checks to ensure that the field is not empty when saving the configuration.

Depends tag allows you to show this field only when yesno_dropdown is set to “Yes”.

Textarea

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

<label>Custom Textarea</label>

</field>

Secret Field

   <field id="custom_secret" type="obscure" translate="label" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1">
                   <label>Custom Secret Field</label>
                <backend_model>Magento\Config\Model\Config\Backend\Encrypted</backend_model>
               </field>

<label>Custom Secret Field</label>

<backend_model>Magento\Config\Model\Config\Backend\Encrypted</backend_model>

</field>

type=”obscure” hides the field value from the frontend, but in this case, the data will still be stored as plain text.

Setting Magento\Config\Model\Config\Backend\Encrypted as a backend model allows you to encrypt the data in the database.

Most of the source models are located in app/code/Magento/Config/Model/Config/Source and backend models are located in app/code/Magento/Config/Model/Config/Backend.

Setting Default Value

To set the default value for any of our custom settings, you need to create the app/code/Vendor/Module/etc/config.xml file

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
   <default>
       <custom_section>
           <general>
               <yesno_dropdown>1</enable>
               <custom_text>Test Value</display_text>
           </general>
       </helloworld>
   </default>
</config>

<?xml version="1.0"?>

<custom_section>

<yesno_dropdown>1</enable>

<custom_text>Test Value</display_text>

</general>

</helloworld>

</default>

</config>

Getting Values

We will use Helper Class to get the values from our configuration: app/code/Vendor/Module/Helper/Data.php

<?php
namespace Vendor\Module\Helper;
use Magento\Framework\App\Helper\AbstractHelper;
use Magento\Store\Model\ScopeInterface;
class Data extends AbstractHelper
{
public function getConfigValue($field)
{
return $this->scopeConfig->getValue(
$field, \Magento\Store\Model\ScopeInterface::SCOPE_STORE
                       );
}
}

<?php

namespace Vendor\Module\Helper;

use Magento\Framework\App\Helper\AbstractHelper;

use Magento\Store\Model\ScopeInterface;

class Data extends AbstractHelper

{

public function getConfigValue($field)

{

return $this->scopeConfig->getValue(

$field, \Magento\Store\Model\ScopeInterface::SCOPE_STORE

);

}

This method receives a string representing the path to the required option in the form of section/group/field. That means that to get the value of custom_text field, we need to pass the string custom_section/general/custom_text.

Need a ready-made and quality Magento solution? Visit BelVG store and find the one you needed.