Extensibility: UI extensions, webhooks and integrations

1 Extensibility UI extensions, webhooks, integrations and content preview

Housekeeping • This webinar is being recorded; we will share
the recording and slide deck with all registrants • Feel free to use the chat window to ask questions during the session • To get in touch, write to us at [email protected] before we begin...

3 UI Extensions Webhooks Integrations Content previews

• iFrame • Contentful UI Extensions SDK • Allowed languages
- upto JS ES6 • Integrate Contentful with other platforms • Customise the Contentful Webapp UI to suit your editorial needs What is an UI extension?

6 Custom Sidebar

7 Field level UI extension

8 Dialog Extensions

9 UI Extension : Installation 1 - Add a new
extension New extension from the scratch. For guidance refer to the templates and examples Curated list of examples that you can easily install and use in your own space Install from a valid Github link 2 - Install an example 3 - Install from Github New

https://www.contentful.com/developers/marketplace 10 UI Extension : Installation

11 Creating a UI Extension - CLI When creating a
UI extension you need to provide the following: 1. extension.json - Configuration file, describe properties of extension. 2. index.html - Contains markup and logic for functionality. // extension.json { "id": "fooBar", "name": "Foo Bar", "srcdoc": "index.html", "fieldTypes": ["Object"] } // index.html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://contentful.github.io/ui-extensions-sdk/cf-extension.css"> <script src="https://unpkg.com/contentful-ui-extensions-sdk@3"></script> <script> window.contentfulExtension.init(function(api) { // component logic goes here api.field.setValue(“hello world”); }); </script> </head> <body> // define your component view... </body> </html> Extension Configuration Extension Source

Installing UI Extension - webapp 12

13 Custom Sidebar Extension

14 Custom Sidebar Extensions

Assigning a UI Extension to a field 15 The last
step is to assign the extension to a field. The steps are: 1. Create a Content Type 2. Create a field in the Content Type 3. Head to Settings > Appearance of the field 4. Select the UI Extension your created 5. Create an entry of your Content Type to see your UI Extension in action

https://f36.contentful.com The component library is a tool for both internal
and external designers and developers to create consistent style and UX within the Contentful web app. • Significantly increases the velocity of UI design and development • Ensures visual and experiential consistency throughout the app • Enable external developers to create extensions to the contentful web app which look and feel like they are a native experience within the web app contentful/forma-36 Forma 36 is a monorepo maintained using Lerna. The monorepo is currently structured into the following packages: • forma-36-website ◦ This package includes the design system documentation which offers guidelines, best practices and examples. • forma-36-react-components ◦ A React component library built with Storybook. • forma-36-fcss ◦ CSS utility classes for spacing, typography, colors and transitions. • forma-36-tokens ◦ Forma 36 design tokens Forma 36 18 A React component library for Contentful built with Storybook

Forma 36 19

contentful/create-contentful-extension Create Contentful Extension is a CLI tool for developing
in-app extensions without the hassle of managing build configurations. Provides zero-configuration build management. You don’t need to install or configure tools like Webpack or Babel. They are preconfigured and hidden so that you can focus on the code. Same idea as create-react-app. Create Contentful Extension 20

Create Contentful Extension 21

Create Contentful Extension 22

contentful/extensions/samples/external-api/ Examples 23

1. Install the SDK and Forma36 - alternatively save a
lot of effort by using create-contentful-extension 2. Build the JS 3. Install config + host the JS 4. Assign the extension to a field or the sidebar 4 Steps

27 Triggering Webhooks Type / Action create save auto_save archive
unarchive publish unpublish delete ContentType Yes Yes No No No Yes Yes Yes Entry Yes Yes Yes Yes Yes Yes Yes Yes Asset Yes Yes Yes Yes Yes Yes Yes Yes Webhooks are called as the result of an action against assets, entries or content types. Whenever a matching event occurs, Contentful sends a request to the URI defined in the webhook definition. The following table summarizes the actions that Contentful offers for every resource type:

