JSON Editor Extension Setup Guide

You can add a JSON Editor custom field extension, that enables users to input data that in JSON as well as in other formats such as normal text, tree format, form, and view, such as Sublime and Vim, to your stack. The content managers can then select one or more resources from the list while creating an entry.

This step-by-step guide explains how to create a JSON Editor custom field extension for your content types:

  1. Add the ‘JSON Editor’ custom field extension to your stack
  2. Use your custom field

Step 1 - Add the ‘JSON Editor’ custom field extension to your stack

  1. Go to Settings > Extensions. Click on the ‘+ Add Extension’ button on the top-right corner and select ‘Use prebuilt’.
    Select Use Prebuilt.png
  2. Click on 'Custom Field'. This opens the 'Prebuilt Extensions' window.
  3. Select ‘JSON Editor’ from the given set of Prebuilt Extensions.
    Select JSON Editor.png 
  4. Click ‘Install’. You will be led to the ‘Create New Extension’ details page where the following details are displayed:
    • Title - You will see a predefined title, ‘JSON Editor’. The same title can be used when adding the custom field in your content type.
    • Field Data Type - Select the field data type for your input data as ‘JSON’.
    • Hosting method - The hosting method will be set to ‘Hosted By Contentstack’. This option allows the source code for the custom field to be displayed in the ‘Extension Source Code’ field.
    • Extension Source Code - You will find that the source code for your custom field is already available in this field. You can make the required changes to it to suit your needs.
    • Config Parameter - Provide values for the config parameters if you need to.
      JSON Editor Edit page.png

      Note: You can provide different configuration settings for specific instances of your Custom Field Extension when setting up your content type. The configuration that you provide for an instance will only be applicable for that instance and will not affect any other instances of the same custom field extension or any other fields within the same content type. Learn more.

  5. Click on ‘Save’. This creates your custom field.

Now, let’s understand how you can start using this custom field in your content type.

Step 2 - Use your custom field

To use your custom field, you need to follow the steps given below:

  1. Create a content type by clicking on the ‘+ New Content Type’. Enter the relevant details for the content type and click on ‘Create and Add fields’.
    Create Content Type.png
    This leads you to the ‘Content Type Builder’ page where you can add the relevant fields.
  2. Add the ‘Custom’ field in your content type.
    Add Custom Field.png
  3. Select 'JSON Editor' from the dropdown and set the other properties of your custom field.
    Dropdown - JSON Editor.png

    Note: You can provide specific instance-level configuration settings for your Custom Field extension. Learn more.

  4. After adding other relevant fields in your Content Type, click on Save and Close.

This will create your Content Type. Now you can use the custom field while creating an entry for this Content Type as shown below:

JSON Editor Demo.png

Was this article helpful?
top-arrow