> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# JsonTree

> Esplora i valori JSON con nodi espandibili ed etichette personalizzate.

## Panoramica

`JsonTree` visualizza un `value` JSON oppure un array di `entries` denominati. Passa tutte le etichette per valori vuoti e per espandere/comprimere, affinché l'applicazione controlli il testo.

**Light**

[Dettagli del record espandibili (light)](https://storybook.twenty.com/iframe.html?id=ui-jsonvisualizer-jsontree--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Dettagli del record espandibili (dark)](https://storybook.twenty.com/iframe.html?id=ui-jsonvisualizer-jsontree--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-jsonvisualizer-jsontree--display)

## Utilizzo

```tsx theme={null}
import { JsonTree } from 'twenty-ui/components/data-display';

export const RecordDetails = () => (
  <JsonTree
    value={{ name: 'Acme', active: true, contacts: [] }}
    emptyStringLabel="Empty text"
    emptyArrayLabel="No items"
    emptyObjectLabel="No properties"
    arrowButtonCollapsedLabel="Expand node"
    arrowButtonExpandedLabel="Collapse node"
  />
);
```

Ogni voce ha un `id`, un `label` e un `value` JSON. Usa le voci quando le etichette visualizzate differiscono dalle chiavi memorizzate. Per impostazione predefinita vengono espansi i livelli 0 e 1. Sostituisci `shouldExpandNodeInitially={({ depth }) => depth === 0}` per espandere solo la radice; l'espansione successiva è gestita da ciascun nodo.

`getNodeHighlighting(keyPath)` restituisce `blue`, `red`, `partial-blue` o `undefined`. `onNodeValueClick` riceve il testo visualizzato: i valori foglia come stringhe e l'etichetta vuota corrispondente per stringhe, array e oggetti vuoti. L'albero visualizza i dati e non li modifica.

Quando viene fornito `onNodeValueClick`, i valori sono pulsanti nativi denominati in base al testo visualizzato. Tab sposta lo stato attivo su un valore; Invio, Spazio o un clic del puntatore lo attivano. Senza il callback, i valori rimangono testo non interattivo. I pulsanti dei valori non inviano i moduli che li contengono.

## Props

**arrowButtonCollapsedLabel** `string` *required*

Accessible label for the expand control on a collapsed node.

**arrowButtonExpandedLabel** `string` *required*

Accessible label for the collapse control on an expanded node.

**emptyArrayLabel** `string` *required*

Display text for an empty array.

**emptyObjectLabel** `string` *required*

Display text for an empty object.

**emptyStringLabel** `string` *required*

Display text for an empty string.

**entries** `JsonTreeEntry[]`

Named entries with stable id, label, and JSON value fields. Supply entries or value, not both.

**getNodeHighlighting** `GetJsonNodeHighlighting`

Returns blue, red, or partial-blue highlighting for a node key path.

**onNodeValueClick** `((valueAsString: string) =\> void)`

Called with the clicked value as displayed: leaf values as strings, and the empty label for empty strings, arrays, and objects.

**shouldExpandNodeInitially** `((params: ShouldExpandNodeInitiallyProps) =\> boolean)` (default: (\{ depth }: ShouldExpandNodeInitiallyProps) =>
depth \<= 1)

Chooses initial expansion from the node keyPath and depth. The default expands the first two depths.

**value** `JsonValue`

JSON value to display. Supply value or entries, not both.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.