28 ➔ Trigger CI Tests [CircleCI, TravisCI] Run a test
suite on a CI service when the content model of a development environment changes. ➔ Trigger Deployment Pipeline [AWS CodeDeploy, Jenkins] Deploy a production build when content is published or unpublished ➔ Trigger Image Detection Service [Amazon Rekognition, Google Cloud Vision API] Feeding assets into an image detection service when they are uploaded ➔ Trigger Notifications [Slack, Mailgun] Trigger email or chat notifications when editing activity occurs ➔ Rebuild a search index when content is updated Common examples of integrations of Contentful with 3rd party systems are: Webhook Use Cases

29 Creating Webhooks When creating a webhook you have to
specify what type of change(s) and on which target object(s) you want your webhook called. There are two ways to create a webhook in Contentful: // Example API call to create a webhook curl -X POST "https://api.contentful.com/spaces/<SPACE_ID>/webhook_definitions" -H 'Authorization: Bearer <API_KEY>' -H 'Content-Type: application/vnd.contentful.management.v1+json' -d '{"url": "<URL>", "name": "foo", "topics": ["*.*"], , "filters": []}' In the top navigation bar, open: Settings Webhooks Add Webhook Create a webhook by sending the settings for the webhook in a body in your API call. With the Web App With the API

Webhooks Templates 30

Webhooks Templates 31

32 Triggering Webhooks Webhooks can be triggered by selecting: ➔
All Events ➔ Only Selected Events

33 Filtering on Webhooks Sometimes it is necessary to filter
webhooks based on the properties of the entity that triggered the webhook. The most common examples are: ❖ Filter webhooks by environment ID Example: Only trigger smoke tests on CI service for environment with ID “staging”. ❖ Filter webhooks by entity ID Example: Only trigger Slack editorial channel for edits on “Footer Menu” ❖ Filter webhooks by content-type ID Example: Only trigger email for editorial review for entries of article content type

34 Webhook Transformations The transformation property of a webhook definition
allows you to define: ➔ Custom HTTP method ➔ Custom Content-Type header ➔ Custom payload that may or may not make use of the default body. { "sys" { "id": "entry-id" "type": "Entry" }, "fields": { "title": { "en-US": "hello world" } } } Default Body { "entryId": "{ /payload/sys/id }", "title": "{ /payload/fields/title }" } JSON Result: { "entryId": "entry-id", "title": { "en-US": "hello world" } } Custom Transformation

35 curl -X GET "https://api.contentful.com/spaces/<SPACE_ID>/webhooks/<WEBHOOK_ID>/calls" -H "Authorization: Bearer <API_KEY>" -H
"Content-Type: application/vnd.contentful.management.v1+json" Webhook Activity Log You can check the activity log using the Web App by clicking the View Details link of any webhook in the overview screen. Or you can check the logs via the API as well:

Contentful is API first and can integrate with any platform
that has an API Multiple vendors provide integrations to Contentful. Following slides detail a few that is provided OOTB from Contentful. Integrations 37

Smartling -> Contentful integration 38

• Netlify App: The Netlify App is connecting your Contentful
space to a Netlify site. The app enables continuous deployment of content changes into a static site. • Algolia App: The Algolia app makes it easy to connect Algolia as a search engine to a Contentful space. Once it's installed, Contentful will be automatically pushing updates to the specified Algolia index so content changes are kept in sync. Apps (Alpha) 41

Netlify App 42

Netlify App 43

Netlify App 44

Content Preview and Preview API power your staging site for
DRAFT content 47

• Dynamic preview site and a dynamic production site •
Dynamic preview site and a statically-built production site • Statically-built preview site and a statically-built production site Content Preview - Architecture Options 48

49 Gatsby Preview Integration

• Setup different preview for different front ends • Allow
practitioners to select which front end they would like to preview the changes in Multiple Preview Sites 50

Topics UI Extensions Webhooks Integrations Content Preview

Extensibility: UI extensions, webhooks and inte...

Extensibility: UI extensions, webhooks and integrations

More Decks by Contentful Webinars

Other Decks in Technology

Featured

Transcript