Format and Display JSON in Your App

[Dan_Wroblewski]

I wouldn't have thought this would be a big deal, but I recently got a call from a colleague in Ireland who was building an app for an important customer. And the customer had a requirement to retrieve data and display it in formatted JSON.

So my colleague asked: How do you you display formatted JSON?

At first, we both thought you could simply use the ENCODE_JSON formula function and then display in a Text field, but that did not work. But then I discovered (with the help of a friend 😽) that that function has a parameter, and that is all you need.

How to Do It

To demonstrate, I connected to the Northwind Product entity.

I then created a data variable that returned the first product, again, just to have some data.

On my UI, I created a container with a text box, whose content was set to a page variable, textToDisplay (with an initial value). I used the built-in style Primary Card to make it look nice.

SIDE NOTE: I used the custom width/height setting to make the container a minimum size but let it expand with the data. 

I then added a Set Page Variable in the data variable logic to set the page variable.

And I set the page variable to the formula below. Note some interesting things:

• If you set the Spaces parameter of ENCODE_JSON, you will get the JSON nicely formatted.
• Again, notice the formula editor has really good documentation on every function (if I would only read it 🤦).

ENCODE_JSON(data.Products1,4)

The result?

Without the Spaces parameter, it would have displayed like this:

Making It Editable

You could also put the text in an input box so a user could edit it.

Then you could provide a button to validate the JSON they type by using a simple JavaScript flow function.

I set the input to the page variable, changed the output to true/false, and used the following code:

If I click Validate with the default JSON:

If I make an error:

👉 Let me know if this was helpful, and maybe how you would improve on this.