Contentstack Developer Custom Widget

I renamed the custom Contentstack widget that I had previously developed to render the JSON of an entry to include links to Developer and added links to edit the content type and preview the page. I did not have to change any HTML or JavaScript to get this to work in the new (2021) Contentstack Venus user interface.

Developer widget

I pass configuration to the extension to specify the server root for previewing.

  "preview": {
    "baseurl": "https://localhost:5001"
Custom widget configuration

As someone who doesn’t know HTML or JavaScript, I think that the code is relatively straightforward.

<!doctype html>
<html lang="en">
    <meta charset="UTF-8"/>
    <title>Ace Editor Extension</title>
      body { margin: 0; }
    <link href="" rel="stylesheet" type="text/css">
    <pre>Edit Content Type: <a id="ctlink" href="" target="_blank">Edit Content Type</a>
Visit: <a id="visit" href="" target="_blank"></a></pre>
    <div id="jsoneditor"></div>
        window.extensionField = {};
        var jsoneditorElement = document.getElementById("jsoneditor");
        var jsonEditor = {};
        ContentstackUIExtension.init().then(function(extension) {
            extensionField = extension;
            var value = extensionField.entry._data;
            var options = {
                modes: ['text', 'code', 'tree', 'form', 'view'],
                mode: 'code',
                ace: ace,
            jsonEditor = new JSONEditor(jsoneditorElement, options);

            document.getElementById("ctlink").href = "/#!/stack/" 
                + extensionField.stack["_data"]["api_key"]
                + "/content-type/" + extensionField.entry.content_type["uid"]
                + "/content-type-builder";
            document.getElementById("ctlink").target = "ctedit"
              + extensionField.entry.content_type["uid"];
            document.getElementById("ctlink").innerHTML = 

            var url = extensionField.entry._data["url"];
            if (!(typeof url === 'undefined'))
                var baseurl = extensionField.config["preview"]["baseurl"];
                if (!(typeof baseurl === 'undefined'))
                  url = baseurl + url;
                document.getElementById("visit").href = url;
                document.getElementById("visit").target = "visit" 
                  + extensionField.entry.uid; 
                document.getElementById("visit").innerHTML = url;

Update 30.April.2021: Updated code with the following enhancement and the missing CSS file.

3 thoughts on “Contentstack Developer Custom Widget

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: