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.
Installation (UI - using this repo)
The UI Extension can be installed manually from the Contentful UI following the below steps:
- Navigate to Settings > Extensions
- Click on “Add extension > Install from Github”
- Use
https://raw.githubusercontent.com/pauloamgomes/contentful-simple-reference-field/master/extension.json
in the URL - On the extension settings screen change Hosting to Self-hosted using the URL
https://pauloamgomes.github.io/contentful-simple-reference-field/
Usage
- Add a new
Reference
(One Reference) field to your content model, it can be localized. - On validations ensure that
Accept only specified entry type
is selected and only one content type is selected. - 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"
}
}
}
}
}
Download and installation instructions on github https://github.com/pauloamgomes/contentful-simple-reference-field