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.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.
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’.
The ‘JSONPrettyFormat’ parameters must be filled in. The ‘OriginalJSON’ is the unique mandatory parameter. Consult the parameter details below.
Original JSON text that should be pretty formatted.
Defines if the JSON root node can be collapsed.
Defines if the pretty formatted JSON starts collapsed instead of expanded.
Defines if the URL's can be clickable.
Right-click the desired screen and select the 'Add Screen Action' option to create the pretty format JSON handler action. Name it 'FormatJSON'.
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.
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.
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.
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.