Home   >   Components • Design • Getting Started with vFlow • Inventory • vFlow 2.0 • vFlow Level 1 Menu Options   >   JSON Viewer

JSON Viewer

The JSON Viewer component allows users to view JSON data in a structured, hierarchical, and readable format without the ability to edit it. This makes it easier for users to navigate through complex JSON objects without worrying about editing or altering the data.

Key Features:

  • Read-Only Hierarchical View:
    The viewer breaks down JSON data into nested elements, making it easy to explore even the most complex structures.
  • Visual Cues:
    Provides color-coded visual cues to help differentiate between keys, strings, numbers, and boolean values for better readability.
  • Error-Free Representation:
    Since the data is read-only, there’s no risk of accidental changes or corrupting the JSON structure. This is ideal for scenarios where data integrity must be maintained.
  • Collapsible/Expandable Sections:
    Users can expand or collapse sections of the JSON data, enabling them to focus on specific portions of the JSON without being overwhelmed by the entire structure.
  • Formatted Output:
    The JSON Viewer automatically formats the JSON data with indentation and line breaks, making it much easier to read compared to raw JSON text.

Common Use Cases:

  • Data Inspection: View and analyze large or complex JSON datasets without the risk of accidental modifications.
  • API Response Viewing: Developers can use the viewer to inspect JSON responses from APIs, focusing on specific fields or nested objects.
    • API Response Viewing is simply looking at the data the system returns after a request. The JSON Viewer organizes the response, making it easy to read and understand, instead of showing it as a long, unstructured string.
  • Audit and Debugging: Helps in reviewing configuration files or API responses to ensure data integrity without needing to edit anything.

Creating JSON Viewer

  1. Under Inventory (), click “Component“, which is on the second left panel.
  1. Click Create placed on the second horizonal panel from the top, and a dialog box “Create Component” pops up.
  1. Select Type as “JSON Viewer“, Name it in the text box and click “Create“.
  1. When you click Create (), Basic option of Config menu for the JSON Viewer opens.
  2. Now you will see the following menu options:
    • Basic
    • Properties
    • Style
    • Animation
    • Events
    • Data

Note: You can create this component in the layout option of the configurator section as well. After this, you can follow the process given below.

Basic

Basic PropertiesDescription
TypeThe Component Type indicates the type of component you are adding. In this case, it defaults to “JSON Viewer” and cannot be changed here. This selection is made initially when you create the component.
Reference NameThe Reference Name is a unique identifier assigned to the component for internal use. This name is visible only to vFlow users, and is not displayed to end-users. The Reference Name is intended for your convenience, helping you easily identify and manage the component throughout.
DescriptionThe Description field is intended for use by application designers or administrators (vFlow users) to provide additional context or details about the component. This description is not visible to end-users and is used solely for internal reference to assist with component management.

Properties

PropertiesDescription
HeaderIt is displayed on the top of the component. To know more about header, click here or see the Header section under the System Components.
FooterIt is displayed on the bottom of the component. To know more about footer, click here or see the Footer section under the System Components.

Style

The Style option allows you to personalize the appearance of the JSON Viewer. This includes adjusting various visual aspects to ensure it complements your application’s branding and overall design. Here’s a breakdown of different settings that you can make adjustments to:

  • Large Screen Width: The JSON Viewer width is adjustable by entering a percentage value in the text box. For example, if the width is set to 100%, the JSON Viewer will take the full width of the screen.
  • Transparent: When you click to select this checkbox, the component will have a transparent background, allowing it to blend into the background of the page or layout.
  • Background Color: To choose the background color for the component, you can use a color picker or enter a hexadecimal or RGB color code. The default opacity is set to 100%.
  • Font:
    • Alphabet Case: You can choose the text case (e.g., uppercase, lowercase) or select “None” to keep the original case.
    • Text Alignment: You can set the text alignment (e.g., left, center, right) or select “None” for default alignment.
  • Dimension:
    • Height: You can define the height of the JSON Viewer in pixels (px) or percentage (%).
    • Maximum Height: You can set the maximum height to prevent the JSON Viewer from exceeding this limit.
    • Width: You can specify the width of the JSON Viewer in pixels (px) or percentage (%).
    • Maximum Width: You can define the maximum width to prevent the JSON Viewer from expanding beyond this size.
  • Spacing:
    • Margin: To adjust the space around the JSON Viewer, enter values for top, right, bottom, and left margins in pixels (px). Default is 0px for all sides.
    • Padding: To set the internal space within the JSON Viewer, enter values for top, right, bottom, and left padding in pixels (px). Default is 0px for all sides.
  • Border Radius: To define the curvature of the corners of the JSON Viewer, enter values for top-left, top-right, bottom-right, and bottom-left in pixels (px). The default is 0px for all corners.
  • Custom CSS Class Name
    • Users can enter custom CSS class names in the provided input field to apply additional styles.
    • Multiple Classes Names can be provided, If needed. They can be applied by separating them with commas, as indicated by the example (classA, classB).
  • After customizing the settings, click the Save button to apply the changes made to the component.

These settings allow you to tailor the JSON Viewer to your specific design preferences and requirements.

Animation

This option allows you to apply several animations to enhance the JSON Viewer’s loading appeal. The following are the available animations:

  1. Bounce
  2. Flash
  3. Pulse
  4. Rubber Band
  5. Handshake

Their Configuration:

  1. Click the Type list, and then select an animation to apply an effect when the JSON Viewer loads.
  2. After you select one of the animations (for example, Bounce), you will see the following configuration options:
    • Speed: In this field, you can select one of the following options to adjust the speed of the animation:
      • Faster
      • Fast
      • Slower
      • Slow
    • Delay: Click this list to select a value (for example, 3 seconds). This value specifies a time period. The application will load the animation after this time period (for example, 3 seconds).
    • Repeat: In this list, select a value (for example, 2). This value specifies the total number of times the application will play the animation.
  3. After you configure the JSON Viewer’s animation properties, click  to apply them to the JSON Viewer.

Events

The Events option of the JSON Viewer component, as shown in the image, allows you to assign task groups that will execute when specific actions occur within the JSON Viewer component. These tasks can be created separately in the configurator or inventory and can be grouped to perform various actions when certain events are triggered.

Here’s a breakdown of the Events section:

  1. On Load:
    • This option lets you assign a task group that will execute automatically when the JSON Viewer component is loaded.
    • This could be useful for initializing data or triggering other actions as soon as the JSON Viewer is displayed.
  2. Custom Load:
    • The Custom Load event enables you to trigger a specific task group during a customized loading scenario.
    • Similar to the previous options, you can choose the task group to be executed from the Select Task Group dropdown list or go back to the inventory or configurator to make a task or task group if needed.

After assigning the appropriate task groups to these events, click the button to apply your configuration to the JSON Viewer component.

In summary, the Events section provides flexibility in automating actions within your JSON Viewer component by linking predefined tasks to occur during the JSON Viewer’s loading process. This customization ensures a more dynamic and interactive user experience, tailored to your application’s specific needs.

Data

If you want to fetch and show some data in the JSON Viewer, select one of the data types that fits best for the business requirements:

Note: To know more about Data, click here or check the post under configurator.

Was this article helpful?
YesNo