Skip to main content
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

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
النقاط الرئيسية:
  • objectUniversalIdentifier يحدّد الكائن الذي ينطبق عليه هذا العرض.
  • key يحدّد نوع العرض (مثل ViewKey.INDEX لعرض القائمة الرئيسي).
  • fields يتحكّم في الأعمدة الظاهرة وترتيبها. يشير كل حقل إلى fieldMetadataUniversalIdentifier.
  • يمكنك أيضًا تعريف filters وfilterGroups وgroups وfieldGroups لمزيد من التكوينات المتقدمة.
  • position يتحكّم في الترتيب عند وجود عدة عروض لنفس الكائن.
تضيف عناصر قائمة التنقل إدخالات مخصّصة إلى الشريط الجانبي لمساحة العمل. استخدم defineNavigationMenuItem() للارتباط بالعروض أو عناوين URL خارجية أو الكائنات:
src/navigation-menu-items/example-navigation-menu-item.ts
النقاط الرئيسية:
  • type يحدّد إلى ماذا يرتبط عنصر القائمة: NavigationMenuItemType.VIEW لعرض محفوظ، أو NavigationMenuItemType.LINK لعنوان URL خارجي.
  • لروابط العروض، عيِّن viewUniversalIdentifier. لروابط خارجية، عيِّن link.
  • position يتحكّم في الترتيب ضمن الشريط الجانبي.
  • icon وcolor (اختياريان) يخصّصان المظهر.
تتيح لك تخطيطات الصفحات تخصيص مظهر صفحة تفاصيل السجل — ما الألسنة التي تظهر، وما الويدجتات داخل كل لسان، وكيف يتم ترتيبها. استخدم definePageLayout() لتضمين تخطيطات مخصّصة مع تطبيقك:
src/page-layouts/example-record-page-layout.ts
النقاط الرئيسية:
  • type يكون عادة 'RECORD_PAGE' لتخصيص عرض التفاصيل لكائن محدّد.
  • objectUniversalIdentifier يحدّد الكائن الذي ينطبق عليه هذا التخطيط.
  • يُعرّف كل tab قسمًا من الصفحة مع title وposition وlayoutMode (CANVAS لتخطيط حرّ).
  • يمكن لكل widget داخل لسان أن يعرض مكوّنًا أماميًا أو قائمة علاقات أو أنواع ويدجت مدمجة أخرى.
  • position على الألسنة يتحكّم في ترتيبها. استخدم قيمًا أعلى (مثل 50) لوضع الألسنة المخصّصة بعد الألسنة المدمجة.