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">
  <head>
    <meta charset="UTF-8"/>
    <title>Ace Editor Extension</title>
    <style>
      body { margin: 0; }
    </style>
    <link href="https://assets.contentstack.io/v3/assets/blt30b41f7b9a5d7467/bltb6bb4f7db098181f/5b39e605fda2af4e7866b92c/jsoneditor.min.css" rel="stylesheet" type="text/css">
    https://www.contentstack.com/sdks/contentstack-ui-extensions/dist/latest/ui-extension-sdk.js
    https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js
    https://assets.contentstack.io/v3/assets/blt30b41f7b9a5d7467/blte7fe106cc93cf2bf/5b33888fcfc846f95726af6f/jsoneditor.min.js
  </head>
  <body>
    <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>
    <script>
        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);
            jsonEditor.set(value);

            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 = 
              extensionField.entry.content_type["uid"];

            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;
            }
        });
    </script>
  </body>
</html>

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:

WordPress.com Logo

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

Google photo

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

Twitter picture

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

Facebook photo

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

Connecting to %s

%d bloggers like this: