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.

Example:
You have a Listings and Reviews table where the Address field contains nested JSON data, with more details. You can add a JSON viewer, selecting this table and the Address column to display. Then, clicking on any table row will display the Address data in the JSON viewer component.

‍

‍

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.

Example:
You have a Ping User custom HTTP function. The API returns some information about the user, as well as whether or not the ping succeeded. You have this custom function bound to a form component in your space. You can drop in a JSON viewer that will display the results of the Ping User function - whenever someone uses the form to ping a user, the JSON viewer will display the results.

‍

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.

Tip: What is shown in the dropdown is dependent on the existing components and functions already in the Space. For this reason, we recommend adding the JSON viewer after you have added and configured your other components.

‍

Visibility Rules

You can create visibility rules that will determine when this component is visible and able to be interacted with.

‍

Design

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.

‍