> ## 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

> استكشف قيم JSON باستخدام عُقد قابلة للتوسيع وتسميات مخصصة.

## نظرة عامة

يعرض `JsonTree` إما `value` بتنسيق JSON أو مصفوفة من `entries` المُسمّاة. مرر جميع تسميات القيم الفارغة والتوسيع/الطي لكي يتحكم تطبيقك في النص.

**Light**

[تفاصيل السجل القابلة للتوسيع (light)](https://storybook.twenty.com/iframe.html?id=ui-jsonvisualizer-jsontree--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[تفاصيل السجل القابلة للتوسيع (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)

## استخدام

```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"
  />
);
```

يحتوي كل إدخال على `id` و`label` و`value` بتنسيق JSON. استخدم الإدخالات عندما تختلف تسميات العرض عن المفاتيح المخزنة. يُوسّع الإعداد الافتراضي العمقين 0 و1. تجاوز `shouldExpandNodeInitially={({ depth }) => depth === 0}` لتوسيع الجذر فقط؛ ويكون التوسيع اللاحق مسؤولية كل عقدة.

تعيد `getNodeHighlighting(keyPath)` القيمة `blue` أو `red` أو `partial-blue` أو `undefined`. تتلقى `onNodeValueClick` النص المعروض: قيم الأوراق كسلاسل نصية، وتسمية القيمة الفارغة المطابقة للسلاسل النصية والمصفوفات والكائنات الفارغة. تعرض الشجرة البيانات ولا تعدّلها.

عند توفير `onNodeValueClick`، تكون القيم أزرارًا أصلية تُسمّى بالنص المعروض لها. ينقل Tab التركيز إلى قيمة؛ ويؤدي Enter أو Space أو النقر بالمؤشر إلى تنشيطها. من دون دالة الاستدعاء، تبقى القيم نصًا غير تفاعلي. لا ترسل أزرار القيم النماذج الحاوية.

## الإزاحة

**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.