Autocompleting Tags in Contentful

Contentful is a content management platform. It has a concept of Tags, and these fall into their "content as metadata" approach. This means that Tags are just another type of Short-Text Field you can add, as a List. Contentful has a Tag style appearance choice for these.

But they don't autocomplete!

In my experience, Tags are most useful when they autocomplete as you type things. This lets you keep some kind of consistency in your Tags across documents. Without autocomplete, you end up having "Spiderman" and "Spider man" and "Spider Man" as three different Tags 😱️

This UI extension adds a rendering option for Autocompleting tags to Contentful.

Where do the tags come from?

Any documents in the Space which have a field called "tags" will be searched for. Their contents will then become the autocomplete suggestions for the document you're editing.

Installation and usage

This uses Contentful's Extensions SDK. You need to have npm and gulp installed to use this, and have the extensions SDK installed.

Clone or fork this repository.

Install the dependencies needed with npm install.

Create a .env configuration file with your Contentful credentials:

export SPACE_ID=<space-id>
export CONTENTFUL_MANAGEMENT_ACCESS_TOKEN=<content-management-access-token>

Add the variables to your environment.

source .env

Upload the extension to Contentful

Create the extension in the space specified in the .env file:

npm run create

Local development

This doesn't work if you have web security enabled in your browser, since your localhost will be serving on HTTP. This is probably the case for you. It is possible to disable it, or just npm run update your code to the server every time!

Start a local server, changing the port if needed:

python -m SimpleHTTPServer 3030

Tell Contentful to render the widget from your local machine:

npm run dev

Update the extension

If you want to update the extension after your edit the code, run:

npm run update

Using the extension in the Contentful web app

Enable the extension in the Contentful web app for a "Short text" field (with "List" selected too) by opening the Settings for a field and selecting this widget in the appearance tab.