Contentful Conditional Fields Demo

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.

Installation

To install and run the Contentful Custom App: Entry Editor Conditional Fields Demo, the following steps need to be followed:

1. Clone the repository to your local machine.
2. Create an .env file in the root directory of the project and add your Contentful access tokens.
3. Open the project directory in the command line.
4. Run the following command to start the app in development mode:

   npm start
   

5. Open your web browser and navigate to the app to view and test it.
6. Any changes made to the code will automatically trigger a reload of the app in the browser.
7. To build the app for production, run the following command:

   npm run build
   

8. The built app will be located in the build folder and is ready to be deployed.
9. To upload the build folder to Contentful and activate the bundle, run the following command:

   npm run upload
   

10. The deployment process will guide you through the required arguments.

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.