Postman's Visualizer & Workaround to Handlebars Helpers

You may have used Postman to send a request to an endpoint and received a response in JSON or XML or to write some tests published and documentation or share a collection with your team. But today, I'll be showing you how to render that same response in HTML, CSS, and JavaScript within the postman app.

For this demo, we'll use an API that I recently created for monitoring user actions on the website. I've added a new GET request to my collection which will respond with a message, a bunch of logs, and a maximum number of logs property. The response model is as follows:

{
  "message": "String",
  "logs": [
    {
      "_id": "String",
      "ip": "String",
      "functionName": "String",
      "message": "String",
      "exception": "String",
      "date": "Number",
      "data": "String",
      "category": "Number",
      "__v": "Number"
    }
  ],
  "maxLogs": "Number"
}

For setting-up the visualizer, we'll have to go over to the Tests tab on the Postman app and add a new variable. Let's call it 'template'. 'template' should be a string literal with two backticks. This variable will hold our visualization of HTML and CSS.

let template = ``;

Let's now add the 'pm.visualizer. set()' method. This will take two arguments, the first argument is our 'template' we just created, this is actually a 'express-handlebars' template string. The second parameter is the data we want to pass into that template string. In this case, it will be our response as JSON.

pm.visualizer.set(template, {response: pm.response.json()});

Now, we will add HTML and CSS to our string literal template. We can actually link in bootstrap via CDN Next. We can also add a style tag and include our CSS into it.

let template = `
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">


`;

We can use 'express-handlebars' built-in language helpers such as {{#each}}{{/each}} and iterate over the response and bring us the values for String Interpolation.

<div class="table-responsive">
    <table class="table table-striped">
        <caption>Max Logs: {{response.maxLogs}}</caption>
        <thead class="thead-dark">
            <tr>
                <th scope="col">ip</th>
                <th scope="col">functionName</th>
                <th scope="col">message</th>
                <th scope="col">exception</th>
                <th scope="col">date</th>
                <th scope="col">data</th>
                <th scope="col">category</th>
            </tr>
        </thead>
        <tbody>
            {{#each response.logs}}
            <tr>
                <th scope="row"><small>{{ip}}</small></th>
                <td><small>{{functionName}}</small></td>
                <td><small>{{message}}</small></td>
                <td><small>{{exception}}</small></td>
                <td><small>{{date}}</small></td>
                <td><small>{{data}}</small></td>
                <td><small>{{category}}</small></td>
            </tr>
            {{else}}
            <p>No Logs</p>
            {{/each}}
        </tbody>
    </table>
</div>

Now that it is for the bare minimum of a visualizer, let's click send and select the Visualize tab in the Response Window to see the data displayed as rows of a table.

We could end this here as now our data looks well-formatted, but if you notice, the data in the date column is in milliseconds. It could be helpful to have the capability to register Handlebars helpers and use them to format some string or number like in our case, dates. This is badly needed. Templates without any presentation logic in them are of very limited use and Postman needs to consider this.

But as of now, here's the workaround I made which gets our job done.

let responseJson = pm.response.json();
for(let log in responseJson.logs){
    responseJson.logs[log].date = new Date(responseJson.logs[log].date).toLocaleString();
}

pm.visualizer.set(template, {response:responseJson});

It works as expected and here's the final result: