Problem in multiple dependecy

Hi,

I am trying to build a module Using your Toggle field in ‘SELECT’ custom field. I am using Beaver Builder Lite version as base plugin.

According to my requirement, I need Three level dependency. Using Toggle field in ‘SELECT’ custom field I can only give One level dependency.

Is there any other way to give Multi-level dependency?

In simple Terms:-
Select-1,
Select-2 depends on Select-1,
Select-3 depends on Select-2

Now when I Toggle off Select-1 then Select-2 should get hidden and also Select-3 as it dependent on select-2. According to my requirement Select-3 will be only visible when Select-2 is Visible.

Looking forward to hear from you.

Regards,
PC

Hey Pratik,

I’ve moved your post to the Custom Modules section. I’ve also assigned another member of the team to assist you with your inquiry. :slight_smile:

Ben

Hey Pratik,

We do have some logic that can make that happen, but it’s really tricky so we haven’t documented it. Preferably, I’d like to come up with a better solution. For now, you can do the following…

'select1'       => array(
	'type'          => 'select',
	'label'         => __('Select 1', 'fl-builder'),
	'default'       => 'no',
	'options'       => array(
		'yes'           => __('Yes', 'fl-builder'),
		'no'            => __('No', 'fl-builder')
	),
	'toggle'        => array(
		'yes'           => array(
			'fields'        => array('select2')
		)
	),
	'hide'          => array(
		'no'            => array(
			'fields'        => array('select3')
		)
	),
	'trigger'       => array(
		'yes'           => array(
			'fields'        => array('select2')
		)
	)
),
'select2'       => array(
	'type'          => 'select',
	'label'         => __('Select 2', 'fl-builder'),
	'default'       => 'no',
	'options'       => array(
		'yes'           => __('Yes', 'fl-builder'),
		'no'            => __('No', 'fl-builder')
	),
	'toggle'        => array(
		'yes'           => array(
			'fields'        => array('select3')
		)
	)
),
'select3'       => array(
	'type'          => 'select',
	'label'         => __('Select 3', 'fl-builder'),
	'default'       => 'no',
	'options'       => array(
		'yes'           => __('Yes', 'fl-builder'),
		'no'            => __('No', 'fl-builder')
	)
),

Here’s how that works…

  • Select 1 will show Select 2 using the toggle params if the value of 1 is set to yes.

  • Select 1 will hide Select 3 using the hide params if the value of 1 is set to no.

  • Select 1 will trigger the change event of Select 2 using the trigger params if the value of 1 is set to yes.

  • Select 2 will show Select 3 using the toggle params if the value of 2 is set to yes.

As you can see it gets a bit complicated, especially with multiple options/toggles. What we’ve been doing for cases like this instead is writing custom toggle logic in our module’s settings.js file. You can find an example of that in modules/content-slider/js/settings.js.

Let me know if you have any questions.

Justin