Drupal tutorial: List Fields

in the tutorial adding fields we saw how we can attach text fields to content types for people to add data but there are times where you want more controlled in a free-form text field or text area box you might want to limit the author selection to a fixed set of options this is where a list field comes in handy in this tutorial we'll take a look at how list fields work and some of the unique options that they provide let's say that our demo company Acme widgets offers different length support periods for their different products and they want to go ahead and add this information to the product node types we could do this using a text box to input the information however there's only a few different options so the openness of a text box isn't justified if we were to use an open text field things could get messy quick if for example we wanted to group widgets by support length then we'd have to make sure that note authors always typed in the support options the exact same way a better solution is to provide known authors with a list to choose from that's always controlled so let's go ahead and add our list field now the first thing I want to do for this demo is I want to pop up our node edit form so we can see how it changes is we add and configure our list field I'm going to open up in a new tab where we can play with the content type so do that I'm going to go structure open link in a new tab and then over here I'm going to click on content types and then underneath our product content type I'm going to go to manage fields here we see the fields that we've added in a previous video but now I'm going to go ahead and at our list field I'm going to call this one support because we're going to storing the number of days I actually want to give it a machine name of something like support days now we select what type of data we want to be storing we want to select one of these different list options and we see that we have two options for numbers whether we want to store a whole number or an integer or where they want to store a decimal which is a floating-point number or whether we want to store text because we're going to be dealing with just whole numbers of days I want to go ahead and use the integer then we see we get two selections for our input widget a select list or this checkboxes slash radio buttons we're actually going to be demoing both but for now I'm just going to select select list and I'm going to show you one other little trick I like to use normally we click Save and we start moving through our configuration then later we have to go and organize the sort order for this field but what I'm going to do is I'm just going to go ahead and drag this up to the top and then click Save so now we've kind of killed two birds with one stone it's sorted we don't have to do it afterwards on this screen we need to configure how we're going to store the data into the database in particular we need to on a list field is define what values can the author select from the key to understanding how to do this is this line down here in the instructions which says we need to use this format key pipe label and when I say the word pipe I'm referring to a vertical bar and you can find that key on your keyboard generally it's above the enter key and it's a shift of the backslash key so I'm going to go ahead and paste in some values and what we see here as I've selected four values on the left hand side I have a number which is what's going to get stored into the database on the right-hand side of the pipe I have these word values this is what's going to be displayed in the select box on the node edit form it's also what's going to get displayed on a node view I'm just going to go down and save these settings and now we're going to run through the configuration for the widget the labels fine I'm going to put in a little bit of instructions let me go ahead and scroll down and leave it set to only one value and go ahead and click Save Settings so now let's going to take a look at our new field over our node edit form just flip back over to this tab hit refresh and here's our select list so we just select from one of these so let's say for example our blue widget has 30 days of supports scroll down the bottom click Save and here on our node view we can see our new field so now let's take a look at how some of the field settings affect our input widgets to see the differences let me pop open the node editor I'm going to run back over to this tab where we reddit incarcicon edit and here I want to check off on the required field and see what effect this has I save our settings and I run back over here we see the drop down the way it was before it was checked where we have this none plus the four different options that we put in we first create the field we do a refresh and now we can see the effect of checking off on the required field box now we see that the none is gone all we have our four fields we have to select one of those now let's look at an even more dramatic change by completely changing out our input widget to something different and then run back over to our tab where we're editing our content type and this time instead of clicking on edit underneath the widget I'm going to click on this select list and we see is that I can choose two different types select list or this check boxes and radio button so I'm going to switch to the checkboxes and radio buttons and click continue now if I run back over to my node edit form I click refresh we see that we get a completely different type of UI widget where before we the drop down now we have a bunch of radio buttons but it works the exact same way it's just a way of breaking things out and it's something that might be a little bit easier for note authors to work with it's particularly nice for smaller sets of things particularly if it's just something like an on/off or for example you need the gender and you want to male female or something that's going to be a binary decision a lot of times it's easier to use a radio or check box than it is a drop-down box so speaking of checkboxes let's look at how we convert these radio buttons into a check box input widgets to do that we run back over to where we reddit in our field and at first you might think well underneath these widget settings we could change that to check boxes but we only have one option that allows us to do both where we actually make this change is underneath our edit link and what's a little bit difficult for people new to Drupal is there's nothing on this page that says make this a radio button or make it a checkbox the secret is under these number of values so if I switch them from 1 to unlimited and then click Save Settings I run back over to our node edit form and click refresh we now see that I have checkboxes where we used to have radio buttons and if you think about it it actually makes a lot of sense what Drupal is doing it's being pretty intelligent radio buttons make sense when you only can select one option but if you allow people select multiple options that's when you need checkboxes so it always is enforcing good form UI elements for you automatically now let's take a look at what happens if we change our widget back to a select box to do that run back over to where our editing my field and I click underneath the widget column to change this back to a select list and click continue go back into a refresh and I get a select box back but this one's a little different it's not a single drop down like it was before it's now expanded giving me multiple options and so here I can actually go and using a control click I can select multiple different options if I want to the reason it's now expanded is because we have our values set to unlimited instead of one if we want to see the original version I can go back and change it back to one value so under support I click Edit I scroll down to number of values change this to 1 and save my settings I do a refresh and now we're back to the drop down list we started with the one last thing I want to go ahead and do is clean up our node view so we see that our list field is kind of hanging out down here below where we've organized these fields from a previous video to change that I run back over to my tab where I'm under structure content types and then I want to click on manage display and so here the first thing I want to do is drag our support field above the description field and then I want to change my label from being above to being in line I click Save now to run back over to our node view refresh and now everything's nice and cleaned up list fields can be very handy when you want to standardize a set of options for authors to select it helps that Drupal enforces the right types of form widgets for various types of input options we looked at the basic list fields in this tutorial but there are two additional field types that provide similar functionality term reference fields builds lists from Drupal's taxonomy terms system and reference fields builds lists from groups of nodes or users well look at these more advanced versions in later videos but for now if you need a simple way of controlling data sets list fields are a great way to go

Channel: Tom McCracken

Views: 13,572

Rating: 4.909091 out of 5

Keywords: Drupal tutorial, Drupal 7, Fields, CCK

Id: WIzYk-FaUDE

Length: 9min 49sec (589 seconds)

Published: Tue Apr 05 2011