How to get the change event of a field

[UmerCheema-WPD]

I have added a custom field toggle, and now I want to show the second custom field color based on the toggle being on or off. How can I do that?

    window.vendor.wp.hooks.addFilter('divi.moduleLibrary.moduleMapping', 'divi', modules => {
        const path = ['divi/contact-form', 'metadata', 'attributes'];
        const {set, get, has} = window.lodash;
        const target = get(modules, path) ? get(modules, path) : set(modules, path, {});
        const doesPathExist = has(modules, path);
        if (doesPathExist) {

            target.customFields = {
                type: 'object',
                settings: {
                    innerContent: {
                        groupType: 'group-items',
                        items: {
                            customToggle: {
                                groupSlug: 'newOptionGroup',
                                attrName: 'customToggle',
                                label: 'Custom Field Custom Toggle',
                                description: 'This is a test description',
                                features: {
                                    hover: false,
                                    sticky: false,
                                    responsive: false,
                                    preset: 'content',
                                },
                                render: true,
                                priority: 0,
                                component: {
                                    type: 'field',
                                    name: 'divi/toggle',
                                },
                            },
                            customColorPicker: {
                                groupSlug: 'newOptionGroup',
                                attrName: 'customColorPicker',
                                label: 'Custom Field Color',
                                description: 'This is a test description',
                                render: true,
                                priority: 0,
                                component: {
                                    type: 'field',
                                    name: 'divi/color-picker',
                                },
                            },
                            customIconPicker: {
                                groupSlug: 'newOptionGroup',
                                attrName: 'customIconPicker',
                                label: 'Custom Field Icon Picker',
                                description: 'This is a test description',
                                render: true,
                                priority: 0,
                                component: {
                                    type: 'field',
                                    name: 'divi/icon-picker',
                                },
                            },
                        },
                    },
                },
            };
        }
        return modules;
    });

[ayubadiputra]

@UmerCheema-WPD Sorry for the late response.

Actually, you can use visible property with callback function in your field definition.

Based on your code example, it looks like this:

customColorPicker: {
  groupSlug: 'newOptionsGroup',
  attrName: 'customColorPicker',
  label: 'Custom Field Color',
  description: 'This is a test description',
  render: true,
  priority: 0,
  component: {
    type: 'field',
    name: 'divi/color-picker',
  },
  visible: ({
    attrs,
    attrName,
    responsiveMode,
    stateMode,
  }) => {
    return 'on' === attrs?.customToggle?.desktop?.value;
  },
},

Please check video to see how it works.

https://github.com/user-attachments/assets/6c4979ba-4043-48a4-ab0b-d8e65d305c6b

[ayubadiputra]

We also added new tutorial series called Adding Custom Module Settings Via Hook where you can learn how to add custom options group and option field via hook. With this additional documentation update, I'm going to close this issue. Feel free to open new one if you have other questions/requests. Thanks!