Problem in multiple dependecy

#1

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

#2

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

#3

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

closed #4