Using Reference Field as Custom Extension

The Custom field extension in Contentstack allows you to add and use customized fields in your content-type. You can add customized fields referring content of other content types, as entries in your custom field. 

In Contentstack, you can also use the Reference field as a custom field extension. The reference field allows you to fetch entries from multiple content types and use them in your custom field. This functionality lets you render entries from the referenced content types and access them in your content type.

Let’s understand how we can use a reference field as a custom extension, with an example.

Process Overview

Consider a sample content model with three content types i.e. Person, Home, and Pet. The Person content type will be used as a reference field of Home content type. 

Similarly, the Person and Home content types will be used as reference and custom fields of Pet content type. Accordingly, the content models are given below:

Home content type:

  • It has a reference field named Person that fetches entries from the Person content type.

Pet content type:

  • It has a reference field named Person that fetches entries from the Person content type.
  • It has a customized reference field named Home that fetches entries based on the “Person” selected in the above reference field and has an association with the Home content type.

The following relationships exist between the content types:

  • One person can own many Homes
  • One person can have many pets
  • A pet lives in one of their owner’s Home

The above use case defines that a user wants to see the “Homes” owned by the selected Person who is associated with a particular Pet content type entry.

Prerequisites

In this guide we will be working on three content types. We will import and create these content types in Step 2. In Step 1 we will set up an extension that will be required to execute this exercise.

Steps for Execution

  1. Set up the Extension 
  2. Set up the Essentials
  3. Try-out the Set-up

Let’s get started!

  1. Set up the Extension

    Firstly, log in to your Contentstack account and create a stack. Follow the steps given below to create a custom field extension that will be required in the content types in step 2:

    1. Go to your stack, navigate to the “Settings” gear icon, and select Extensions
    2. On the Extensions page, click on the + Add Extension button, and select Create new. If you have not added any extensions in the stack yet, click on the create a new one link as shown below:
      Select_Create_New_and_Create_a_New_One.png
    3. In the Select Extension Type window, select Custom Field.
      Select_Custom_Field.png
    4. On the Create New Extension page, enter values in the fields as given below:
      1. Title (required): Provide a suitable title for your custom field. This title will be visible when you select the extension in the custom field in your content type.
      2. Field data type (required): Select the data type in which the input data of the field should be saved in Contentstack. For this example, the data type is JSON.
      3. Multiple : Check the multiple checkbox option.
      4. Hosting method (required): Select the Hosting method as Hosted By Contentstack.
      5. Extension Source Code (required): Specify the extension source code here. Download the extension source code from the Github repository link given below. Copy the code from the index.html file located in the root folder and paste it in this field.

        Download the code

        Note: The downloaded source folder contains a window.html file. Upload this file as an asset in Contentstack by following the steps mentioned in the Create/Upload asset article. After uploading the file, you'll get a URL in the asset details section, make note of this URL.

      6. Add the following config parameters in your extension:
        {
        "windowURL": " ",
        "contentType":"home",
        "managementToken":" ",
        "apiKey":" ",
        "baseURL":"https://api.contentstack.io/"
        }
        Now, add the credentials of config parameters as given below:
        • "windowURL": The value for windowUrl is the URL of the window HTML file which you just uploaded as an asset.
        • “contentType”: Add the Home content type UID i.e. home.
        • "managementToken": Create a Management token and add the token in config parameters.
        • "apiKey": Go to view stack details and make a note of the API key of your stack. Add the key in this section.
      7. Finally, Save the extension.
    We have successfully set up the extension, let’s proceed to create a content type to use this extension.
  2. Set up the Essentials

    We will now import and create content types required for this example. To do this, go to your stack, follow the steps given below:

    1. For this exercise, we require three content types as mentioned above. We will import the content types (Person and Home, which can be downloaded from the link below) and then manually create the Pet content type.

      Download content types 

      In this guide, to perform the exercise we require three content types as mentioned earlier. You can import “Person” and “Home” content types from the above link and then we proceed to create the “Pet” content type.

      Note: The Person content type should be imported first, as it is used as a reference field in the Home content type. 

    2. Unzip the folder after downloading and import the content types to your stack.
      The Person content type has a single line text field called Name as shown below:
      Person_CT.png
      The Home content type schema is shown below, it contains the following fields:
      • House Name: A single line text field
      • Person (Reference field) : This field fetches entries from Person content type
      • Home_CT.png

    3. Now, that we have successfully imported the Person and Home content types, let’s create a content type called Pet.
      Click on the + New Content Type button, select and fill the necessary details as shown below:

      Pet_create.png

      The Pet content type schema is shown below, it contains the following fields:
      1. Title (default field)
      2. Url (default field)
      3. Person (Reference field)
        Add a reference field to this content type. Under Edit Properties add a Display Name (Person) and select the Person content type from the Referenced Content Type dropdown.
      4. Home (Custom field)
        Add a custom field to the content type. Under Edit Properties, Select Extension that we created in step 1 and add a Display Name (Home).
    4. The Pet content type schema should look like this:
      Pet_CTdone.png
    5. Finally, click on the Save and Close button.
  3. Try-out the Set-up

    The content models set up is done in the steps above. Accordingly, let's create entries for each of these content types and see our set up in action.

    1. Go to your Person content type and create entries according to your choice.
    2. Now, create entries for Home content-type. Select a person from the Person reference field to be associated with this entry.

      Note : The Person reference field in Home content type entry should not be empty or null. The association of Home entry and Person reference field is mandatory.

    3. Similarly, create entries for Pet content-type, associate a person by selecting from the Person reference field. The Home custom extension will be seen in the Pet content type entry.
      The Home extension will show the Homes associated with the person selected in the above reference fields. 
    4. Now, click on the checkboxes and select the entries, and proceed to Save and Close.
      The selected entries will be rendered on the Pet entry page as shown below:

Was this article helpful?

Thanks for your feedbackSmile-icon

On This Page

^