Loading...
Skip to Content (Press Enter)
JSON Pretty Format - Demo
About
Demo
Instructions
Instructions
It's recommended to consult the
JSON Pretty Format
documentation in the OutSystems Forge to obtain more details about the implementation.
This component is only for Traditional Web Applications. For Reactive Web Applications use instead the
JSON Pretty Format Reactive
component available in the OutSystems Forge.
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.
1.2. Create a component dependency
In the desired module, open the
'Manage Dependencies...'
option, search for
'JSONPrettyFormat'
and import the
'JSONPrettyFormat'
Web Block. 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'.
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.
Input parameters details
OriginalJSON
RootCollapsible
StartCollapsed
AllowLinks
Text | Mandatory
Original JSON text that should be pretty formatted.
Boolean | Optional
Defines if the JSON root node can be collapsed.
Boolean | Optional
Defines if the pretty formatted JSON starts collapsed instead of expanded.
Boolean | Optional
Defines if the URLs can be clickable.
2.3. Create a screen action
Right-click on the desired screen and select the
'Add Screen Action'
option to create the pretty format JSON handler action. Name it
'FormatJSON'
.
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. If the Web Block doesn't appear in the dialog, it 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.
Click here to see your activities