In this video you’ll learn how to manage field widgets in Drupal.
We’ll cover the following:
- Manage field widgets
- Reorder and disable field widgets
- Change field widget configuration
Transcript
Trainer (00:00):
So far we’ve created a product content type, attached fields to it, and we created our first product page. And if we click on edit, on the product page, I want to show you how to configure and reorder these form elements. So these form elements are called field widgets. The field widget is used to enter text or a value into a field, and these widgets can be reordered and configured.
Trainer (00:30):
To configure them, let’s start by going to structure, content types, and this time, instead of clicking on manage fields, click on the down arrow, and then click on manage form display. From this page, you can reorder the fields. You can even select a different field widget, and you can also configure the widget by clicking on the cogwheel.
Trainer (00:57):
Let’s go ahead and reorder the fields first. And what I’ll do is I’ll open up the product content form in another tab. So let me pop this one to the right and I’ll pop this one out and pop it to the left, and let’s go to content and product. So on the left, I’ve got the product content form and on the right I’ve got the manage form display. Let’s go ahead and reorder the fields. So what I’ll do is, I will move product summary under title and then I’ll move price under our product summary, and then I’ll move body under price. So the order should be title, product summary, price, and then body. And then if I scroll down and click on save, and then if I jump to the browser on the left and refresh, now take note of the order of the widgets. If we refresh now, the fields have been reordered. So it’s title, product summary, price, and then body.
Trainer (02:02):
Now, if we jump to the right, you will see all of these fields such as authored by, authored on, promoted to front page, sticky at top of list. Now, the location of these fields are hard coded so we can reorder them, but they will always stay in this right hand column, so just be aware of that. Another thing you can do from the manage form display is you can hide or disable fields. So just imagine we want to disable the product summary field. All we need to do is move it to the disabled section, click on save, and then if I refresh the browser on the left, now take note of the product summary field, it is no longer there because it’s been disabled.
Trainer (02:50):
The field hasn’t been removed, we have simply disabled the field widget. So no historical data has been lost. All we have done is simply disabled the field widget. Now let me jump back to the right and move this back up the top and then click on save. And then if we refresh the browser on the left, we should see product summary.
Trainer (03:14):
A field can have multiple form widgets, but only one can be selected. So if we click on the widget dropdown on the title field, you can only see one widget, which is automatically selected. But if we scroll down to the authored by field, we can select any number of these widgets. So if I was to change it to say the select list and then click on save, and then if I click on authoring information on the left and refresh, the widget will now be a select list.
Trainer (03:50):
And if we were to change it, let’s go ahead and change it to check boxes/ radio buttons, and then if we refresh the browser on the left, it should be a radio button. Let’s just quickly change it back to auto complete, which is the recommended widget for the authored by field. Now most of these fields will only have one widget available. So if we click on a bunch of them, you should see, here you go, this one has two widgets available, the URL alias has only one.
Trainer (04:27):
A selected field widget can also have configuration options and you can configure these options if they are available by clicking on the cogwheel icon. What you can configure will vary depending on the widget. Some widgets will allow you to configure a lot of things, other widgets won’t allow you to configure any options, so just be aware that the configuration will vary.
Trainer (04:53):
Let’s go ahead and change the widget settings on the product summary page. To do that, just click on the cogwheel. And here you can see that we can change the rows value on the text area widget. So let’s change it from five to three and then click on update and then scroll down and click on save. And then if we jump to the left, take note of the height of the product summary text area widget. If we refresh, the text area now is shorter. So that is how you manage widgets and their settings. If this is all new to you, I recommend that you have a play around with all of the different widgets and settings.