The JSON Viewer component allows you to display the results returned by a function.
Ways to use a JSON viewer
Display embedded JSON fields within a particular table
If you have a table where one of the fields is embedded JSON fields (nested data), you can bind that column to a JSON component, which will unroll that data for easy readability.
Display the most recent result returned by a custom HTTP function
Any functions bound to components in this space will also be available to bind to. For custom HTTP functions, the JSON viewer will display any results returned by that function.
Render raw mode or render pretty mode
If your data source has JSON that you want to display in Raw Mode or Pretty Mode, you can now switch between the views within a Table or a Detail component. You can also use the JSON Viewer component to display JSON in raw mode by checking the box "Render in raw mode" in the right-hand Data configuration tab.
Configuring your JSON viewer
Name your viewer component and add a title to be displayed at the top of this component. Then select what you want to display from the dropdown. This may be displaying (and unrolling) data, like a table column, or displaying the results returned after executing a particular function.
You can create visibility rules that will determine when this component is visible and able to be interacted with.
Left and Top options only appear for top-level components (components that are placed directly onto the Space canvas).
Left: Set the distance of this component from the left edge of the Space canvas (x-axis position). This can be expressed as a % of the canvas or as a number of pixels.
Top: Set the distance of this component from the top edge of the Space canvas (y-axis position). This can be expressed as a % of the canvas or as a number of pixels.
Width: Set the width of this component as a number of pixels or as a % of the containing unit.
Height: Set the height of this component as a number of pixels or as a % of the containing unit.
If the component is a top-level component, the containing unit is the Space canvas.
If the component is in-line within another component, the containing unit is the parent component.
If the component is within a flexbox component, the containing unit is the flexbox.
Snap to Grid: Set the edges of this component to snap to the grid canvas in the Space.