Magento – magento 2 add field system config

magento2system-configsystem.xml

I am new in Magento 2. I want to add text field in Store > Configuration which store HTML code.

This HTML code will display in Frontend.

eg. I want to add note for custom shipping method this note field contain HTML code with proper HTML tag. This note is display after Shipping method in frontend.
If I add <h3> Hello </h3> than it display proper code with effect of HTML tag. Not Display like <h3> Hello </h3> in frontend.

Following system.xml

        <group id="flatrate1" translate="label" type="text" sortOrder="0" showInDefault="1" showInWebsite="1" showInStore="1">
              <label>Flat Rate 1</label>
              <field id="active" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="0">
                  <label>Flat Rate 1</label>
                  <source_model>Namespace\Config\Model\Config\Source\Enabledisable</source_model>
              </field>
              <field id="name" translate="label" type="text" sortOrder="2" showInDefault="1" showInWebsite="1" showInStore="1">
                  <label>Method Name</label>
                  <depends><field id="active">1</field></depends>
              </field>
              <field id="title" translate="label" type="text" sortOrder="3" showInDefault="1" showInWebsite="1" showInStore="1">
                  <label>Title</label>
                  <depends><field id="active">1</field></depends>
              </field>
              <field id="type" translate="label" type="select" sortOrder="4" showInDefault="1" showInWebsite="1" showInStore="0">
                  <label>Type</label>
                  <source_model>Namespace\Multiflatrate\Model\Config\Source\Method</source_model>
                  <depends><field id="active">1</field></depends>
              </field>
              <field id="price" translate="label" type="text" sortOrder="5" showInDefault="1" showInWebsite="1" showInStore="0">
                  <label>Price</label>
                  <validate>validate-number validate-zero-or-greater</validate>
                  <depends><field id="active">1</field></depends>
              </field>
              <field id="handling_type" translate="label" type="select" sortOrder="6" showInDefault="1" showInWebsite="1" showInStore="0">
                  <label>Calculate Handling Fee</label>
                  <source_model>Namespace\Multiflatrate\Model\Config\Source\HandlingType</source_model>
                  <depends><field id="active">1</field></depends>
              </field>
              <field id="handling_fee" translate="label" type="text" sortOrder="7" showInDefault="1" showInWebsite="1" showInStore="0">
                  <label>Handling Fee</label>
                  <validate>validate-number validate-zero-or-greater</validate>
                  <depends><field id="active">1</field></depends>
              </field>
              <field id="sallowspecific" translate="label" type="select" sortOrder="8" showInDefault="1" showInWebsite="1" showInStore="0">
                  <label>Ship to Applicable Countries</label>
                  <frontend_class>shipping-applicable-country</frontend_class>
                  <source_model>Magento\Shipping\Model\Config\Source\Allspecificcountries</source_model>
                  <depends><field id="active">1</field></depends>
              </field>
              <field id="specificcountry" translate="label" type="multiselect" sortOrder="9" showInDefault="1" showInWebsite="1" showInStore="0">
                  <label>Ship to Specific Countries</label>
                  <source_model>Magento\Directory\Model\Config\Source\Country</source_model>
                  <can_be_empty>1</can_be_empty>
                  <depends><field id="active">1</field></depends>
              </field>
              <field id="showmethod" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="0">
                  <label>Show Method if Not Applicable</label>
                  <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                  <depends><field id="active">1</field></depends>
              </field>
              <field id="specificerrmsg" translate="label" type="textarea" sortOrder="11" showInDefault="1" showInWebsite="1" showInStore="1">
                  <label>Displayed Error Message</label>
                  <depends><field id="active">1</field></depends>
              </field>
              <field id="max_amount" translate="label" type="text" sortOrder="13" showInDefault="1" showInWebsite="1" showInStore="0">
                  <label>Maximum Order Amount For Free Shipping</label>
                  <validate>validate-number validate-zero-or-greater</validate>
                  <depends><field id="active">1</field></depends>
              </field>
              <field id="min_amount" translate="label" type="text" sortOrder="14" showInDefault="1" showInWebsite="1" showInStore="0">
                  <label>Minimum Order Amount For Free Shipping</label>
                  <validate>validate-number validate-zero-or-greater</validate>
                  <depends><field id="active">1</field></depends>
              </field>
              <field id="sort_order" translate="label" type="HTML" sortOrder="100" showInDefault="15" showInWebsite="1" showInStore="0">
                  <label>Sort Order</label>
                  <depends><field id="active">1</field></depends>
              </field>

              <field id="display_text" translate="label" type="text" sortOrder="101" showInDefault="1" showInWebsite="0" showInStore="0">
                  <label>Display Text</label>
                  <comment>This text will display on the frontend.</comment>
              </field>

          </group>

Best Answer

Just add this code :

 <field id="shipnote" translate="label" type="text" sortOrder="3" showInDefault="1" showInWebsite="1" showInStore="1">
                  <label>Ship note</label>
                  <comment>This text will display on the frontend.</comment>
</field>

