Learn about all the different entity reference widgets that come with Drupal core.

We’ll cover the following:

Autocomplete
Select list
Checkboxes / radio buttons
Autocomplete (Tags style)

Transcript

Trainer (00:00):
We’ve looked at how to create an entity reference field and reference content. Let’s take a look at all the different widgets which can be used on the entity reference field. Currently we are using the order complete widget, which is recommended for entity reference fields. We can search for content by typing in the title and then selecting what is returned. And you can also reorder the list by clicking on the toggle icon and moving values up and down. So if you want to move learn WordPress to the top, just click on this toggle icon and then drag it to the top.

Trainer (00:38):
There is one limitation with order complete widgets, and that is you need to know what you’re searching for. This isn’t like a select list or checkboxes or radio buttons where you can see your options first and then decide what to select. You need to know exactly what the title starts with to search and select it. But this widget works well if you have hundreds of entities which could be referenced. A select list or checkboxes shouldn’t be used if you have lots of entities.

Trainer (01:10):
Let’s take a look at the other field widgets. So let’s go to structure. And I’ll open that in a new tab and then go to content types and then go to the manage form display page on the product row. And then scroll down and then click on the widget dropdown on the related products row. Here you can see the four available widgets, select list, checkboxes/radio buttons, order complete, and autocomplete tags style. Let’s start by choosing the select list and then scroll down and click on save. And now if we go back to our product page and refresh it and then we scroll down, here you can see that the select list is a multi-select list because the number of values on the field is greater than one. So we can select multiple entities. This widget only works well if you have a very limited amount of entities you want to reference. You wouldn’t want to scroll through hundreds of products to reference them using this widget.

Trainer (02:14):
Let’s jump back to the manage form display, and then let’s select the checkboxes/radio buttons, and then click on save. And then let’s go back to our product page and refresh. If we scroll down, now you can see that the related products is using checkboxes. Similar to the select list widget, you only want to use checkboxes if you have a very limited amount of entities. Just imagine there being 100 products. This page will end up very long.

Trainer (02:46):
Let’s jump back to the manage form display and then click on our widget dropdown. And we’ve already talked about the autocomplete widget, but let’s look at the autocomplete tags style widget and talk about the differences between the autocomplete and the autocomplete tags style. So let me select the tags style widgets and then click on save. And then let’s jump to our product page and let’s refresh it. And then if we scroll down, you can see that we still have an autocomplete widget, but the products are in a single widget and they are separated by a comma. This is the tags style. Each entity or product in this case will be separated by a comma. If you want to reference another entity, all you need to do is add a comma to the end and then start typing. And then just select your entity.

Trainer (03:46):
Another big difference between the autocomplete and these tags style is that it’s a lot harder to reorder the referenced entities using these widgets. You can’t reorder by simply clicking on an icon and moving the referenced entities up and down. You can control the order of the referenced entities by the order that they were entered into the field, but being able to reorder the values by clicking on an icon and moving them up and down is a better experience in my opinion.

Trainer (04:18):
Let’s jump back to the manage form display and we’ll select the autocomplete widget and click on save. And let’s go back down to our widget and look at the autocomplete widget settings. So click on the cogwheel, and from here, you have a few options for the autocomplete widget. The two important options are autocomplete matching and number of values. The autocomplete matching lets you control how Drupal will search for entities when you are using the autocomplete widget. If you only want to see entities which start with specific keywords and these keywords are the values that you are typing into the widget, then change this option to start with. By default, it is set to contains.

Trainer (05:07):
The other important option you can change is the number of results. This is the number of items which will return when you are entering in keywords into the autocomplete widget. If you have a lot of content, you may want to increase this, but give it a test and see what works well for you.