jsontree — u_pbt_jsontree #

← Component reference · Guide contents

jsontree shows a JSON value as a collapsible tree, coloured by type: a config screen, an API response, an integration debug. You set the JSON text in is_json, the component shows it; a click on a node reports its path (ue_node_clicked), invalid JSON raises ue_error. It changes nothing: it is a VIEWER.

▶ See it live — Demo application, JSON tree tile, with the code and this page side by side.

At a glance #

Quick start #

// Show an API response as a tree
uo_json.is_json = inv_rest.of_response_text()

// Fold everything, then let the user open what interests them
uo_json.of_collapse_all()

// ue_node_clicked : the path of the node clicked ("lines/1/sku"), the path of
// n_pbt_json -> of_get_string(as_path) on the same text reads its value

Properties #

Methods #

Events #

Example #

Explore an API response #

// Fetch the order : the tree shows the response, or empties on a failure
if inv_rest.of_get(/*url*/ "https://api.example.com/orders/4152") = 200 then
	uo_json.is_json = inv_rest.of_response_text()
	uo_json.of_collapse_all()          // the reader opens what interests them
else
	uo_json.of_clear()
end if

Read the value of a clicked node #

// ue_node_clicked of uo_json : the path is the one n_pbt_json reads
n_pbt_json lnv_json

// Read the value at the clicked path with n_pbt_json
lnv_json.of_load(/*json*/ uo_json.is_json)
st_value.text = lnv_json.of_get_string(/*path*/ as_path)

// or, without a second parser : the value of the selected leaf, decoded
st_value.text = uo_json.of_selected_text()

Search whole words, case included #

// Whole words only, with the same case : "id" is not found inside "user_id"
uo_json.ib_find_match_case = true
uo_json.ib_find_whole_word = true
uo_json.of_search(/*query*/ "id")

Good practice #

• It is a viewer, not an editor: it shows the JSON, it does not change it. To read a value, hand the path of ue_node_clicked to n_pbt_json.of_get_string on the same text, or read of_selected_text.
• A big JSON stays fluid: only the lines on screen are drawn, a response of several hundred KB is browsed with the keyboard without waiting. of_collapse_all first is still the most readable.
• Invalid JSON breaks nothing: ue_error says so (with the line and column of the fault), the tree stays empty. That is the feedback to show, not a crash.
• A key that is empty or contains / has no path: n_pbt_json cannot address it either. Two identical keys in one object are both shown; the path designates the first.
• Right to left: a JSON document is a left-to-right text, and the tree stays so in an RTL application (only the search box follows the application's direction).
• The keyboard stays with the tree: Enter folds a block or "clicks" a leaf (ue_node_clicked), never the window's default button; Escape first closes an open search box, then goes back to the window; the closing lines (}, ]) are not positions of the selection; Ctrl+C copies the selection (of_copy).
• Very large documents: above 1,500,000 lines the document is refused with ue_error rather than silently cut. Printing (of_print, of_print_to_pdf) outputs the whole document, up to 10,000 lines.

Inherited from the common base #

These members exist on every visual component — they are not specific to this one. They are detailed once, in the transverse chapters; this table only says where to read them.

← Component reference · Guide contents