Adding a Custom Field to the Product Form

Oct 13, 2025 by thesweetdesigns.com 121 views

Introduction

Magento 2 provides a robust UI component system that allows developers to create custom forms and interfaces for their e-commerce applications. One of the UI components available in Magento 2 is the ui-select dropdown, which provides a convenient way to select options from a list. However, in some cases, you may want to prevent certain nodes from being selected or clicked in the dropdown. In this article, we will explore how to achieve this in a Magento 2 UI component dropdown.

Understanding the ui-select Dropdown

The ui-select dropdown is a UI component that allows users to select one or more options from a list. It is commonly used in forms to provide a dropdown list of options for the user to choose from. The dropdown list is typically populated from a data source, such as a database or a JSON file.

Adding a Custom Field to the Product Form

To add a custom field to the product form in Magento 2, you need to create a custom module and add a new field to the product-form.xml file. Here is an example of how to add a custom field to the product form:

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="custom_field">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string">Custom Field</item>
                <item name="visible" xsi:type="boolean">true</item>
                <item name="sortOrder" xsi:type="number">10</item>
            </item>
        </argument>
        <field name="custom_field" formElement="select">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">custom_field_options</item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

In this example, we added a new fieldset named custom_field to the product form. The fieldset contains a single field named custom_field that is a select field. The select field is populated from a data source named custom_field_options.

Preventing Node Selection in the Dropdown

To prevent certain nodes from being selected or clicked in the dropdown, you need to modify the ui-select dropdown component to exclude the nodes you want to prevent from being selected. You can do this by adding a new attribute to the ui-select component that specifies the nodes to exclude.

Here is an example of how to add a new attribute to the ui-select component to exclude nodes:

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="custom_field">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string">Custom Field</item>
                <item name="visible" xsi:type="boolean">true</item>
                <item name="sortOrder" xsi:type="number">10</item>
            </item>
        </argument>
        <field name="custom_field" formElement="select">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">custom_field_options</item>
                    <item name="exclude_nodes" xsi:type="array">
                        <item name="node1" xsi:type="string">node1_value</item>
                        <item name="node2" xsi:type="string">node2_value</item>
                    </item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

In this example, we added a new attribute named exclude_nodes to the ui-select component. The exclude_nodes attribute specifies the nodes to exclude from the dropdown list. In this example, we excluded two nodes named node1 and node2 with values node1_value and node2_value, respectively.

Creating a Custom UI Component

To create a custom UI component that prevents node selection in the dropdown, you need to create a new PHP class that extends the Magento\Ui\Component\Form\Field class. Here is an example of how to create a custom UI component:

namespace Vendor\Module\Ui\Component\Form\Field;
use Magento\Ui\Component\Form\Field;
class CustomField extends Field
{
public function getExcludeNodes()
{
return $this->getData('exclude_nodes');
}
public function getOptions()
{
    $options = parent::getOptions();
    $excludeNodes = $this-&gt;getExcludeNodes();
    if ($excludeNodes) {
        $options = array_filter($options, function ($option) use ($excludeNodes) {
            return !in_array($option[&#39;value&#39;], $excludeNodes);
        });
    }
    return $options;
}

}

In this example, we created a custom UI component named CustomField that extends the Magento\Ui\Component\Form\Field class. The getExcludeNodes method returns the excluded nodes specified in the exclude_nodes attribute. The getOptions method filters the options to exclude the nodes specified in the exclude_nodes attribute.

Conclusion

In this article, we explored how to prevent node selection in a Magento 2 UI component dropdown. We added a custom field to the product form and modified the ui-select dropdown component to exclude nodes from being selected. We also created a custom UI component that prevents node selection in the dropdown. By following the steps outlined in this article, you can create a custom UI component that meets your specific requirements.

Additional Resources

Magento 2 UI Component Documentation: https://devdocs.magento.com/guides/v2.3/ui-components/
Magento 2 UI Component Tutorial: https://www.mageplaza.com/magento-2-tutorial/magento-2-ui-components.html
Magento 2 UI Component Example: https://github.com/magento/magento2/blob/2.3/app/code/Magento/Ui/Component/Form/Field/Select.php

Q: What is the Magento 2 UI Component system?

A: The Magento 2 UI Component system is a robust and flexible system that allows developers to create custom forms and interfaces for their e-commerce applications. It provides a wide range of UI components, including dropdowns, text fields, and buttons, that can be easily customized and extended.

Q: How do I add a custom field to the product form in Magento 2?

A: To add a custom field to the product form in Magento 2, you need to create a custom module and add a new field to the product-form.xml file. You can use the following code as a starting point:

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="custom_field">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string">Custom Field</item>
                <item name="visible" xsi:type="boolean">true</item>
                <item name="sortOrder" xsi:type="number">10</item>
            </item>
        </argument>
        <field name="custom_field" formElement="select">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">custom_field_options</item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

Q: How do I prevent node selection in the dropdown?

A: To prevent node selection in the dropdown, you need to modify the ui-select dropdown component to exclude the nodes you want to prevent from being selected. You can do this by adding a new attribute to the ui-select component that specifies the nodes to exclude.

Here is an example of how to add a new attribute to the ui-select component to exclude nodes:

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="custom_field">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string">Custom Field</item>
                <item name="visible" xsi:type="boolean">true</item>
                <item name="sortOrder" xsi:type="number">10</item>
            </item>
        </argument>
        <field name="custom_field" formElement="select">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">custom_field_options</item>
                    <item name="exclude_nodes" xsi:type="array">
                        <item name="node1" xsi:type="string">node1_value</item>
                        <item name="node2" xsi:type="string">node2_value</item>
                    </item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

Q: How do I create a custom UI component that prevents node selection in the dropdown?

A: To create a custom UI component that prevents node selection in the dropdown, you need to create a new PHP class that extends the Magento\Ui\Component\Form\Field class. Here is an example of how to create a custom UI component:

namespace Vendor\Module\Ui\Component\Form\Field;
use Magento\Ui\Component\Form\Field;
class CustomField extends Field
{
public function getExcludeNodes()
{
return $this->getData('exclude_nodes');
}
public function getOptions()
{
    $options = parent::getOptions();
    $excludeNodes = $this-&gt;getExcludeNodes();
    if ($excludeNodes) {
        $options = array_filter($options, function ($option) use ($excludeNodes) {
            return !in_array($option[&#39;value&#39;], $excludeNodes);
        });
    }
    return $options;
}

}

Q: What are some additional resources for learning more about Magento 2 UI Components?

A: Here are some additional resources for learning more about Magento 2 UI Components:

Magento 2 UI Component Documentation: https://devdocs.magento.com/guides/v2.3/ui-components/
Magento 2 UI Component Tutorial: https://www.mageplaza.com/magento-2-tutorial/magento-2-ui-components.html
Magento 2 UI Component Example: https://github.com/magento/magento2/blob/2.3/app/code/Magento/Ui/Component/Form/Field/Select.php

Note: The code examples provided in this article are for demonstration purposes only and may not be suitable for production use. You should modify the code to meet your specific requirements and test it thoroughly before deploying it to production.