Table cell value is json, how to beautify, indent?

Ignition
4
  • Create a Flex View, jsonMarkdownView. Check that PROPS.direction : column.
  • Create a parameter,
    value: {"name":"John","age":30,"city":"New York","skills":["Python","JavaScript","SQL"]}
    This will be the value of the json column passed to the view.
  • Add a Markdown component.
  • On the Markdown create an expression binding,
    jsonDecode({view.params.value}) (See Paul's comment below! This removes the need for the script transform in my original post.)
"```json\n" + jsonFormat(jsonDecode({view.params.value})) + "\n```\n"

You should now have a view that renders like this:

image
image306×181 2.77 KB

  • Note that I've added the json instruction into the code block backticks in the hope that it would apply syntax highlighting as it would on the forum. It doesn't, but it's no harm to leave it in there in case the Markdown component is upgraded.

  • When finished editing the view, set the view height to less than the default table row height. 30 should do. The rendered view will now expand to the right size to show the contents. Thanks to @kgamble for this tip on Flex container and determining auto basis size - #3 by kgamble.

Now back to the table view.

  • On the rendered view column set,
    column.x.render : view
    column.x.viewpath : jsonMarkdownView (select from the dropdown).

That should do it.
Have fun.

2 Likes