How to Hide or Show Custom attribute based on other custom attribute in Product detail/edit page from Adminpanel Magento 2.4.x?

Question

I have created the Product's custom attributes programmatically(Setup->Installdata.php).

 $eavSetup->addAttribute(
            \Magento\Catalog\Model\Product::ENTITY,
            'serial_code_use_customer',
            [
                'type' => 'int',
                'backend' => '',
                'frontend' => '',
                'label' => 'Issue By Customer Group',
                'input' => 'boolean',
                'class' => '',
                'source' => \Magento\Eav\Model\Entity\Attribute\Source\Boolean::class,
                'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
                'visible' => true,
                'required' => false,
                'user_defined' => true,
                'default' => '0',
                'searchable' => false,
                'filterable' => false,
                'comparable' => false,
                'visible_on_front' => false,
                'used_in_product_listing' => false,
                'unique' => false,
                'apply_to' => 'simple,configurable,virtual,bundle,downloadable',
                'group' => self::GROUP_LABEL,
                'sort_order' => 3,
                'note' => 'Enable automatic issuing of codes based on customer group.'
            ]
        );

        $eavSetup->addAttribute(
            \Magento\Catalog\Model\Product::ENTITY,
            'serial_code_customer_groups',
            [
                'type' => 'varchar',
                'backend' => '',
                'frontend' => '',
                'label' => 'Select Customer Groups',
                'input' => 'multiselect',
                'class' => '',
                'source' => \Magento\Customer\Model\Customer\Attribute\Source\Group::class,
                'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
                'visible' => true,
                'required' => false,
                'user_defined' => true,
                'default' => '0',
                'searchable' => false,
                'filterable' => false,
                'comparable' => false,
                'visible_on_front' => false,
                'used_in_product_listing' => false,
                'unique' => false,
                'apply_to' => 'simple,configurable,virtual,bundle,downloadable',
                'group' => self::GROUP_LABEL,
                'sort_order' => 4,
                'note' => 'Customers in selected groups will be issued codes automatically when product is ordered.'
            ]
        );

I want to Hide or Show a Custom attribute based on other custom attributes in the Product detail/edit page from Adminpanel Magento 2.4.x?

For example, there is a toggle on click (yes/no) the Customer Groups will be Hide / Show.

Answer 1

Just add this code in product_form.xml file

<?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_fieldset">
        <settings>
            <collapsible>true</collapsible>
            <label translate="true">Custom Fields</label>
        </settings>
        <field name="serial_code_use_customer" component="Magento_Ui/js/form/element/single-checkbox" formElement="checkbox">
            <settings>
                <dataType>boolean</dataType>
                <dataScope>serial_code_use_customer</dataScope>
                <label translate="true">Serial Code Use Customer</label>
                <switcherConfig>
                    <rules>
                        <rule name="0">
                            <value>0</value>
                            <actions>
                                <action name="0">
                                    <target>product_form.product_form.custom_fieldset.serial_code_customer_groups</target>
                                    <callback>hide</callback>
                                </action>
                            </actions>
                        </rule>
                        <rule name="1">
                            <value>1</value>
                            <actions>
                                <action name="0">
                                    <target>product_form.product_form.custom_fieldset.serial_code_customer_groups</target>
                                    <callback>show</callback>
                                </action>
                            </actions>
                        </rule>
                    </rules>
                    <enabled>true</enabled>
                </switcherConfig>
            </settings>
            <formElements>
                <checkbox>
                    <settings>
                        <valueMap>
                            <map name="false" xsi:type="string">0</map>
                            <map name="true" xsi:type="string">1</map>
                        </valueMap>
                        <prefer>toggle</prefer>
                    </settings>
                </checkbox>
            </formElements>
        </field>
        <field name="serial_code_customer_groups">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">Magento\Customer\Model\Customer\Attribute\Source\Group</item>
                <item name="config" xsi:type="array">
                    <item name="required" xsi:type="boolean">true</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">false</item>
                    </item>
                    <item name="visible" xsi:type="boolean">false</item>
                    <item name="sortOrder" xsi:type="number">333</item>
                    <item name="dataType" xsi:type="string">string</item>
                    <item name="formElement" xsi:type="string">multiselect</item>
                    <item name="label" translate="true" xsi:type="string">Serial Code Customer Groups</item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>