الانتقال إلى المحتوى الرئيسي
تتحكّم كيانات التخطيط في كيفية ظهور تطبيقك داخل واجهة مستخدم Twenty — ما الذي يوجد في الشريط الجانبي، وأي العروض المحفوظة تأتي مع التطبيق، وكيف يتم ترتيب صفحة تفاصيل السجل.

مفاهيم التخطيط

المفهومما الذي يتحكّم فيهكيان
عرضتكوين قائمة محفوظة لكائن — الحقول المرئية، والترتيب، وعوامل التصفية، والمجموعاتdefineView
عنصر قائمة التنقّلعنصر في الشريط الجانبي الأيسر يرتبط بعرض أو بعنوان URL خارجيdefineNavigationMenuItem
تخطيط الصفحةعلامات التبويب وعناصر الواجهة التي تشكّل صفحة تفاصيل السجلdefinePageLayout
تشير العروض، وعناصر التنقّل، وتخطيطات الصفحات إلى بعضها البعض عبر universalIdentifier:
  • يشير عنصر قائمة التنقّل من النوع VIEW إلى معرّف defineView، بحيث يفتح رابط الشريط الجانبي ذلك العرض المحفوظ.
  • يستهدف تخطيط الصفحة من النوع RECORD_PAGE كائنًا ويمكنه تضمين مكوّنات الواجهة الأمامية داخل علامات التبويب الخاصة به بوصفها عناصر واجهة.
العروض هي تكوينات محفوظة لكيفية عرض سجلات كائن ما — بما في ذلك الحقول المرئية وترتيبها وأي مرشّحات أو مجموعات مُطبَّقة. استخدم 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) لوضع الألسنة المخصّصة بعد الألسنة المدمجة.