User: {userId}
Record: {recordId ?? 'No record context'}
Component: {componentId}
);
};
export default defineFrontComponent({
universalIdentifier: 'b2c3d4e5-f6a7-8901-bcde-f23456789012',
name: 'record-info',
component: RecordInfo,
});
```
الخطافات المتاحة:
| الخطّاف | القيم المعادة | الوصف |
| --------------------------------------------- | ------------------ | ---------------------------------------------- |
| `useUserId()` | `string` أو `null` | معرّف المستخدم الحالي |
| `useRecordId()` | `string` أو `null` | معرّف السجل الحالي (عند وضعه على صفحة سجل) |
| `useFrontComponentId()` | `string` | معرّف مثيل هذا المكوّن |
| `useFrontComponentExecutionContext(selector)` | يختلف | الوصول إلى سياق التنفيذ الكامل عبر دالة محدِّد |
#### واجهة الاتصال مع المضيف
يمكن للمكوّنات الأمامية تشغيل التنقّل والنوافذ المنبثقة والإشعارات باستخدام دوال من `twenty-sdk`:
| دالة | الوصف |
| ----------------------------------------------- | ------------------------------ |
| `navigate(to, params?, queryParams?, options?)` | الانتقال إلى صفحة داخل التطبيق |
| `openSidePanelPage(params)` | فتح لوحة جانبية |
| `closeSidePanel()` | إغلاق اللوحة الجانبية |
| `openCommandConfirmationModal(params)` | عرض مربع حوار تأكيد |
| `enqueueSnackbar(params)` | عرض إشعار توست |
| `unmountFrontComponent()` | إلغاء تركيب المكوّن |
| `updateProgress(progress)` | تحديث مؤشّر التقدّم |
#### خيارات الأوامر
إضافة حقل `command` إلى `defineFrontComponent` تُسجِّل المكوّن في قائمة الأوامر (Cmd+K). إذا كانت قيمة `isPinned` هي `true`، فسيظهر أيضًا كزر إجراء سريع في الزاوية العلوية اليمنى من الصفحة.
| الحقل | مطلوب | الوصف |
| --------------------------------------- | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `universalIdentifier` | نعم | معرّف فريد ثابت للأمر |
| `التسمية` | نعم | التسمية الكاملة المعروضة في قائمة الأوامر (Cmd+K) |
| `shortLabel` | لا | تسمية أقصر تُعرَض على زر الإجراء السريع المثبّت |
| `أيقونة` | لا | اسم الأيقونة المعروض بجانب التسمية (مثل `'IconBolt'` و`'IconSend'`) |
| `isPinned` | لا | عند كونها `true`، يعرض الأمر كزر إجراء سريع في الزاوية العلوية اليمنى من الصفحة |
| `availabilityType` | لا | تتحكّم في مكان ظهور الأمر: `'GLOBAL'` (متاح دائمًا)، و`'RECORD_SELECTION'` (فقط عند تحديد سجلات)، أو `'FALLBACK'` (يُعرَض عند عدم تطابق أي أوامر أخرى) |
| `availabilityObjectUniversalIdentifier` | لا | تقييد الأمر بصفحات نوع كائن معيّن (مثل سجلات Company فقط) |
| `conditionalAvailabilityExpression` | لا | تعبير منطقي للتحكم ديناميكيًا في ما إذا كان الأمر مرئيًا (انظر أدناه) |
#### تعابير الإتاحة الشرطية
يتيح لك الحقل `conditionalAvailabilityExpression` التحكّم في وقت ظهور الأمر بناءً على سياق الصفحة الحالي. استورد متغيّرات ومشغّلات مضبوطة الأنواع من `twenty-sdk` لبناء التعابير:
```tsx
import {
defineFrontComponent,
pageType,
numberOfSelectedRecords,
objectPermissions,
everyEquals,
isDefined,
} from 'twenty-sdk';
export default defineFrontComponent({
universalIdentifier: '...',
name: 'bulk-action',
component: BulkAction,
command: {
universalIdentifier: '...',
label: 'Bulk Update',
availabilityType: 'RECORD_SELECTION',
conditionalAvailabilityExpression: everyEquals(
objectPermissions,
'canUpdateObjectRecords',
true,
),
},
});
```
**متغيّرات السياق** — تُمثّل الحالة الحالية للصفحة:
| المتغيّر | النوع | الوصف |
| ------------------------------ | ------------- | --------------------------------------------------------------- |
| `pageType` | `string` | نوع الصفحة الحالي (مثل `'RecordIndexPage'` و`'RecordShowPage'`) |
| `isInSidePanel` | `قيمة منطقية` | ما إذا كان المكوّن معروضًا في لوحة جانبية |
| `numberOfSelectedRecords` | `رقم` | عدد السجلات المحدّدة حاليًا |
| `isSelectAll` | `قيمة منطقية` | ما إذا كان "تحديد الكل" مفعّلًا |
| `selectedRecords` | `array` | كائنات السجلات المحدّدة |
| `favoriteRecordIds` | `array` | معرّفات السجلات المفضّلة |
| `objectPermissions` | `الكائن` | الأذونات الخاصة بنوع الكائن الحالي |
| `targetObjectReadPermissions` | `الكائن` | أذونات القراءة للكائن الهدف |
| `targetObjectWritePermissions` | `الكائن` | أذونات الكتابة للكائن الهدف |
| `featureFlags` | `الكائن` | أعلام الميزات المفعَّلة |
| `objectMetadataItem` | `الكائن` | بيانات التعريف لنوع الكائن الحالي |
| `hasAnySoftDeleteFilterOnView` | `قيمة منطقية` | ما إذا كان العرض الحالي يحتوي على مرشّح حذف منطقي |
**المُشغِّلات** — جمّع المتغيّرات في تعابير منطقية:
| المُشغِّل | الوصف |
| ----------------------------------- | -------------------------------------------------------------- |
| `isDefined(value)` | `true` إذا لم تكن القيمة null/undefined |
| `isNonEmptyString(value)` | `true` إذا كانت القيمة سلسلة غير فارغة |
| `includes(array, value)` | `true` إذا كانت المصفوفة تحتوي على القيمة |
| `includesEvery(array, prop, value)` | `true` إذا كانت خاصية كل عنصر تتضمن القيمة |
| `every(array, prop)` | `true` إذا كانت الخاصية تُقيَّم بصحّة في كل عنصر |
| `everyDefined(array, prop)` | `true` إذا كانت الخاصية معرّفة في كل عنصر |
| `everyEquals(array, prop, value)` | `true` إذا كانت الخاصية تساوي القيمة في كل عنصر |
| `some(array, prop)` | `true` إذا كانت الخاصية تُقيَّم بصحّة في عنصر واحد على الأقل |
| `someDefined(array, prop)` | `true` إذا كانت الخاصية معرّفة في عنصر واحد على الأقل |
| `someEquals(array, prop, value)` | `true` إذا كانت الخاصية تساوي القيمة في عنصر واحد على الأقل |
| `someNonEmptyString(array, prop)` | `true` إذا كانت الخاصية سلسلة غير فارغة في عنصر واحد على الأقل |
| `none(array, prop)` | `true` إذا كانت الخاصية تُقيَّم بخطأ في كل عنصر |
| `noneDefined(array, prop)` | `true` إذا كانت الخاصية غير معرّفة في كل عنصر |
| `noneEquals(array, prop, value)` | `true` إذا لم تكن الخاصية تساوي القيمة في أي عنصر |
#### الأصول العامة
يمكن للمكوّنات الأمامية الوصول إلى ملفات من دليل `public/` للتطبيق باستخدام `getPublicAssetUrl`:
```tsx
import { defineFrontComponent, getPublicAssetUrl } from 'twenty-sdk';
const Logo = () =>