How to create Magento2 system configuration with different fields?

Magento System configuration is a simple way to store single values required for application functionality. You have developed a Magento extension with multiple functionality. Now the extension is installed and excuting as well. Let us consider a scenerio you want to enable some of available functionality instead of all then what ? How do you configure that ? Here system configuration comes into picture. If you have added a setting for each funcionality than it work like a charm. In this article, we are going to explain how to create a Magento2 system configuration with the different type of fields, validation, resources etc. In Magento2 the global architecture of system configuration is changed but the vision is the same. Add global configuration by website store(group) or store view and use inside your code for enable disable or other choices.

How to add Magento2 system configuration file

So lets start with the Magento2 system configuration file structure. Create a file app/code/Companyname/Modulename/etc/adminhtml/system.xml

Lets us discuss some basic of Magento2 system configuration

Tab: The first thing we need to add a custom “Tab” to the System Configuration. Tabs are left navigation in admin section Stores -> Configuration. The default tabs are General, Catalog, Customers, Sales, Services, and Advanced.

Section: Each Tab has a number of sections. For example, the Advanced tab has (by default) an Admin, System, Advanced, and Developer section. If a Tab is configured with no sections, it won’t show up.

Group: Groups are used to group together different configuration options, and are displayed in the Magento admin with a pop-open widget. For example, in a stock install the Advanced section has a single group named “Disable modules output”.

Fields: Finally, we need individual configuration fields. Which is used for taking input data for our Magento2 system configuraion.

Lets create a new tab “Ipragmatech Extension”. Inside system.xml file code should be following.

<?xml version="1.0" encoding="UTF-8"?>

<config xmlns_xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi_noNamespaceSchemaLocation="../../../Config/etc/system_file.xsd">
   <system>
      <tab id="pricenegotiator" translate="label" sortOrder="10">
         <label>Ipragmatech Extension</label>
      </tab>
   </system>
</config>

Now lets create a section within this tab

<section id="pricenegotiatorsection" translate="label" type="text"
   sortOrder="140" showInDefault="1" showInWebsite="1" showInStore="1">
   <label>Price Negotiator</label>
   <tab>pricenegotiator</tab>
   <resource>Ipragmatech_Pricenegotiator::config_pricenegotiator</resource>
</section>

We have done through tab and section now lets create a group in which we add individuals fields

<group id="general" translate="label" type="text" sortOrder="1"
   showInDefault="1" showInWebsite="1" showInStore="1">
   <label>General</label>
   <field id="active" translate="label" type="select" sortOrder="1"
      showInDefault="1" showInWebsite="1" showInStore="1">
      <label>Enabled</label>
      <source_model>MagentoConfigModelConfigSourceYesno</source_model>
   </field>
</group>

In the above code block I have shown the field, tags are self describing,type is select and we have added boolean option yes/no, which is defined in source tag. Here we are using magento in-built resource type. Customer resource will explained later.Till now we have gone through the basic building block now the next part is what are the different fields, how we add validation and how to add field dependency etc. Next field is a simple text field with validation

<field id="admin_no_reply" translate="label" type="text"
   sortOrder="12" showInDefault="1" showInWebsite="1" showInStore="1">
   <label>Admin No-response</label>
   <validate>validate-greater-than-zero required-entry</validate>
   <comment> <![CDATA[Query expire after admin not replied. (in hours)!]]></comment>
</field>

In the above code, we use two more thing validation and comment. Validation can be used under validation tag. One or more validation can be used with separated with single space. Comment can be used at the end with above-mentioned syntax.

Now if you want to create a field with type ‘select’ and want to add your custom resource. for example

<field id="new_product_qty" translate="label" type="select"
   sortOrder="12" showInDefault="1" showInWebsite="1" showInStore="1">
   <label>New Product Qty</label>
   <source_model>IpragmatechBannerblockModelConfigSourceMaxqty</source_model>
   <comment> <![CDATA[No of new product display.]]></comment>
</field>

For this, you have to define a custom resource. Create a directory structre as CompanynameModulenameModelConfigSource and add a file named Maxqty.php.

<?php
namespace CompanynameModulenameModelConfigSource;

use MagentoFrameworkOptionArrayInterface;

class Maxqty implements ArrayInterface
{

    /*
     * Option getter
     * @return array
     */
    public function toOptionArray()
    {
        $arr = $this->toArray();
        $ret = [];
        foreach ($arr as $key => $value) {
            $ret[] = [
                'value' => $key,
                'label' => $value
            ];
        }
        return $ret;
    }

    /*
     * Get options in "key-value" format
     * @return array
     */
    public function toArray()
    {
        $maxvalList = [
            '1' => 1,
            '2' => 2,
            '3' => 3,
            '4' => 4,
            '5' => 5
        ];
        return $maxvalList;
    }
}

add the above code in that file. And one more thing is field dependency. Suppose you have a configuration field ‘Admin notify’ if you select yes then there is another field just below it will appear and ask for custom Email-id. If you select no then the field should be disappeared. let see the example:

<group id="negotiator_notification" translate="label" type="text"
   delault="1" sortOrder="3" showInDefault="1" showInWebsite="1"
   showInStore="1">
   <label>Notification</label>
   <field id="admin_notify" translate="label" type="select"
      sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
      <label>Admin Notificatin</label>
      <source_model>MagentoConfigModelConfigSourceYesno</source_model>
   </field>
   <field id="admin_email" translate="label" type="text"
      sortOrder="12" showInDefault="1" showInWebsite="1" showInStore="1">
      <depends>
         <field id="admin_notify">1</field>
      </depends>
      <label>Admin Email</label>
      <validate>validate-email required-entry</validate>
   </field>
</group>

Here under the <depend></depend> tag, we have specified the parent field in which this fields is depended on.

Conclusion.

System Configuration is powerful parts of the Magento eCommerce System for the store admin. It should be user-friendly so that non-technical user can configure properly. As a developer, it will allow you to quickly and easily setup forms elements that allow your end-users to configure their Magento System and your custom modules. Hope this                article will help to create a proper Magento2 system configuration for your module. Feel free to comment  if there is any technical issue.

References

Magento
Alan Storm

Leave a Comment

Scroll to Top