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

# التخطيط

> Define views, navigation menu items, and page layouts to shape how your app appears in Twenty.

Layout entities control how your app surfaces inside Twenty's UI — what lives in the sidebar, which saved views ship with the app, and how a record detail page is arranged.

## Layout concepts

| Concept                  | What it controls                                                                  | كيان                       |
| ------------------------ | --------------------------------------------------------------------------------- | -------------------------- |
| **View**                 | A saved list configuration for an object — visible fields, order, filters, groups | `defineView`               |
| **Navigation Menu Item** | An entry in the left sidebar that links to a view or an external URL              | `defineNavigationMenuItem` |
| **Page Layout**          | The tabs and widgets that make up a record's detail page                          | `definePageLayout`         |

Views, navigation items, and page layouts reference each other by `universalIdentifier`:

* A **navigation menu item** of type `VIEW` points at a `defineView` identifier, so the sidebar link opens that saved view.
* A **page layout** of type `RECORD_PAGE` targets an object and can embed [front components](/l/ar/developers/extend/apps/front-components) inside its tabs as widgets.

<AccordionGroup>
  <Accordion title="defineView" description="تعريف العروض المحفوظة للكائنات">
    العروض هي تكوينات محفوظة لكيفية عرض سجلات كائن ما — بما في ذلك الحقول المرئية وترتيبها وأي مرشّحات أو مجموعات مُطبَّقة. استخدم `defineView()` لتضمين عروض مُهيّأة مسبقًا مع تطبيقك:

    ```ts src/views/example-view.ts theme={null}
    import { defineView, ViewKey } from 'twenty-sdk/define';
    import { EXAMPLE_OBJECT_UNIVERSAL_IDENTIFIER } from '../objects/example-object';
    import { NAME_FIELD_UNIVERSAL_IDENTIFIER } from '../objects/example-object';

    export default defineView({
      universalIdentifier: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
      name: 'All example items',
      objectUniversalIdentifier: EXAMPLE_OBJECT_UNIVERSAL_IDENTIFIER,
      icon: 'IconList',
      key: ViewKey.INDEX,
      position: 0,
      fields: [
        {
          universalIdentifier: 'f926bdb7-6af7-4683-9a09-adbca56c29f0',
          fieldMetadataUniversalIdentifier: NAME_FIELD_UNIVERSAL_IDENTIFIER,
          position: 0,
          isVisible: true,
          size: 200,
        },
      ],
    });
    ```

    النقاط الرئيسية:

    * `objectUniversalIdentifier` يحدّد الكائن الذي ينطبق عليه هذا العرض.
    * `key` يحدّد نوع العرض (مثل `ViewKey.INDEX` لعرض القائمة الرئيسي).
    * `fields` يتحكّم في الأعمدة الظاهرة وترتيبها. يشير كل حقل إلى `fieldMetadataUniversalIdentifier`.
    * يمكنك أيضًا تعريف `filters` و`filterGroups` و`groups` و`fieldGroups` لمزيد من التكوينات المتقدمة.
    * `position` يتحكّم في الترتيب عند وجود عدة عروض لنفس الكائن.
  </Accordion>

  <Accordion title="defineNavigationMenuItem" description="تعريف روابط التنقل في الشريط الجانبي">
    تضيف عناصر قائمة التنقل إدخالات مخصّصة إلى الشريط الجانبي لمساحة العمل. استخدم `defineNavigationMenuItem()` للارتباط بالعروض أو عناوين URL خارجية أو الكائنات:

    ```ts src/navigation-menu-items/example-navigation-menu-item.ts theme={null}
    import { defineNavigationMenuItem, NavigationMenuItemType } from 'twenty-sdk/define';
    import { EXAMPLE_VIEW_UNIVERSAL_IDENTIFIER } from '../views/example-view';

    export default defineNavigationMenuItem({
      universalIdentifier: '9327db91-afa1-41b6-bd9d-2b51a26efb4c',
      name: 'example-navigation-menu-item',
      icon: 'IconList',
      color: 'blue',
      position: 0,
      type: NavigationMenuItemType.VIEW,
      viewUniversalIdentifier: EXAMPLE_VIEW_UNIVERSAL_IDENTIFIER,
    });
    ```

    النقاط الرئيسية:

    * `type` يحدّد إلى ماذا يرتبط عنصر القائمة: `NavigationMenuItemType.VIEW` لعرض محفوظ، أو `NavigationMenuItemType.LINK` لعنوان URL خارجي.
    * لروابط العروض، عيِّن `viewUniversalIdentifier`. لروابط خارجية، عيِّن `link`.
    * `position` يتحكّم في الترتيب ضمن الشريط الجانبي.
    * `icon` و`color` (اختياريان) يخصّصان المظهر.
  </Accordion>

  <Accordion title="definePageLayout" description="عرّف تخطيطات صفحات مخصّصة لعرض السجلات">
    تتيح لك تخطيطات الصفحات تخصيص مظهر صفحة تفاصيل السجل — ما الألسنة التي تظهر، وما الويدجتات داخل كل لسان، وكيف يتم ترتيبها. استخدم `definePageLayout()` لتضمين تخطيطات مخصّصة مع تطبيقك:

    ```ts src/page-layouts/example-record-page-layout.ts theme={null}
    import { definePageLayout, PageLayoutTabLayoutMode } from 'twenty-sdk/define';
    import { EXAMPLE_OBJECT_UNIVERSAL_IDENTIFIER } from '../objects/example-object';
    import { HELLO_WORLD_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER } from '../front-components/hello-world';

    export default definePageLayout({
      universalIdentifier: '203aeb94-6701-46d6-9af1-be2bbcc9e134',
      name: 'Example Record Page',
      type: 'RECORD_PAGE',
      objectUniversalIdentifier: EXAMPLE_OBJECT_UNIVERSAL_IDENTIFIER,
      tabs: [
        {
          universalIdentifier: '6ed26b60-a51d-4ad7-86dd-1c04c7f3cac5',
          title: 'Hello World',
          position: 50,
          icon: 'IconWorld',
          layoutMode: PageLayoutTabLayoutMode.CANVAS,
          widgets: [
            {
              universalIdentifier: 'aa4234e0-2e5f-4c02-a96a-573449e2351d',
              title: 'Hello World',
              type: 'FRONT_COMPONENT',
              configuration: {
                configurationType: 'FRONT_COMPONENT',
                frontComponentUniversalIdentifier:
                  HELLO_WORLD_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER,
              },
            },
          ],
        },
      ],
    });
    ```

    النقاط الرئيسية:

    * `type` يكون عادة `'RECORD_PAGE'` لتخصيص عرض التفاصيل لكائن محدّد.
    * `objectUniversalIdentifier` يحدّد الكائن الذي ينطبق عليه هذا التخطيط.
    * يُعرّف كل `tab` قسمًا من الصفحة مع `title` و`position` و`layoutMode` (`CANVAS` لتخطيط حرّ).
    * يمكن لكل `widget` داخل لسان أن يعرض مكوّنًا أماميًا أو قائمة علاقات أو أنواع ويدجت مدمجة أخرى.
    * `position` على الألسنة يتحكّم في ترتيبها. استخدم قيمًا أعلى (مثل 50) لوضع الألسنة المخصّصة بعد الألسنة المدمجة.
  </Accordion>
</AccordionGroup>