json-pretty-format

JSON Pretty Format

icon_trusted
Stable version 3.0.4 (Compatible with OutSystems 11)
Other versions available for 10 and Older
Published on 28 May by 
4.8
 (9 ratings)
json-pretty-format

JSON Pretty Format

Documentation

For better comprehension, It's recommended to consult in conjunction with this documentation, the demo application. It can be installed when installing the component.

 

Table of contents

──────────────────────────────────────────────────────────────────────────────

1. Before starting 

      1.1.Install the last version of the component

      1.2.Create a component dependency


2. Pretty format a JSON

      2.1. Drag and drop the imported Web Block

      2.2. Fill in the Web Block parameters

      2.3. Create a screen action

      2.4. Refresh the Web Block

      2.5. Trigger the pretty format action


1. Before starting 

──────────────────────────────────────────────────────────────────────────────

1.1. Install the last version of the component

Consult the JSON Pretty Format component in the OutSystems Forge and verify if the last version of the component is installed in your environment. If not, install it. This component doesn’t require any dependency. At this moment, the demo application can also be downloaded and installed.


1.2. Create a component dependency

In the desired module that should include the pretty formatted JSON, open the 'Manage Dependencies...' option (1), search for 'JSONPrettyFormat' (2) and import the 'JSONPrettyFormat' Web Block (3). Apply your changes.




2. Pretty format a JSON

──────────────────────────────────────────────────────────────────────────────

2.1. Drag and drop the imported Web Block

In the screen element that should display the pretty formatted JSON, such as a 'Container', drag and drop the imported 'JSONPrettyFormat' Web Block. It is located under the 'JSONPrettyFormat' Reference, in the 'Interface' tab. Name the dropped Web Block 'JSONPrettyFormat'.

 

──────────────────────────────────────────────────────────────────

Note:

 It’s important to rename the Web Block to refresh it later, using an ‘AJAX Refresh’.

 ────────────────────────────────────────────────────────────────── 

 

 2.2. Fill in the Web Block parameters 

The ‘JSONPrettyFormat’ parameters must be filled in. The ‘OriginalJSON’ is the unique mandatory parameter. Consult the parameter details below.

 

  • OriginalJSON - Text | Mandatory

    Original JSON text that should be pretty formatted. 


  • RootCollapsable - Boolean | Optional

     Defines if the JSON root node can be collapsed. 


  • StartCollapsed -  Boolean | Optional

     Defines if the pretty formatted JSON starts collapsed instead of expanded.

 

  • AllowLinks -  Boolean | Optional

     Defines if the URL's can be clickable.


2.3. Create a screen action

Right-click the desired screen and select the 'Add Screen Action' option to create the pretty format JSON handler action. Name it 'FormatJSON'.


──────────────────────────────────────────────────────────────────

Note: 

This action can be changed to suit your needs. In this documentation, we will consider the case where the pretty formatted JSON is displayed only after a button click.

──────────────────────────────────────────────────────────────────

2.4. Refresh the Web Block

Open the 'FormatJSON' screen action created previously, and drag inside the canvas a 'Refresh' node between the 'Start' and 'End' nodes. Choose to refresh the 'JSONPrettyFormat' Web Block.


──────────────────────────────────────────────────────────────────

Note:

If the Web Block doesn't appear in the dialog, is because it was not given a name in the '2.1. Drag and drop the imported Web Block' step. Give a name to the Web Block and refresh it.

──────────────────────────────────────────────────────────────────


2.5. Trigger the pretty format action

To trigger and display the pretty formatted JSON, trigger the 'FormatJSON' screen action using, for example, a 'Button'. Don't forget that the button 'Method' parameter must be set as 'Ajax Submit' to refresh the 'Container' that holds the pretty formatted JSON.