[Visualize]How to add Handlebars helpers?

🙋 Help
1

Hello everyone,

I’m using quite intensively Postman in my day-to-day work and I’m really found of the new Visualize API responses feature.

It’s good that this feature use Handlebars but the issue is that the basic helpers are quite simple and generally with Handlebars, you add your own helpers in order to full control your output (string format for example)

Do you know if there is a way to register helpers with new visualizer?

Thanks

Regards

2

Hey @a_todisco, welcome to the community! :wave:

Glad you like the Visualization feature!

Currently, there’s no way to register custom Handlebars helpers but we’ll consider this as a feature request. Can you specify your use case and create a feature request on our GitHub issue tracker?

If possible, we will add a few common helpers by default.

3

Update from some dude on the internet:

The feature request was made on 23sep2019. Give it a thumbs up if you’d like to see Handlebars.registerHelper support added to Postman’s Visualization feature.

For my money, this is much preferred to adding a few built-ins/pre-set helpers.

4

Note: Irrelevant to the feature request here.

For future readers this might be able to help them out - I wrote this collection which will help in visualizing any JSON/CSV response in a tabular form without writing any code (or a little in case any tweaking is required). :slight_smile:

5

Here’s a (really bad) work-around I’m doing since Helpers aren’t available. Sharing here (and in the Git request). Another option is to customize the full response, and just pass that in with all the changes.

Display my timezone as a hover “title” attribute on the UTC timestamp field:

let template = `
<table class="table table-dark">
  <tr>
      <th>UTC Timestamp (hover for MST)</th>
  </tr>
  {{#each response}}
  <tr>
      <!-- Get the formated Time from mstTimes array, for this current index -->
      <td title="{{lookup ../mstTimes @index}}">{{timestamp}}</td>
  </tr>
  {{/each}}
</table>
`;

let mstTimes = [];
// Loop over response
for (let resp in pm.response.json()){
  // For each loop index, convert timestamp to my timezone
  mstTimes.push(new Date(Date.parse(pm.response.json()[resp]["timestamp"])).toLocaleString("en-US", {timeZone: "America/Denver"}));
}

// pass mstTimes to template
pm.visualizer.set(template, {response: pm.response.json(), mstTimes: mstTimes});
6

I was also hoping for helpers to be available. I simply want to loop over a list. Since the index starts from 0, a handlebar helper to increment would be extremely useful.

Handlebars.registerHelper("inc", function(value, options)
{
    return parseInt(value) + 1;
});

I want to use the helper in the following snippet:

{{#each items}}
    <ol>
    <li><span class="counter">{{inc @index}}</span>{{{this.name}}}</li>
    </ol>
    {{/each}}