Wish I could get a simple webform conditional (Country/State) to work in Drupal 6.
Drupal 7 Conditional Fields Module
The Drupal 7 Conditional Fields module makes it easy to build dynamic and complex forms with Drupal 7 Fields. Any Drupal entity that has fields can pretty much be built into a dynamic and conditional form. The Conditional Fields module essentially lets you set conditions for how specific fields act based on another dependent field on the form. The simplest example is that this module can hide or show a field based on the value of another field. If you are still confused at what this module can do, watch the video to find out more!
In this episode you will learn:
- The basic Drupal conditional fields terminology
- How to hide and show Drupal fields based on the values of other form fields
- How to get the module to work with nested field conditions
Thanks to Drupalize.me for sponsoring this episode!
Hello everyone and welcome to another Daily Dose of Drupal, today we’re on Episode Number 104. Today we’re going to be going over the Conditional Fields Module and this is a really cool module that allows you to display or hide various fields based on the values of other fields.
You can do a whole bunch more with it but that’s in essence the basic board it is, we’ll go over it and go a quick example and show you how you can begin using it on your Drupal websites but before we get started I’m Shane Thomas, you can follow me on Twitter @smthomas3, also head over to codekarate.com and sign up for the newsletter and if you haven’t checked out today’s sponsor already please check out drupalize.me and use the coupon code CK20FEB for 2% off anything at drupalize.me.
Drupalize.me is one of the best ways to learn about Drupal, it has very informative Drupal videos from basic concepts all the way to some of the most advance Drupal concepts you’ll need when building your Drupal websites. So go ahead and take a look at them and tell them thanks for sponsoring the Daily Dose of Drupal so we can make these videos happen.
Let’s go ahead and get started; I have the conditional Fields Module already installed on my Drupal website as you can see here. The great thing about the Conditional Fields Module is it’s set up to work with pretty much any entity that you can imagine so it works with comments, nodes, in this case I have the Fields Collection Module Installed, private message, taxonomy term, users, anything that has fields it pretty much works with.
It’s only in a dev state so keep that in mind, it’s not necessarily 100% ironed out so make sure you test thoroughly before using it. It’s not recommended yet to use on production sites but you’ll have to go ahead and try it out for yourself and make that decision. Before we get started on configuring this because there are a lot of configuration options and I’m not going to be able to go through all of them. I’m going to show you the simple content type that I’ve created.
I just call it Test, there’s a couple of different fields in it and it’s all about just favorite foods. So I’ll go ahead and just actually add a test piece of content. It asked for a title, asked for my favorite foods but I want these fields not to necessarily all display so for instance if I select Fruits here I want this field; what are your favorite fruits to show up then I’ll use checkboxes if this other checkboxes checked. I want this other fruit text box text to show up.
I only want this favorite vegetable which is just an image upload field for an example if this vegetable selection is selected otherwise I don’t want to see it and same with this other food text area only if other is selected here. So basically when I get to this form I want to see a title field and these favorite foods and depending on what I select here I want to display other fields dynamically. Like I said this is only one example, you can do a whole bunch with this.
This is an extremely flexible module but once you see the example here hopefully you can figure out different ways that you can use it on your sites. So go ahead and get started and in this overview page it has a basically all the different options that are up here. Because it’s a little bit long I’m going to go ahead and click on just Node which is just going to show this everything in this section.
As you can see a lot of the sections are empty and basically that’s because there aren’t at least two fields so you have to have at least two fields because one field has to be dependent on the other field. Click on node here just to simplify the interface a little bit and I’m going to scroll down to me test content type. The first thing is to add a new dependency and the dependency is always going to be dependent on something else which is the dependee.
So the first one that I’m going to do is I’m going to select … I’ll start at the bottom actually. I want this favorite fruits or I’ll go ahead and say I want other food … so that’s at the bottom, that’s a text area and it’s going to be dependent on this favorite foods filled. And just so we can take a look I’m going to open up the manage fields option so we can take a look.
This other food text area I want dependent on this favorite foods so you can look on the machine names and the labels. And I want the dependent field to be visible when the dependee so that dependent field, this other food to be visible when the dependee has a specific value which is correct so I’m going to ahead and click add and this is just another … this page just rehashes some of what we went over so it’s going to be based on the value and it’s going to be values inserted from the widget and the favorite food we’re going to select is other.
So if others select it we’re going to display that text field, interaction with other dependencies so when this dependent has more than one how should this condition be evaluated? So you can go ahead and use that if it needs to interact with other dependencies. We want it to be visible but you could make it visible, invisible field with a value, disabled, check, there’s a whole bunch of options. It’s not just show and hide.
Show and hide is probably the most common use case but it’s not the only one so you have a bunch of different options of things you can do, different stage you can apply that form field. You can show and hide, fade in, fade out, slide up, slide down. I’m going to go ahead and select slide up, slide down for this first one, you can select the speed.
There’s a couple of other options here; you can activate per user role settings, you can hide the dependent if dependee is not in the form so for some reason I don’t have permission to see this favorite foods box you can force this one to be hidden which is a good real thumb but you can of course control it here and reset the dependent to its default values when the form is submitted if the dependency is not triggered.
So essentially if you want to make sure the value gets reset when the form is submitted if for some reason dependency is no longer triggered you can go ahead and set that. Advance; I’m not going to go over that and there’s a couple of other options here just with the view context settings and I’m not going to go all those but you can read through those and try those out.
So we’re going to go ahead and give this one a quick try. So essentially I should see all this field except for this last one. If I select other you’ll notice that other field or other food field slides down. If I pick something else it no longer slides down anymore and it just works.
Let’s go ahead and quickly browse to see these other ones to get it working in the way that we wanted to. We want this favorite … what are your favorite fruits field as dependency on favorite foods as well. Dependents is going to be visible when the dependee, this favorite foods field again has the value, in this case of fruit, I’m going to leave everything else.
This one I’ll just leave show/hide as an example, leave all the other options the same, click save and I will add one for vegetables as well. So we want favorite vegetables, dependee is the favorite foods, the same thing it’s going to be visible when it has the value of in this case vegetables, leave all the rest the same, save it and we’ll go ahead and create another one.
Now you can see it’s getting a little closer, has select fruits, I only see the fruit, select vegetables I only see the vegetables, I select other the other field slides in. I just need this other fruit now to be dependent on this checkbox. So I’m going to add that to dependency as well and as you can see this basically just build upon each other so you can have a whole bunch of dependencies on one form and it’s really … I guess just a dependency building tool for as many fields as you may need. So I’m going to select other fruit as the dependency.
This is based on your favorite fruit field and it’s going to be visible when the dependee has a value of other and this one I’ll go ahead and fade in, fade out. Now I’ll make this fade in, fade out a little bit longer so we can really see it that it’s working and we’ll save it and we will give this a quick test, I select fruits it shows up, I select other and I can select the other ones as well but as soon as I uncheck other you can see it fades out.
If I select this other here you’ll notice that there’s a couple of issues because since this field is still technically setting these values this field is till displaying. So what we’ll need to do here is we can add a couple of other things. We’re going to have to change a little bit on these settings to make sure that it is only set when the other one is displayed. So we’re going to go ahead and click the Hide the Dependent if dependee is not viewed by the user and the dependency is not triggered, I’m going to make sure I’m on the right one here, oops I selected the wrong one, let me go back, I want to go to other fruit and select that checkbox.
Hide the dependent if the dependee is not viewable by the user and if dependency is not triggered. Let’s try that out and see if that’s going to do it for us and no it doesn’t look like it’s going to so let’s look at this one more time. I’m pretty sure there’s a way to get this to work so I’ll take a quick look here. So what we’re going to need to do here is we’re going to need to add another dependency for this other fruit field because essentially we want to make sure that the other fruit field only displays one when the other checkboxes checked but it also needs this favorite foods field to be selected as fruit otherwise we don’t want it to display.
So I went ahead and I select this and then we’re going to say the dependent field is visible only when the dependency has the value of in this case Fruits. This is where the interaction with other dependency has come in because here it’s acting with an And so basically we’re saying we only want this other fruit field to be displaying when there’s the checkbox on other and the select box on fruits.
So it has to meet both conditions before this will display. So I’ll leave this here and click Save. You can see now it adds this little dependency here so it says Other Fruit, it’s dependent on favorite foods when favorite foods has a value of fruits and when your favorite fruits has selection of Other. So let’s go ahead and give this a quick try. Now if I select Vegetables, it works of course just like I did before and so as Other, select Fruits, everything is working, I select Other it shows up.
Now when I select something else this Other Fruit should go away which it does and then of course brings up the Favorite Vegetable or if I select Other it brings up the other food. You’ll notice when I come back to fruits it saves this value so the other fruit is still displaying. So it remembers where you’re at, it does a nice job of showing hiding things and allowing you to make really dynamic in flexible forms for your various entities that … any type of entities that has fields.
One of the things you’ll notice is that since these values have been selected, if you want these values to be submitted I believe that’s where this checkbox of reset the dependents to its default values when the form is submitted. So basically if the dependency hasn’t been triggered this will reset it to its default values which in this case was blank. So just keep that in mind.
Go ahead and give this module a try, it’s very flexible, it’s a little confusing because there’s a lot you can do with it but it’s extremely powerful when you figure out how to get all the different dependencies to interact with each other and how to build those really interesting and the complex forms. Thanks again to drupalize.me for making this thing possible and thank you for watching the Daily Dose of Drupal, I will see you next time.
Nice tutorial, thanks for a video. I want to display these conditional fields on a Frontpage. I mean, that website visitor could choose selectable fields and then submit form, search selected information. Could you suggest how can I make it?