Learn how to create an entity reference field in Drupal.

We’ll create a “Related products” field that will allow you to display related products at the bottom of the page.

We’ll cover the following:

Learn what entity reference fields are
Attach an entity reference field
How to use the autocomplete field
Learn about the three different field formatters: Rendered entity, Entity ID, Label

Transcript

Trainer (00:00):
So far in this course, we’ve looked at how to create text fields, text areas, and select lists. Now let’s look at how to create an entity reference field. An entity reference field allows you to reference or create a relationship with other entities or pages. Let’s say, for example, you want this product to reference some articles. You could create an entity reference field on the product content type, which allows you to select an article. Another example is if you want to display a list of related products on the product page. This can be implemented using an entity reference field, and let’s implement this feature right now. What we’ll do is create an entity reference field on the product content type called related products. And from this page, you can reference other products which will be shown on the product page as related products.

Trainer (01:01):
Let’s start by going to structure, content types, and click on manage fields on the product content type. And then click on add a field, click on, add a new field, and then scroll down to the reference section and then click on content. Because we want to reference other content entities or pages, we’ll need to select content. So go ahead and click on content. And then in the label field, enter in related products, and then click on save and continue. From the type of item to reference, make sure content is selected. One thing to be aware of is that the standard entity reference field can only reference a single entity type. You couldn’t configure the field to reference a user and content entity. You can only reference one entity type at a time. And let’s change the allowed number of values to unlimited, so we can select multiple related products. Once everything’s configured, click on save field settings.

Trainer (02:08):
On the field edit page, let’s enter in some help text. So I’ll enter in select related products and then scroll down to the reference type of field set and then check product from the content type list. And we will select product because we want to reference other products. And then scroll down and click on save settings. Now that we have created the field, let’s go to content and we only have one product at this time. So let me go ahead and quickly create three more products.

Trainer (02:46):
So I’ll click on add content, product and I will create the first product, and then I’ll click on save, and then let’s go and create another product. And I’ll save this product. And let’s go ahead and create the final product. And then I’ll scroll down and click on save. Now let’s go back to content and let’s edit the first product. And then if we scroll down, we should see a related products field. And to select the product, all we need to do is start typing in the title of the product. So I’ll type in learn and I’ll select learn PHP. And then if we want to add it in another product, all we need to do is click on, add another item, and I’ll select learn WordPress, and I’ll click on, add another item and I’ll search for views and select that product. You can also reorder the list, which will reorder the list when it’s shown to the front end user. So if you want to fully control the related products list, you can do so using this auto complete widget.

Trainer (04:03):
So let’s scroll down and click on save, and now let’s go to the product page. And if we scroll down, you’ll notice that we can’t see the related products field, and that is because we need to configure the formatter. So let’s go to structure and I’ll open that up in a new tab and then go to content types. And then let’s go to manage display on the product row. And straightaway, you’ll notice that on the default view mode, we have related products, but let’s go to for content because we have enabled the full content view mode. And straightaway, you’ll see that the related products is disabled. So let’s move that up below body and then scroll down and click on save. And now if we jump back to the other tab and refresh, we can see our related products right here, and the products are displayed in a list. And if we click on the title, it’ll take us directly to the product page.

Trainer (05:05):
Let’s jump back to the first product and let’s go back to manage display, and let’s take a look at the other formatters. So if we scroll down, label is the one we’re currently using. And if we configure the format by clicking on the cog wheel, we can remove the links from the product titles. So let’s go ahead and uncheck link label to the referenced entity and let’s click on update and click on save. And then if we go back to our product and refresh, you can still see our related products, but the titles are no longer linkable.

Trainer (05:42):
Let’s go back to manage display. And this time let’s change the formatter from label to entity ID and let’s save it. And then if we refresh product page, you can see now that the products are just displaying their entity ID. I’ve personally never used this formatter, but it’s there if you need it. And let’s jump back to manage display for one last time and let’s change it from entity ID to rendered entity.

Trainer (06:13):
The rendered entity format will render the referenced entities using a specific view mode, and you can select which view mode is used by configuring the widget. So let’s go ahead and click on the cog wheel. And from the view mode dropdown, let’s select teaser and then click on updates and then click on save. And then if we go back to the product page and refresh, it’ll render the related products, using the teaser view mode. So we can see the title, price, product type, and the product summary. Now on a real Drupal site, you may want to create a custom view mode called related or related products so you can really customise the look and feel of the related products. Let’s jump back to manage display, and we’ll change it back to label and we’ll make the labels linkable. And then if we refresh, we should see a list of related products with their titles as links.