Content editor extension: JSON viewer example

The JSON viewer content editor extension

On this page we'll show you how to develop a simple content editor extension. This extension will display the content form in JSON format and allow you to edit it. This example shows you how to use the extensions SDK and the main functionality you'll need when implementing your own content editor extension.

The JSON viewer content editor extension.
The JSON viewer content editor extension.

You can click to download the complete JSON viewer example as an HTML file.

The extensions SDK is available on GitHub.

Initializing the SDK

Note that this example uses the CDN hosted file: "https://unpkg.com/dc-extensions-sdk@^2" to include the extensions SDK. For other ways of using the SDK in your app see SDK Read Me.

To initialize the SDK we use the init function. This loads the web app into an iframe and establishes the connection with Dynamic Content. The function returns a promise that resolves to an instance of ContentEditorExtension, which you can then use to call other functions. If the connection cannot be established, if the web app URL is not available, for example, then an error is returned.

dcExtensionsSdk.init()
   .then(async (sdk) => {
    }

Getting and setting the form value

Content editor extensions need to keep in sync with the content form. If the user makes a change in the content form then it must be reflected in the content editor extension field, and any changes in the content editor extension field must be reflected in the content form.

In our JSON viewer example, we get the value of the content form using:

sdk.form.getValue()

Then we subscribe to changes using the onModelChange handler and update the content editor extension field if the content form changes:

sdk.form.onModelChange((_, value) => editor.value = JSON.stringify(value, null, 2));

To ensure that the content form is updated if a change is made in the content editor extension field, we listen for changes and update the content form if a change is made:

editor.addEventListener('input', () => sdk.form.setValue(JSON.parse(editor.value)));

That's all there is to the simple JSON viewer, the rest of the functionality is handled by the extensions SDK.

Registering the JSON viewer extension

  • To register the extension, choose "Extensions" from the Development menu and click "Register extension".

  • Choose "Content editor" as the extension category and give the extension a label. You will be able to select the extension by clicking the tab with this label at the top of the content form.

  • Enter the URL to where you've uploaded the extension web app or you can use: https://amp-product.s3.eu-west-1.amazonaws.com/doc-examples/json-viewer/index.html to register the hosted example.

  • Click "Save" to register the extension on the hub.

Registering the JSON viewer extension.
Registering the JSON viewer extension.

Complete example

The JSON viewer example is shown below.

<!DOCTYPE html>
<html>

<head>
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            padding: 0;
            margin: 0;
        }

        textarea {
            width: 100%;
            height: 100%;
            border: 10px solid transparent;
            box-sizing: border-box;
        }
    </style>
    <script src="https://unpkg.com/dc-extensions-sdk@^2"></script>
</head>

<body>
    <textarea id="json"></textarea>
    <script>
        const editor = document.querySelector('#json');
        dcExtensionsSdk.init()
            .then(async (sdk) => {
                const value = JSON.stringify(await sdk.form.getValue(), null, 2);
                editor.value = value;
                sdk.form.onModelChange((_, value) => editor.value = JSON.stringify(value, null, 2));
                editor.addEventListener('input', () => sdk.form.setValue(JSON.parse(editor.value)));
            });
    </script>
</body>

</html>

Extensions overview

Dynamic Content Extensions SDK

Extensions Style Guide

SDK Documentation