After this code:

   <field id="title" translate="label" type="text" sortOrder="3" showInDefault="1" showInWebsite="1" showInStore="1">
                  <label>Title</label>
                  <depends><field id="active">1</field></depends>
              </field>

For get the config text use below code or click on this link.

$this->scopeConfig->getValue('section_id/group_id/field_id', \Magento\Store\Model\ScopeInterface::SCOPE_STORE);

For more detail see here and Here

Related Solutions

Magento 2 – Add Custom Product Attribute Validation from Install Script

One of the solution is to add a backend model to your attribute which is used to format / validate your attribute value before save and/or after load.

Add a backend class :

[
    'type' => 'int',
    'backend' => '\Foo\Bar\Model\Attribute\Backend\YourAttribute',
    'frontend' => '',
    'label' => 'XXXX',
    'input' => 'text',
    'frontend_class' => 'validate-greater-than-zero',
    'source' => '',
    'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_GLOBAL,
    'visible' => true,
    'required' => true,
    'user_defined' => false,
    'default' => 0,
    'searchable' => false,
    'filterable' => true,
    'comparable' => false,
    'visible_on_front' => false,
    'used_in_product_listing' => true,
    'unique' => false
]

Here is an example of your custom class \Foo\Bar\Model\Attribute\Backend\YourAttribute

<?php

namespace Foo\Bar\Model\Attribute\Backend;

/**
 * Class YourAttribute
 */
class YourAttribute extends \Magento\Eav\Model\Entity\Attribute\Backend\AbstractBackend
{

    /**
     * @var int $minimumValueLength
     */
    protected $minimumValueLength = 0;

    /**
     * @param \Magento\Framework\DataObject $object
     *
     * @return $this
     */
    public function afterLoad($object)
    {
        // your after load logic

        return parent::afterLoad($object);
    }

    /**
     * @param \Magento\Framework\DataObject $object
     *
     * @return $this
     */
    public function beforeSave($object)
    {
        $this->validateLength($object);

        return parent::beforeSave($object);
    }

    /**
     * Validate length
     *
     * @param \Magento\Framework\DataObject $object
     *
     * @return bool
     * @throws \Magento\Framework\Exception\LocalizedException
     */
    public function validateLength($object)
    {
        /** @var string $attributeCode */
        $attributeCode = $this->getAttribute()->getAttributeCode();
        /** @var int $value */
        $value = (int)$object->getData($attributeCode);
        /** @var int $minimumValueLength */
        $minimumValueLength = $this->getMinimumValueLength();

        if ($this->getAttribute()->getIsRequired() && $value <= $minimumValueLength) {
            throw new \Magento\Framework\Exception\LocalizedException(
                __('The value of attribute "%1" must be greater than %2', $attributeCode, $minimumValueLength)
            );
        }

        return true;
    }

    /**
     * Get minimum attribute value length
     * 
     * @return int
     */
    public function getMinimumValueLength()
    {
        return $this->minimumValueLength;
    }
}

If you want a simple example of that kind of class you can check

\Magento\Customer\Model\Customer\Attribute\Backend\Website
all the classes which extend \Magento\Eav\Model\Entity\Attribute\Backend\AbstractBackend
the classes into backend_model column in eav_attribute table

EDIT
If you want a class that do nearly the same thing as you want you can take a look at the SKU attribute validation \Magento\Catalog\Model\Product\Attribute\Backend\Sku
I also added the method in the example class

EDIT
Another solution (maybe not the best one) is to create a plugin on the function \Magento\Eav\Helper\Data::getFrontendClasses and add your frontend class here that can be validated in front.

Magento 2 – Add New Field to Magento_User Admin Form

For adding image field, you can try using plugin and always try to avoid overwrite whole class.

Vendor/Module/etc/adminhtml/di.xml


<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\User\Block\User\Edit\Tab\Main">
        <plugin name="sr_stackexchange_user_form" type="Vendor\Module\Plugin\Block\Adminhtml\User\Edit\Tab\Main" sortOrder="1"/>
    </type>
</config>

Vendor/Module/Plugin/Block/Adminhtml/User/Edit/Tab/Main.php


namespace Vendor\Module\Plugin\Block\Adminhtml\User\Edit\Tab;

class Main
{
    /**
     * Get form HTML
     *
     * @return string
     */
    public function aroundGetFormHtml(
        \Magento\User\Block\User\Edit\Tab\Main $subject,
        \Closure $proceed
    )
    {
        $form = $subject->getForm();
        if (is_object($form)) {
            $fieldset = $form->addFieldset('admin_user_image', ['legend' => __('User Image')]);
            $fieldset->addField(
                'user_image',
                'image',
                [
                    'name' => 'user_image',
                    'label' => __('Image'),
                    'id' => 'user_image',
                    'title' => __('Image'),
                    'required' => false,
                    'note' => 'Allow image type: jpg, jpeg, png'
                ]
            );

            $subject->setForm($form);
        }

        return $proceed();
    }
}

Clear cache.

Best Answer

Related Solutions

Magento 2 – Add Custom Product Attribute Validation from Install Script

Magento 2 – Add New Field to Magento_User Admin Form

Related Topic