Adding Entity Relationships to the Frontend | Yext Hitchhikers Platform

What You’ll Learn

In this section, you will learn:

• How to add linked enity fields as display fields to use them in the frontend
• How to customize facets and filters for entity relationship fields

Displaying Linked Entity Data on the Frontend

On the frontend of Search, any field from a linked entity can be displayed. In order to display these fields, you must:

1. Add the fields to your search configuration to the displayFields property

{
  "verticals": {
    "[verticalKey]": {
      "displayFields": [
        "c_customRelationshipField.name",
        "c_customRelationshipField.c_customField",
        "c_customRelationshipField.c_customRelationshipField2.name"
      ]
    }
  }
}

By default in the API response, we return all data fields from an entity as well as the name and entityId fields of related entities. However, you can specify additional fields you want to be returned by adding them to this displayFields property. This will allow them to used and viewable on the frontend.

If you specify display fields for a vertical, you will need to add ALL fields you want to display on the front end of that vertical. That includes fields on both related entities and base entities.

2. Add the field to a result card

Once the entity relationship data that you are looking to use is returned on the backend, you can then list it on a result card as you would with any other field. It should look something like this:

subtitle: profile.c_customRelationshipField.c_customField

Facets and Filters

Entity relationship data can also be used as a facet within Search. You can follow the Implementing Facets unit to do this. You just need to ensure that the searchable field is referenced with the proper dot notation as mentioned throughout this module.

In the backend configuration, you will set the linked entity as a facet via Edit as JSON:

{
  "verticals": {
    "ce_doctors": {
      "searchableFields": {
        "c_relatedSpecialties.c_relatedCondition.name": {
          "facet": true
        },
        "c_relatedSpecialties.name": {
          "facet": true
        }
      }
    }
  }
}

The UI should look like:

If you want to customize the facet on the frontend, you will need to then add something like this to the ComponentSettings in the vertical’s JSON file:

{
  "componentSettings": {
    "Facets": {
      "fields": {
        "c_relatedSpecialties.name": {
          "label": "Restaurant Features", 
          "searchable": true,
          "searchLabelText": "Search for our features",
          "placeholderText": "Search"       
        }
      }
    }
  }
}