الانتقال إلى المحتوى الرئيسي

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.

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

ConceptWhat it controlsكيان
ViewA saved list configuration for an object — visible fields, order, filters, groupsdefineView
Navigation Menu ItemAn entry in the left sidebar that links to a view or an external URLdefineNavigationMenuItem
Page LayoutThe tabs and widgets that make up a record’s detail pagedefinePageLayout
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 inside its tabs as widgets.
العروض هي تكوينات محفوظة لكيفية عرض سجلات كائن ما — بما في ذلك الحقول المرئية وترتيبها وأي مرشّحات أو مجموعات مُطبَّقة. استخدم defineView() لتضمين عروض مُهيّأة مسبقًا مع تطبيقك:
src/views/example-view.ts
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 يتحكّم في الترتيب عند وجود عدة عروض لنفس الكائن.
تضيف عناصر قائمة التنقل إدخالات مخصّصة إلى الشريط الجانبي لمساحة العمل. استخدم defineNavigationMenuItem() للارتباط بالعروض أو عناوين URL خارجية أو الكائنات:
src/navigation-menu-items/example-navigation-menu-item.ts
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 (اختياريان) يخصّصان المظهر.
تتيح لك تخطيطات الصفحات تخصيص مظهر صفحة تفاصيل السجل — ما الألسنة التي تظهر، وما الويدجتات داخل كل لسان، وكيف يتم ترتيبها. استخدم definePageLayout() لتضمين تخطيطات مخصّصة مع تطبيقك:
src/page-layouts/example-record-page-layout.ts
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) لوضع الألسنة المخصّصة بعد الألسنة المدمجة.