Dinamic conditions on ElementField

[dan-leech]

It seems I do something wrong or I have wrong condition path.
How to make different fields to be shown depend on select(request) value?

get schema() {
        return {
            cms_action: {
                type: 'object',
                label: 'CMS Action',
                schema: {
                    request: {
                        type: 'select',
                        label: 'CMS Action',
                        items: {
                            // actions
                            'action1': 'Action1',
                            'action2': 'Action2',
                        },
                    },
                    // Action1
                    action1: {
                        type: 'object',
                        label: 'Action1 Data',
                        schema: {
                            name: this._sourceElement('Name source'),
                            type: this._sourceElement('Type source'),
                            email: this._sourceElement('Email source'),
                        },
                        conditions: {
                            request: {
                                value: 'action1',
                            }
                        }
                    }
                }
            }
        }
    }

[adamberecz]

Reading this might give you a better idea how conditions can be defined.

In this case:

    get schema() {
        return {
            cms_action: {
                type: 'object',
                label: 'CMS Action',
                schema: {
                    request: {
                        type: 'select',
                        label: 'CMS Action',
                        items: {
                            // actions
                            'action1': 'Action1',
                            'action2': 'Action2',
                        },
                    },
                    // Action1
                    action1: {
                        type: 'object',
                        label: 'Action1 Data',
                        schema: {
                            name: this._sourceElement('Name source'),
                            type: this._sourceElement('Type source'),
                            email: this._sourceElement('Email source'),
                        },
                        conditions: [
                            ['cms_action.request', 'action1']
                        ]
                    }
                }
            }
        }
    }

[dan-leech]

@adamberecz thank you for your answer, but this doesn't work as I expect.
Condition work now and it hides the section, but when I switch actions on the select field nothing changes.

Is any way how could I debug the path 'cms_action.request' for the field in Vueform builder, that it's correct?
My build config is:

actionButton: {
                ...elementTypes.submit,
                label: 'Action button',
                description: 'Action button to call backend API with source data',
                icon: '/assets/images/bolt-icon.svg',
                category: 'static',
                schema: {
                    type: 'button',
                    buttonLabel: 'Action',
                    submit: false,
                    resets: false,
                },
                sections: {
                    ...elementTypes.submit.sections,
                    options: {
                        ...elementTypes.submit.sections.options,
                        fields: {
                            buttonLabel: {type: ButtonLabelField},
                            buttonType: {type: ButtonTypeField},
                            cms_action: {type: CmsActionField},
                        },
                    },
                },
                separators: {
                    ...elementTypes.submit.separators,
                    options: [
                        [
                            "buttonLabel"
                        ],
                        [
                            "buttonType"
                        ],
                    ],
                }
            },

[adamberecz]

If you are using it for as a configuration field the condition path should include the section as well.

So this should do the trick:

   get schema() {
        return {
            cms_action: {
                type: 'object',
                label: 'CMS Action',
                schema: {
                    request: {
                        type: 'select',
                        label: 'CMS Action',
                        items: {
                            // actions
                            'action1': 'Action1',
                            'action2': 'Action2',
                        },
                    },
                    // Action1
                    action1: {
                        type: 'object',
                        label: 'Action1 Data',
                        schema: {
                            name: this._sourceElement('Name source'),
                            type: this._sourceElement('Type source'),
                            email: this._sourceElement('Email source'),
                        },
                        conditions: [
                            ['options.cms_action.request', 'action1']
                        ]
                    }
                }
            }
        }
    }

If there's a possibility you want to reuse it in the future in a different section you might make it dynamic:

conditions: [
  [`${this.section}.cms_action.request`, 'action1']
]