How to add Custom Catalog Input Type Using Observer In Magento 2

Considering the available CMS’s available for eCommerce, Magento has still remained as the first pick for store owner whether it is small or large scale. Due to its flexible architecture, it allows us to customize the Magento according to our Business needs by extending the Native code. Magento owns different observers generally known as “listener”, that helps you to detect specific events and in response to that execute specific action using code. Compared to Magento 1, Magento 2 have the pretty well-integrated observer system.
Magento Custom Development is our favorite part where we used to create and play with code. Recently, we came across such a requirement where the customer wants to add his own Input type in Magento 2 backend. After working on the client’s requirement for some time, finally, we were ready with our code for adding Custom Catalog Input Type Using Observer In Magento 2.

In the first step, we need to create “events.xml” file at this path.
app\code\Vendor\Extension\etc\adminhtml\events.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="adminhtml_product_attribute_types">
        <observer name="attribute.type" instance="Vendor\Extension\Observer\AddAttributeType" />
    </event>
</config>

Now, in second step, we need to add custom option type using “Config.xml” file at below path.
app\code\Vendor\Extension\etc\config.xml

<?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>
        <general>
            <validator_data>
                <input_types>
                    <custom>custom</custom>
                </input_types>
            </validator_data>
        </general>
    </default>
</config>

In this third and last step, we need to create one more file to add our option to input type dropdown. For that purpose, we need to create “AddCustomAttributeType.php” file at this path.
app\code\Vendor\Extension\Observer\AddCustomAttributeType.php

<?php
namespace Vendor\Extension\Observer;
use Magento\Framework\Event\ObserverInterface;
class AddAttributeType implements ObserverInterface
{
    
    public function execute(\Magento\Framework\Event\Observer $observer)
    {
        
        try {
            $response = $observer->getEvent()->getResponse();
            $types = $response->getTypes();
            $types[] = [
                'value' => 'custom',
                'label' => __('Custom_Attribute')
            ];
            $response->setTypes($types);
            return $this;
        } catch(\Exception $e) {
              echo $e->getMessage();
        }
    }
}

That’s it. Simply clear cache and you are done with adding custom input type.
Let us know if you are facing an issue while implementing this code by commenting below.
Happy Coding!