Drupal provides an incredible array of different styles of fields we can use to extend our content types. In this tutorial, we're going to start learning how to add fields to our content.
Adding Fields to Content
To get started we're going to walk through two of the most basic yet most commonly used types of fields. Those that can be used for storing simple text and numbers. Walking through how to use these basic fields will give us a good foundation how to work with more advanced ones which we'll cover in later videos. So join me as we learn how to start extending content types of fields.
In a previous video we created a new content type for our demo sites. We used just the two default fields: title and body. We can see them by going to our node edit change. Now, we did rename them. We named title: "Product Name" and body: "Description" but they're still just the two default fields. But now let's say that our site product owner wants to extend the types of information that we can add to our products. Let's say, for example, that we need to add a model ID to our product by content type. This is the perfect use for fields.
Let's go ahead and add a new field. To do that we're going to go to structure but I'm going to do something a little different. I'm actually going to open this up in another tab. And I like to do this so that when I'm working with my content type I can have it open in this tab but then I can see what changes it's making to my note edit form over on this tab. It's just a little trick that I like to do while I'm building content types. So I flip back over here and on "Structure" I want to click into "Content Types." I go to Content Type and I want to add my field (which is the product one), and then I go to "Manage Fields." We see that down here is where I can add a new field.
In a previous video, "Introduction to Fields", we talked about the fields module does three different things.
- It gives us a place to store data. That's what this drop down is about, how do we want to store the data?
- It also gives us a user interface widget on how we want to input the data, that's what this element is here.
- The third part is it gives us a way of outputting the data. That's actually over on this tab in a slightly different area, we'll look at that at the end of this video.
For now let's go ahead and add our model ID field. So the first thing I'm going to do is put in our name. And then, over here we see another field. I'm going to go and type something right now. I see we got some more strict rules about how we use this. I'm just going to go ahead and put in model, you see I put in the same thing but the key to it is I've used a smaller set of characters, ones that can be saved into our database properly, can be saved out to files. And so, it's something that's usable for Drupal to refer to this field internally. You don't have to worry about the technical parts of it too much, just know to follow the descriptions and special characters that it says right here. So now I'm going to go ahead and I'm going to select a field type. For our first one we're just going to want to store some text.
Configuring Fields
We see that we got all these different options. I'm just going to go down and select text for now. And now we're going to get a different set of selections over here based on what we select as far as what we want to store. For text we only have one option, a text field, so we're going to go ahead and click save. So now we come to a screen where fields wants to know a little bit more about how we want to store this data. For text field, it only wants one piece of information, what's the maximum number of characters that we might want to store? For model ID's they're never going to be more than 20 characters long so we'll go ahead and put 20 and save the field. On this next screen, fields is going to give us the ability to customize our user interface widget. First thing it wants to know is what do we want for our label. This is just copied from what we put in before so it's fine, we'll leave it alone. Then we didn't say, "Do we want this field to be required or not?" For our use case it's a model ID, it's pretty important, so we want it to be required.
The next is the size of our text field. Before in the previous screen we said that we only wanted to store 20 characters so it doesn't make sense to have the size of the field any bigger than 20 so we'll go ahead and enter that in. The next part is do we want to allow only plain text or do we want to do any filtering. Plain text is fine. Here we want to enter some information to help our content authors out. So let's just say, model ID from the catalog. So we scroll down, we also can do a default value. We're not going to have one of those for a model ID so we'll leave it alone. And this is another interesting part of fields down here, is we can select the number of values.
We're going to see how this works in a second so I'm just going to leave it set to one, I'm going to go ahead and save. We're not done creating our new field but one last thing I want to do is I want to go ahead and drag it up and re-order it and put it above our description. I'm now going to click save. And now if I run back over to my note edit form I do a refresh and here's my model ID. So we go ahead and put in blue widgets 01, scroll down, click save, and here we see our new field has been added right here. Now let's take a quick look at how the multiple values option works. To see it I'm going to go ahead and open our note edit form. and I'm going to flip back over to where I'm editing my content type. I want to change the model field so over here I'm going to go to edit. I'm going to scroll down and change this number of values to something like 5. Do save settings, run back over to note edit form, hit refresh, and then you see I can put five different elements in here.
So say, for example, I want to put in blue widget 02 and I can change the order of these if I want to. The other thing that's kind of neat is let's run back over here to edit and now let's set this to unlimited. Click save settings, go back over here and we do a refresh, and now what we see is that I've got my original field, I've got one additional field, and I have this add another item button. So if I need to add three I can put a second one here and then just say I want to add another item and that way I can put in as many as I want or as few as I want. It's a nice little option that allows us to make this kind of adjustment. I'm going to go back and just change it back to our original one value setting, save settings, refresh, and we're back to the way it was.
Additional Configurations
Now let's say that the product owner comes back and they want us to add a price to our product type. Well, to do that we can simply go back over to structure, content types, and then we click on manage fields. Now we're going to run through the same thing we did before except this time we're calling it price, put in a machine name of price. And here I'm going to drop down. If we wanted to we could select a text term, it's down at the bottom but because this is a number we might want to do some math on it. I'm going to go ahead and select a decimal type. Here, once again, the only type of interface widget we're given is a text field so we're going to go ahead and leave that one. and click save. Now you'll see we have a little bit of information here on how we want to save this number. So basically what type of precision scale.
This information's fine so I'm just going to go ahead and leave it and save our field settings. Now we go through our UI widget settings. Much of this form is going to look similar to the way it did for our text field but there are some things that are going to be different because we are dealing with a number field now. So the label's fine, I'm going to go ahead and require this. Under help text we just want to give our note author some information to help get the right information in. So I'm just going to put retail price. As we scroll down we see that we now have some additional things such as when we put in a maximum amount, a prefix and a suffix. I'm going to go ahead and put in a dollar sign since we're dealing with money. And for suffix I'm going to go ahead and put in USD because of US dollars. Again, I could put in default, I'm not going to do that. I'm going to go ahead and leave one value and once again we get this precision information, I'm going to leave that alone and click save settings.
Once again, I'm going to reorganize and drag this up here above our description and click save. Run back over to our note edit form, click refresh, and her we see our price with our prefix and our suffix. So we go ahead and put in a price of $26, scroll down, click save, and of course here's our pricing information on our note.
Now that we've added a couple fields, let's take a look at the third part of what the fields module gives us, the ability to manage displays. I'm going to go ahead and leave the note view open in this tab and run back over to other other tab and work on manage display. And here I can set various different settings. So say, for example, I want to do inline labels and I want to move the model and price above our description. So I just drag and drop and click save, run back over to our note view, click refresh, and now we see that the model and price fields have been added above our description and that we have these inline labels.
In this tutorial, we've worked through how to add two of the most basic fields to our content type, a text and numeric field. Well, there are many more advanced fields, as we'll see later. These two are the most used on most websites. Additionally, much of the workflow and settings that we used for these two basic fields will be the same for more advanced ones. In the next tutorial we'll look at how to input text and numbers using a controlled list and how Drupal intelligently helps you manage elements based on usability best practices.