Contentful Simple Reference Field

Contentful provides a powerful mechanism to link to other entries, accessible on the UI trough the Reference field widget. Such field works perfectly for most of the cases, however, there are a few situations we may prefer a more minimalist widget, like when referencing to a less dynamic and populated content model. Let's imagine that we have a content model Channel that is used to identify contents that are used in a website, mobile application, etc.. So, instead of using the Reference field and having to click and select from the modal the desired channel we can have instead a simple dropdown (select) or radio buttons, but maintaining the same reference data.

Overview

The extension has the following features:

• Change the display widget of a "Single Reference" field to use a Dropdown or Radio options
• Change the display widget of "Many references" to use Checkboxes options
• Support for pre-filtering of referenced entries using Contentful query filter format
• Supports localization

Requirements

• Contentful CMS account with permissions to manage extensions

Installation (UI - using this repo)

The UI Extension can be installed manually from the Contentful UI following the below steps:

1. Navigate to Settings > Extensions
2. Click on "Add extension > Install from Github"
3. Use https://raw.githubusercontent.com/pauloamgomes/contentful-simple-reference-field/master/extension.json in the URL
4. On the extension settings screen change Hosting to Self-hosted using the URL https://pauloamgomes.github.io/contentful-simple-reference-field/

Usage

1. Add a new Reference (One Reference or Many Reference) field to your content model, it can be localized.
2. On validations ensure that Accept only specified entry type is selected and only one content type is selected.
3. On the Appearance tab ensure that Simple Reference is selected, and on display option, we define the field we want to show in the dropdown/radios.

When creating/editing an entry where the field is defined it will display the references:

If instead of Dropdown we select Radios it will display as:

The field saved data is the same as the default Reference widget, e.g.:

{
  "fields": {
    "title": {
      "en-US": "Test Page"
    },
    "slug": {
      "en-US": "test-page"
    },
    "channel": {
      "en-US": {
        "sys": {
          "type": "Link",
          "linkType": "Entry",
          "id": "fs0arvLf9GqSIOJklSwnF"
        }
      }
    }
  }
}

When using "Many references" it will automatically use checkboxes:

Optional Usage for Development

After cloning, install the dependencies

yarn install

To bundle the extension

yarn build

To host the extension for development on http://localhost:1234

yarn start

To install the extension:

contentful extension update --force

Limitations

Number of displayed entries. However that's not completely a limitation, as the purpose is to use the widget when referencing a content model that has only a few entries.

Copyright and license

Copyright 2020 pauloamgomes under the MIT license.