JSON Editor App Installation Guide

To further enhance the business user experience, Contentstack provides prebuilt custom field applications that let you extend the functionality of your custom fields to serve your unique business needs while providing a native Contentstack look and feel.

Using Contentstack Custom Field, you can now input a JSON text into an entry field. With the JSON Editor custom field, you can edit and format JSON text, and view it in modes like code, trees, etc. within your Contentstack entry.

Prerequisites

This step-by-step guide explains how to install and configure JSON Editor within your stack.

Steps for Execution

  1. Install and Configure JSON Editor in Contentstack Marketplace
  2. Use JSON Editor within your Stack
  1. Install and Configure JSON Editor in Contentstack Marketplace

    Follow the steps below to install the JSON Editor app in Contentstack.

    1. Login to your Contentstack account.
    2. In the left-hand-side primary navigation, you will find a new icon for Marketplace (as shown below). Click the icon to go to the Marketplace.

      MP-Apps.png
    3. Within the Marketplace, you will be able to see all the apps available, hover over the JSON Editor app and click Install App.
      MP-Apps-JSON-Editor.png
    4. In the popup window, select the stack where you want the JSON Editor app to be installed and click the Install button.
      MP-Apps-JSON-Editor-Install-Dialog.png
    5. Now on the Configuration screen, choose the global format in which you want to store the JSON. Select JSON Object to store the JSON in JSON format or select JSON Stringified to store the JSON as a String.
      JSON-Editor-Config-Screen.png
    6. After selecting the configuration details, click the Save button.
    7. Click Open Stack to start using the JSON Editor application.
  2. Use JSON Editor within your Stack

    To use the JSON Editor application within an entry of your stack, follow the steps given below:

    1. Go to your stack and click the “Content Models” icon in the left navigation panel, and click the + New Content Type button.
    2. Create a content type by adding relevant details as displayed below:
      JSON-Editor-ContentType.png
    3. In the Content Type Builder page, add a Custom field in your content type by clicking the “Insert a field” link represented by a + sign.
    4. Under Select Extension/App, select JSON Editor and then click Proceed.JSON-Editor-CT-JSONapp.png
    5. Under Advanced Properties, you also have an option to set the Config Parameter for all the entries of a particular content type. This will override the global format which was configured at the time of installation in the Configuration page.
      Add a key as stringify and its value as true (or false) in the following format:
      {
      "stringify": true
      }
      After adding this config parameter "stringify" and setting it to true, the JSON data will be stored as a string for all the entries of this content type even if the global configuration is set to JSON Object, and vice-versa.
    6. After adding the app in a custom field, click either Save or Save and Close to save your changes.
    7. To use the JSON Editor app, create an entry for this content type, and you will see this JSON Editor custom field on your entry page as shown below:
      JSON-Editor-Sample-Entry.png
    8. You can input, edit, format, compact, and repair the JSON data, and perform undo and redo operations in the JSON editor. The content can be filtered, sorted, or transformed by JMESPath query language and can be viewed in different visual representations. There are five editor modes for writing:
      1. Code Editor mode:
        JSON-Editor-Type-Code.png
      2. Form Editor mode:
        JSON-Editor-Type-Form.png
      3. Text Editor mode:
        JSON-Editor-Type-Text.png
      4. Tree Editor mode:
        JSON-Editor-Type-Tree.png
      5. View Editor mode:
        JSON-Editor-Type-View.png
    9. After adding your JSON content, Save and Publish your entry.

Was this article helpful?

Thanks for your feedbackSmile-icon

On This Page

^