Contentful Conditional Fields Demo
Demo implementation of conditional fields in an Entry Editor custom app. Build with create-contentful-app
Overview
The Contentful Custom App: Entry Editor Conditional Fields Demo is a demo implementation for using conditional fields within an Entry Editor custom app. Contentful does not provide an out-of-the-box solution for implementing custom fields, so this app serves as a demonstration of how to achieve this functionality. It utilizes a combination of default Contentful fields (rendered with default-field-editors) and custom implementations of fields (rendered with Forma 36 components). The app code can be found in the /src/components/EntryEditor.tsx file, and the conditional fields and their conditions are defined in the conditionalFields.json file. To run this custom app, a Contentful account is required, along with an .env file in the local repository containing the necessary access tokens.
Features
- Demo implementation for conditional fields within an Entry Editor custom app.
- Uses default Contentful fields and custom implementations of fields.
- Manages the state of the fields within the app.
- Defines conditional fields and their conditions in a JSON file.
Summary
The Contentful Custom App: Entry Editor Conditional Fields Demo is a useful demo implementation for implementing conditional fields within an Entry Editor custom app. It provides a workaround for the lack of out-of-the-box custom field functionality in Contentful. By utilizing a combination of default Contentful fields and custom field implementations, this app effectively manages the state of the fields and allows for the definition of conditional fields and their conditions. The installation process involves cloning the repository, adding the necessary access tokens to the .env file, and running a few npm commands to start, build, and upload the app. Overall, this demo is a valuable resource for developers looking to implement custom fields in Contentful.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Contentful
Contentful is a headless content management system (CMS) that provides a flexible and scalable platform for creating, managing, and delivering digital content across multiple channels and devices.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.