Live demo: Customizing the editor interface with open-source field editors

Slide 1

Slide 1 text

1 Live demo: Customizing the editor interface with open-source ﬁeld editors Tuesday 30th June, 2020 1

Slide 2

Slide 2 text

Housekeeping ● This webinar is being recorded; we will share the recording and slide deck with all registrants shortly -- keep an eye on your inbox! ● Please add your questions in the Q&A box, we will answer them after the presentation during the live Q&A session at the end ● To get in touch, write to us at team@contentfulmail.com Before we dive in...

Slide 3

Slide 3 text

Introductions 3 Aleksandr Suevalov Staff Engineer at Contentful Shy Ruparel Developer Evangelist at Contentful

Slide 4

Slide 4 text

4 1. Introduction to open-source ﬁeld editors 2. Demo: Aleksandr teaches Shy 3. Audience Q&A Agenda 4

Slide 5

Slide 5 text

Context

Slide 6

Slide 6 text

6 Content types have ﬁelds

Slide 7

Slide 7 text

7 Fields have data types

Slide 8

Slide 8 text

8 Fields have data types

Slide 9

Slide 9 text

9 Field editors make ﬁelds editable by humans

Slide 10

Slide 10 text

10 There is built-in editors

Slide 11

Slide 11 text

11 As well as custom Apps and UI Extensions

Slide 12

Slide 12 text

12 + =

Slide 13

Slide 13 text

13 + =

Slide 14

Slide 14 text

14 Field editors deﬁne the user interaction with content

Slide 15

Slide 15 text

Problems

Slide 16

Slide 16 text

16 Why did we bother open sourcing them?

Slide 17

Slide 17 text

Slide 18

Slide 18 text

“We don’t use h3, could we please hide that?” 18

Slide 19

Slide 19 text

“Can we link our internal markdown cheatsheet in here?” 19

Slide 20

Slide 20 text

Slide 21

Slide 21 text

“We never want to link existing entries as that broke our site in the past. Can we remove that link?” 21

Slide 22

Slide 22 text

“We would like to change the ﬁelds used for the reference card, can we change that?” 22

Slide 23

Slide 23 text

23 And so on. . .

Slide 24

Slide 24 text

Let’s write some code. 24 Scenario 1: Implementing custom behaviour into a field editor without recreating the entire component from scratch Scenario 2 Creating new fields using existing Contentful fields as a starting point 24

Slide 25

Slide 25 text

Where to learn more

Slide 26

Slide 26 text

26 All 18 Field Editors on GitHub and NPM

Slide 27

Slide 27 text

27 Developer docs and playground to explore the ﬁeld editors

Slide 28

Slide 28 text

28 Examples how to use them within apps or extensions

Slide 29

Slide 29 text

29 Highlight: Example for grouping ﬁelds

Slide 30

Slide 30 text

30 https://www.contentful.com/developers/docs/extensibility/field-editors/example-grouping-fields/ https://www.contentful.com/developers/docs/extensibility/field-editors/example-customize-field-editor/

Slide 31

Slide 31 text

31 Alex.js enriched Contentful Markdown editor https://www.contentful.com/blog/2020/06/23/apps-and -open-source-guide-to-making-contentful-truly-yours/

Slide 32

Slide 32 text

Share with us what you build! ● Join us for real time chat on the Contentful Community Slack (https://www.contentful.com/slack/) ● Tweet us @Contentful ● To get in touch, write to us at team@contentfulmail.com

Slide 33

Slide 33 text

33 Questions? Please type your questions in the Q&A box. If we don’t have time to get to your question, please follow up with us at team@contentfulmail.com

Slide 34

Slide 34 text

Thank you! Keep an eye on your inbox for the slides and video