i18n - docs translations (#22317)

Created by Github action

<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/22317?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->

Co-authored-by: github-actions <github-actions@twenty.com>
This commit is contained in:
github-actions[bot]
2026-06-29 17:12:55 +02:00
committed by GitHub
parent 1b2f2c71c3
commit 2de681da72
128 changed files with 1398 additions and 1398 deletions
+27 -27
View File
@@ -3968,7 +3968,7 @@
]
},
{
"tab": "User Guide",
"tab": "Manual do Usuário",
"groups": [
{
"group": "Visão Geral",
@@ -3990,7 +3990,7 @@
]
},
{
"group": "How-Tos",
"group": "Como-Tos",
"pages": [
"l/pt/user-guide/data-model/how-tos/create-custom-objects",
"l/pt/user-guide/data-model/how-tos/create-custom-fields",
@@ -4003,7 +4003,7 @@
]
},
{
"group": "Data Migration",
"group": "Migração de dados",
"icon": "cloud-arrow-up",
"pages": [
"l/pt/user-guide/data-migration/overview",
@@ -4018,7 +4018,7 @@
]
},
{
"group": "How-Tos",
"group": "Como-Tos",
"pages": [
"l/pt/user-guide/data-migration/how-tos/prepare-your-csv-files",
"l/pt/user-guide/data-migration/how-tos/import-companies-via-csv",
@@ -4035,7 +4035,7 @@
]
},
{
"group": "Calendar & Emails",
"group": "Calendário e E-mails",
"icon": "envelope",
"pages": [
"l/pt/user-guide/calendar-emails/overview",
@@ -4047,7 +4047,7 @@
]
},
{
"group": "How-Tos",
"group": "Como-Tos",
"pages": [
"l/pt/user-guide/calendar-emails/how-tos/connect-several-mailboxes-per-user",
"l/pt/user-guide/calendar-emails/how-tos/limit-emails-imported",
@@ -4079,10 +4079,10 @@
]
},
{
"group": "How-Tos",
"group": "Como-Tos",
"pages": [
{
"group": "CRM Automations",
"group": "Automações CRM",
"pages": [
"l/pt/user-guide/workflows/how-tos/crm-automations/send-email-alerts-with-tasks-due",
"l/pt/user-guide/workflows/how-tos/crm-automations/notify-teammates-of-note-to-review",
@@ -4095,7 +4095,7 @@
]
},
{
"group": "Connect to Other Tools",
"group": "Conectar a outras ferramentas",
"pages": [
"l/pt/user-guide/workflows/how-tos/connect-to-other-tools/set-up-a-webhook-trigger",
"l/pt/user-guide/workflows/how-tos/connect-to-other-tools/bring-typeform-submissions-in-twenty",
@@ -4105,7 +4105,7 @@
]
},
{
"group": "Advanced Configurations",
"group": "Configurações avançadas",
"pages": [
"l/pt/user-guide/workflows/how-tos/advanced-configurations/handle-arrays-in-code-actions"
]
@@ -4136,7 +4136,7 @@
]
},
{
"group": "How-Tos",
"group": "Como-Tos",
"pages": [
"l/pt/user-guide/ai/how-tos/ai-faq"
]
@@ -4194,7 +4194,7 @@
]
},
{
"group": "How-Tos",
"group": "Como-Tos",
"pages": [
"l/pt/user-guide/dashboards/how-tos/dashboards-faq",
"l/pt/user-guide/dashboards/how-tos/widget-faq"
@@ -4203,7 +4203,7 @@
]
},
{
"group": "Permissions & Access",
"group": "Permissões e Acesso",
"icon": "lock",
"pages": [
"l/pt/user-guide/permissions-access/overview",
@@ -4215,7 +4215,7 @@
]
},
{
"group": "How-Tos",
"group": "Como-Tos",
"pages": [
"l/pt/user-guide/permissions-access/how-tos/permissions-faq"
]
@@ -4235,7 +4235,7 @@
]
},
{
"group": "How-Tos",
"group": "Como-Tos",
"pages": [
"l/pt/user-guide/billing/how-tos/billing-faq"
]
@@ -4259,7 +4259,7 @@
]
},
{
"group": "How-Tos",
"group": "Como-Tos",
"pages": [
"l/pt/user-guide/settings/how-tos/settings-faq"
]
@@ -4352,7 +4352,7 @@
]
},
{
"group": "Self-Host",
"group": "Auto-Anfitrião",
"pages": [
"l/pt/developers/self-host/capabilities/docker-compose",
"l/pt/developers/self-host/capabilities/setup",
@@ -4361,7 +4361,7 @@
]
},
{
"group": "Contribute",
"group": "Contribuir",
"pages": [
"l/pt/developers/contribute/capabilities/local-setup",
"l/pt/developers/contribute/commands",
@@ -4402,7 +4402,7 @@
]
},
{
"tab": "User Guide",
"tab": "Ghid de utilizator",
"groups": [
{
"group": "Prezentare generală",
@@ -4437,7 +4437,7 @@
]
},
{
"group": "Data Migration",
"group": "Migrarea Datelor",
"icon": "cloud-arrow-up",
"pages": [
"l/ro/user-guide/data-migration/overview",
@@ -4469,7 +4469,7 @@
]
},
{
"group": "Calendar & Emails",
"group": "Calendar & E-mailuri",
"icon": "envelope",
"pages": [
"l/ro/user-guide/calendar-emails/overview",
@@ -4516,7 +4516,7 @@
"group": "How-Tos",
"pages": [
{
"group": "CRM Automations",
"group": "CRM Automate",
"pages": [
"l/ro/user-guide/workflows/how-tos/crm-automations/send-email-alerts-with-tasks-due",
"l/ro/user-guide/workflows/how-tos/crm-automations/notify-teammates-of-note-to-review",
@@ -4529,7 +4529,7 @@
]
},
{
"group": "Connect to Other Tools",
"group": "Conectează-te la alte instrumente",
"pages": [
"l/ro/user-guide/workflows/how-tos/connect-to-other-tools/set-up-a-webhook-trigger",
"l/ro/user-guide/workflows/how-tos/connect-to-other-tools/bring-typeform-submissions-in-twenty",
@@ -4539,7 +4539,7 @@
]
},
{
"group": "Advanced Configurations",
"group": "Configurații avansate",
"pages": [
"l/ro/user-guide/workflows/how-tos/advanced-configurations/handle-arrays-in-code-actions"
]
@@ -4637,7 +4637,7 @@
]
},
{
"group": "Permissions & Access",
"group": "Permisiuni & Acces",
"icon": "lock",
"pages": [
"l/ro/user-guide/permissions-access/overview",
@@ -4786,7 +4786,7 @@
]
},
{
"group": "Self-Host",
"group": "Autogazda",
"pages": [
"l/ro/developers/self-host/capabilities/docker-compose",
"l/ro/developers/self-host/capabilities/setup",
@@ -4795,7 +4795,7 @@
]
},
{
"group": "Contribute",
"group": "Contribuie",
"pages": [
"l/ro/developers/contribute/capabilities/local-setup",
"l/ro/developers/contribute/commands",
@@ -62,23 +62,23 @@ export const MyComponent = () => {
تجنب إعادة العرض في الميزات الجديدة أصبح سهلاً الآن عن طريق إزالتها على المستوى الجذري.
The `PageChangeEffect` sidecar component contains just one `useEffect` that holds all the logic to execute on a page change.
يحتوي المكون الجانبي "PageChangeEffect" على "useEffect" واحد فقط يحمل كل المنطق لتنفيذه على تغيير الصفحة.
بهذه الطريقة، تعرف أن هناك مكان واحد فقط يمكنه تحفيز إعادة العرض.
### Always think twice before adding `useEffect` in your codebase
### تفكير دائماً مرتين قبل إضافة `useEffect` في الرمز الخاص بك
Re-renders are often caused by unnecessary `useEffect`.
وكثيرا ما تكون عمليات إعادة التسليم ناجمة عن `فعالية الاستخدام` غير الضرورية.
You should think whether you need `useEffect`, or if you can move the logic in a event handler function.
يجب أن تفكر فيما إذا كنت بحاجة إلى \`useEffect'، أو إذا كنت تستطيع نقل المنطق في وظيفة معالج الأحداث.
You'll find it generally easy to move the logic in a `handleClick` or `handleChange` function.
ستجد أنه من السهل عموما نقل المنطق في دالة "handleClick" أو "handleChange".
يمكنك أيضًا العثور عليها في المكتبات مثل Apollo: `onCompleted`، `onError`، إلخ.
### Use a sibling component to extract `useEffect` or data fetching logic
### استخدم مكون أخت لاستخراج \`تأثير الاستخدام' أو منطق جلب البيانات
If you feel like you need to add a `useEffect` in your root component, you should consider extracting it in a sidecar component.
إذا كنت تشعر أنك بحاجة إلى إضافة 'useEffect' في مكون الجذر الخاص بك، فيجب عليك النظر في استخراجه في مكون جانبي.
يمكنك تطبيق نفس الشيء على منطق جلب البيانات، مع الخُطافات Apollo.
@@ -74,7 +74,7 @@ npx nx run twenty-front:storybook:coverage # (needs yarn storybook:serve:dev to
"[React Router](https://reactrouter.com/) يتعامل مع التوجيه."
To avoid unnecessary [re-renders](/l/ar/developers/contribute/capabilities/frontend-development/best-practices-front#managing-re-renders) all the routing logic is in a `useEffect` in `PageChangeEffect`.
لتجنب غير ضروري [re-renders](/l/ar/developers/contribute/capabilities/frontend-development/best-practices-front#managing-re-renders) كل منطق المسارات في 'useEffect' في 'PageChangeEffect'.
### "إدارة الحالة"
@@ -127,9 +127,9 @@ const MyDropdownComponent = ({ onClose }: { onClose: () => void }) => {
};
```
It's important to use this pattern when you're not sure that just using a useEffect with mount/unmount will be enough to avoid conflicts.
من المهم استخدام هذا النمط عندما لست متأكدا من أن استخدام تأثير الاستخدام مع التركيب/إلغاء التثبيت سيكون كافيا لتجنب الصراعات.
Those conflicts can be hard to debug, and it might happen more often than not with useEffects.
ويمكن أن يكون من الصعب تصحيح تلك الصراعات، وقد يحدث ذلك في كثير من الأحيان بآثار استعمالية.
## ما هو نطاق المفتاح؟
@@ -66,7 +66,7 @@ git config --global core.autocrlf false
#### أثناء تشغيل `npx nx start` أو `npx nx start twenty-front`، ظهرت خطأ نفاد الذاكرة
Run only the services you need, instead of `npx nx start`. على سبيل المثال، إذا كنت تعمل على الخادم، قم بتشغيل `npx nx worker twenty-server` فقط
تشغيل الخدمات التي تحتاجها فقط، بدلاً من 'npx nx start`. على سبيل المثال، إذا كنت تعمل على الخادم، قم بتشغيل `npx nx worker twenty-server\` فقط
**إذا لم يعمل ذلك:**
إذا حاولت تشغيل `npx nx run twenty-server:start` فقط على WSL وفشل مع خطأ الذاكرة أدناه:
@@ -40,10 +40,10 @@ export const MyComponent = () => {
| الخصائص | النوع | الوصف |
| ------------------ | ----------------------- | ---------------------------------------------------------------------- |
| linkToEntity | نص | الرابط إلى الكيان |
| ربطوكي | نص | الرابط إلى الكيان |
| معرف الكيان | نص | المعرف الفريد للكيان |
| الاسم | نص | اسم الكيان |
| رابط الصورة | نص | s picture", |
| رابط الصورة | نص | ص صورة،" |
| نوع الصورة الرمزية | نوع الصورة الرمزية | نوع الصورة الرمزية التي تريد عرضها. لديه خياران: `مستدير` و `مربع` |
| التنوع | تعداد EntityChipVariant | تنوع الرقاقة الكيانية التي ترغب في عرضها. لديه خياران: `عادي` و `شفاف` |
| الأيقونة اليسرى | مكون رمز | مكون React يمثل رمزًا. يظهر على الجانب الأيسر من الرقاقة |
@@ -139,10 +139,10 @@ export const MyComponent = () => {
| الخصائص | النوع | الوصف |
| ------------------ | ----------------------- | ---------------------------------------------------------------------- |
| linkToEntity | نص | الرابط إلى الكيان |
| ربطوكي | نص | الرابط إلى الكيان |
| معرف الكيان | نص | المعرف الفريد للكيان |
| الاسم | نص | اسم الكيان |
| رابط الصورة | نص | s picture", |
| رابط الصورة | نص | ص صورة،" |
| نوع الصورة الرمزية | نوع الصورة الرمزية | نوع الصورة الرمزية التي تريد عرضها. لديه خياران: `مستدير` و `مربع` |
| التنوع | تعداد EntityChipVariant | تنوع الرقاقة الكيانية التي ترغب في عرضها. لديه خياران: `عادي` و `شفاف` |
| الأيقونة اليسرى | مكون رمز | مكون React يمثل رمزًا. يظهر على الجانب الأيسر من الرقاقة |
@@ -13,7 +13,7 @@ icon: hand-pointer
<Tabs>
<Tab title="Usage">
<Tab title="الاستخدام">
```jsx
import { Button } from "@/ui/input/button/components/Button";
@@ -12,7 +12,7 @@ icon: palette
يمثل مخططات ألوان مختلفة ومخصص بشكل خاص للمواضيع الفاتحة والداكنة.
<Tabs>
<Tab title="Usage">
<Tab title="الاستخدام">
```jsx
import { ColorSchemeCard } from "twenty-ui/display";
@@ -1,12 +1,12 @@
---
title: Image Input
title: إدخال الصورة
---
<Frame>
<img src="/images/user-guide/objects/objects.png" alt="رأس الصفحة" />
</Frame>
Allows users to upload and remove an image.
يسمح للمستخدمين برفع وإزالة صورة.
<Tabs>
<Tab title="استخدام">
@@ -25,7 +25,7 @@ export const MyComponent = () => {
| الخصائص | النوع | الوصف |
| ------------ | ----------- | --------------------------------------------------------------------------------- |
| صورة | نص | The image source URL |
| صورة | نص | رابط مصدر الصورة |
| onUpload | دالة | الدالة التي تُستدعى عند قيام المستخدم بتحميل صورة جديدة. تستقبل كائن `File` كوسيط |
| onRemove | دالة | الدالة التي تُستدعى عند نقر المستخدم على زر الإزالة |
| onAbort | دالة | الدالة التي تُستدعى عند نقر المستخدم على زر الإلغاء أثناء تحميل الصورة |
@@ -12,7 +12,7 @@ title: نص
<Tabs>
<Tab title="Usage">
<Tab title="الاستخدام">
```jsx
import { TextInput } from "@/ui/input/components/TextInput";
@@ -12,7 +12,7 @@ icon: link
مكون رابط منمق لعرض معلومات الاتصال.
<Tabs>
<Tab title="Usage">
<Tab title="الاستخدام">
```jsx
import { BrowserRouter as Router } from 'react-router-dom';
@@ -8,10 +8,10 @@ description: تعرّف على تسعير Twenty وأدِر اشتراكك.
## ما الذي يتضمنه هذا القسم
<CardGroup cols={2}>
<Card title="خطط التسعير" icon="tags" href="/l/ar/user-guide/billing/capabilities/pricing-plans">
<Card title="خطط التسعير" icon="tags" href="/l/ar/user-guide/billing/القدرات/خطط التسعير">
تعرّف على خطط تسعير Twenty وما تتضمنه.
</Card>
<Card title="الأسئلة الشائعة" icon="circle-question" href="/l/ar/user-guide/billing/how-tos/billing-faq">
<Card title="الأسئلة الشائعة" icon="circle-question" href="/userer-guide/billing/how-tos/billing-faq">
أسئلة شائعة حول التسعير والفوترة.
</Card>
</CardGroup>
@@ -1,28 +1,28 @@
---
title: Calendar & Emails
description: Connect your email and calendar accounts to Twenty.
title: الرزنامة و رسائل البريد الإلكتروني
description: قم بتوصيل بريدك الإلكتروني وحسابات التقويم إلى عشرين حسابا.
---
## Connection Options
## خيارات الاتصال
### حساب Google (Gmail وتقويم Google)
1. اذهب إلى **الإعدادات → الحسابات**
2. انقر على **إضافة حساب**
3. Select **Continue with Google**
3. حدد **متابعة مع جوجل**
4. السماح لـ Twenty بالوصول إلى Gmail وتقويم Google الخاص بك
5. Configure email sync settings (visibility, auto-creation) → click **Next**
6. Configure calendar sync settings (visibility, auto-creation) → click **Add Account**
5. تكوين إعدادات مزامنة البريد الإلكتروني (الرؤية ، الإنشاء التلقائي) → انقر فوق **التالي**
6. تكوين إعدادات مزامنة التقويم (الرؤية ، الإنشاء التلقائي) → انقر فوق **إضافة حساب**
7. ستبدأ رسائل البريد الإلكتروني وفعاليات التقويم بالمزامنة تلقائيًا
### حساب Microsoft (Outlook وتقويم Microsoft)
1. اذهب إلى **الإعدادات → الحسابات**
2. انقر على **إضافة حساب**
3. Select **Continue with Microsoft**
3. حدد **متابعة مع مايكروسوفت**
4. السماح لـ Twenty بالوصول إلى Outlook وتقويم Microsoft الخاص بك
5. Configure email sync settings (visibility, auto-creation) → click **Next**
6. Configure calendar sync settings (visibility, auto-creation) → click **Add Account**
5. تكوين إعدادات مزامنة البريد الإلكتروني (الرؤية ، الإنشاء التلقائي) → انقر فوق **التالي**
6. تكوين إعدادات مزامنة التقويم (الرؤية ، الإنشاء التلقائي) → انقر فوق **إضافة حساب**
7. ستبدأ رسائل البريد الإلكتروني وفعاليات التقويم بالمزامنة تلقائيًا
### إعداد IMAP/SMTP/CalDAV (مزودون آخرون)
@@ -135,10 +135,10 @@ OUTBOUND_HTTP_SAFE_MODE_ENABLED=false
**التحديثات كل 5 دقائق**: تتم مزامنة البيانات البريدية والتقويمية تلقائيًا كل 5 دقائق بعد الاستيراد الأولي.
<Note>
**توقيت المزامنة الأولية**: يكتمل تزامن التقويم بسرعة (عادةً خلال دقائق)، بينما تستغرق مزامنة البريد الإلكتروني وقتاً أطول لصناديق البريد الكبيرة. يقوم Twenty باستيراد رسائل البريد الإلكتروني بمعدل يقارب **400 رسالة في الدقيقة** (محدود بتقييد المعدل من Gmail API)، لذا فإن صندوق بريد يحتوي على 10,000 رسالة يستغرق حوالي 25 دقيقة. Don't worry if you see contacts from calendar events appearing before your email contacts; this is normal behavior.
**توقيت المزامنة الأولية**: يكتمل تزامن التقويم بسرعة (عادةً خلال دقائق)، بينما تستغرق مزامنة البريد الإلكتروني وقتاً أطول لصناديق البريد الكبيرة. يقوم Twenty باستيراد رسائل البريد الإلكتروني بمعدل يقارب **400 رسالة في الدقيقة** (محدود بتقييد المعدل من Gmail API)، لذا فإن صندوق بريد يحتوي على 10,000 رسالة يستغرق حوالي 25 دقيقة. لا تقلق إذا كنت ترى جهات اتصال من أحداث التقويم تظهر قبل جهات الاتصال بالبريد الإلكتروني الخاص بك؛ هذا سلوك طبيعي.
</Note>
## الخطوات التالية
* [Mailbox capabilities](/l/ar/user-guide/calendar-emails/capabilities/mailbox)
* [Troubleshoot missing emails](/l/ar/user-guide/calendar-emails/how-tos/i-dont-see-emails-on-records)
* [قدرات صندوق البريد](/l/ar/user-guide/calendar-emails/capabilities/mailbox)
* [كشف الأخطاء في البريد الإلكتروني المفقودة](/l/ar/user-guide/calendar-emails/how-tos/i-dont-see-emails-on-records)
@@ -1,5 +1,5 @@
---
title: Dashboards FAQ
title: لوحة التحكم الأسئلة الشائعة
description: أسئلة شائعة حول لوحات القيادة في Twenty.
---
@@ -1,5 +1,5 @@
---
title: Migrating from Other CRMs
title: الترحيل من CRMs أخرى
description: دليل خطوة بخطوة لترحيل بياناتك من أي نظام لإدارة علاقات العملاء إلى Twenty.
---
@@ -1,5 +1,5 @@
---
title: Prepare Your CSV Files
title: إعداد ملفات CSV الخاصة بك
description: دليل كامل خطوة بخطوة لتنسيق بياناتك لاستيرادها إلى Twenty.
---
@@ -1,5 +1,5 @@
---
title: Data Migration
title: نقل البيانات
description: استيراد وتصدير بيانات CRM عبر ملفات CSV أو عبر API.
---
@@ -1,5 +1,5 @@
---
title: Create Relation Fields
title: إنشاء حقول العلاقة
description: دليل خطوة بخطوة لربط الكائنات باستخدام حقول العلاقة.
---
@@ -1,5 +1,5 @@
---
title: Customize Your Data Model
title: تخصيص نموذج البيانات الخاص بك
description: نظرة عامة على خيارات تخصيص نموذج البيانات.
---
@@ -1,5 +1,5 @@
---
title: Show Expected Amount in Your Pipeline
title: إظهار المبلغ المتوقع في خط الأنابيب
description: احسب واعرض قيم الصفقات الموزونة استنادًا إلى احتمال المرحلة.
---
@@ -138,7 +138,7 @@ Body: {{code.invoice}}
## ذات صلة
* [Generate a PDF from Twenty](/l/ar/user-guide/workflows/how-tos/connect-to-other-tools/generate-pdf-from-twenty) — attach generated PDFs to records
* [إنشاء PDF من عشرين سنتي](/l/ar/user-guide/workflows/how-tos/connect-to-other-tools/generate-pdf-from-twenty) - إرفاق ملفات PDFs التي تم إنشاؤها بالسجلات
* [مشغلات سير العمل](/l/ar/user-guide/workflows/capabilities/workflow-triggers)
* [إجراءات سير العمل](/l/ar/user-guide/workflows/capabilities/workflow-actions)
* [أتمتة Closed Won](/l/ar/user-guide/workflows/how-tos/crm-automations/closed-won-automations)
@@ -62,23 +62,23 @@ Pamatujte, že můžete **vždy** zabránit opakovanému renderování pochopen
Vyhýbání se překreslení v nových funkcích je nyní snadné tím, že je eliminujete na úrovni kořene.
The `PageChangeEffect` sidecar component contains just one `useEffect` that holds all the logic to execute on a page change.
Komponenta "PageChangeEffect" obsahuje pouze jeden "useEffect", který drží veškerou logiku pro provedení změny stránky.
Tímto způsobem víte, že existuje pouze jedno místo, které může spustit překreslování.
### Always think twice before adding `useEffect` in your codebase
### Vždy si dvakrát rozmyslete před přidáním `useEffect` do vaší kódové databáze
Re-renders are often caused by unnecessary `useEffect`.
Opakované renderování jsou často způsobeny zbytečným `useEffect`.
You should think whether you need `useEffect`, or if you can move the logic in a event handler function.
Měli byste si myslet, zda potřebujete `useEffect`, nebo zda můžete přesunout logiku ve funkci obsluhy událostí.
You'll find it generally easy to move the logic in a `handleClick` or `handleChange` function.
Pro vás je obecně snadné přesunout logiku do funkce `handleClick` nebo `handleChange`.
Můžete je také najít v knihovnách jako Apollo: `onCompleted`, `onError` atd.
### Use a sibling component to extract `useEffect` or data fetching logic
### Použij sourozeneckou komponentu k extrakci `useEffect` nebo logiky načítání dat
If you feel like you need to add a `useEffect` in your root component, you should consider extracting it in a sidecar component.
Pokud máte pocit, že potřebujete přidat `useEffect` do základní komponenty, měli byste zvážit její extrakci v postranním vozíku.
Stejný postup můžete aplikovat na logiku získávání dat pomocí Apollo hooks.
@@ -74,7 +74,7 @@ Projekt má čistý a jednoduchý stack s minimálním počtem šablonových kó
[React Router](https://reactrouter.com/) zajišťuje směrování.
To avoid unnecessary [re-renders](/l/cs/developers/contribute/capabilities/frontend-development/best-practices-front#managing-re-renders) all the routing logic is in a `useEffect` in `PageChangeEffect`.
Aby se předešlo zbytečné [re-renders](/l/cs/developers/contribute/capabilities/frontend-development/best-practices-front#managing-re-renders) ) je všechna směrovací logika v `useEffect` v `PageChangeEffect`.
### Správa stavu
@@ -127,9 +127,9 @@ const MyDropdownComponent = ({ onClose }: { onClose: () => void }) => {
};
```
It's important to use this pattern when you're not sure that just using a useEffect with mount/unmount will be enough to avoid conflicts.
Je důležité použít tento vzor, když si nejste jisti, že pouhé použití useEffect s připojením/odpojením bude stačit k tomu, aby se předešlo konfliktům.
Those conflicts can be hard to debug, and it might happen more often than not with useEffects.
Tyto konflikty mohou být těžko laditelné a může se to stát častěji než s useEffects.
## Co je to hotkey scope?
@@ -1,35 +1,35 @@
---
title: API
icon: plug
description: REST and GraphQL APIs generated from your workspace schema.
description: REST a GraphQL API generovaná z vašeho schématu pracovního prostoru.
---
import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
## Schema-per-tenant APIs
## API schéma pro jednotlivé nájemce
There is no static API reference for Twenty. Each workspace has its own schema — when you add a custom object (say `Invoice`), it immediately gets REST and GraphQL endpoints identical to built-in objects like `Company` or `Person`. The API is generated from the schema, so endpoints use your object and field names directly — no opaque IDs.
Pro dvacet není žádný static API odkaz. Každý pracovní prostor má své vlastní schéma — když přidáte vlastní objekt (řekněme `Invoice`), okamžitě získá REST a GraphQL koncové body shodné s vestavěnými objekty, jako je `Company` nebo `Person`. API je generováno z schématu, takže koncové body používají vaše názvy objektů a polí přímo žádné neprůhledné ID.
Your workspace-specific API documentation is available under **Settings → API & Webhooks** after creating an API key. It includes an interactive playground where you can execute real calls against your data.
Dokumentace API specifická pro pracovní prostor je dostupná v **Nastavení → API a Webhooks** po vytvoření API klíče. Obsahuje interaktivní hřiště, kde můžete uskutečňovat skutečné hovory proti svým datům.
## Two APIs
## Dvě API
**Core API** — `/rest/` and `/graphql/`
**Jádro API** — `/rest/` a `/graphql/`
CRUD on records: People, Companies, Opportunities, your custom objects. Query, filter, traverse relations.
CRUD v záznamech: Lidé, Společnosti, příležitosti, vaše vlastní objekty. Dotazy, filtry, pohybové vztahy.
**Metadata API** `/rest/metadata/` and `/metadata/`
**Metadata API** `/rest/metadata/` a `/metadata/`
Schema management: create/modify/delete objects, fields, and relations. This is how you programmatically change your data model.
Správa schémat: vytvořit/upravit/odstranit objekty, pole a vztahy. Takto programově změníte svůj datový model.
Both are available as REST and GraphQL. GraphQL adds batch upserts and the ability to traverse relations in a single query. Same underlying data either way.
Obojí je k dispozici jako REST a GraphQL. GraphQL přidává dávky a schopnost procházet vztahy v jediném dotazu. V každém případě stejné podkladové údaje.
## Base URLs
## Základní URL adresy
| Prostředí | Základní URL |
| ----------- | ------------------------- |
| Cloud | `https://api.twenty.com/` |
| Self-Hosted | `https://{your-domain}/` |
| Prostředí | Základní URL |
| -------------------- | ------------------------- |
| Cloud | `https://api.twenty.com/` |
| Samostatně hostované | `https://{your-domain}/` |
## Ověření
@@ -37,19 +37,19 @@ Both are available as REST and GraphQL. GraphQL adds batch upserts and the abili
Authorization: Bearer YOUR_API_KEY
```
Create an API key in **Settings → API & Webhooks → + Create key**. Copy it immediately — it's shown once. API klíče lze omezit na konkrétní roli v **Settings → Members → Roles → Assignment tab**, aby se omezilo, k čemu mají přístup.
Vytvořte API klíč v **Nastavení → API & Webhooks → + Vytvořit klíč**. Zkopírujte ji okamžitě - je to zobrazeno jednou. API klíče lze omezit na konkrétní roli v **Settings → Members → Roles → Assignment tab**, aby se omezilo, k čemu mají přístup.
<VimeoEmbed videoId="928786722" title="Vytvoření klíče API" />
For OAuth-based access (external apps acting on behalf of users), see [OAuth](/l/cs/developers/extend/oauth).
Pro přístup založený na OAuthu (externí aplikace jednající jménem uživatelů), viz [OAuth](/l/cs/developers/extend/oauth).
## Batch operations
## Provoz šarže
Both REST and GraphQL support batching up to 60 records per request — create, update, or delete. GraphQL also supports batch upsert (create-or-update in one call) using plural names like `CreateCompanies`.
Podpora REST i GraphQL dávkování až 60 záznamů pro každou žádost vytvořit, aktualizovat nebo smazat. GraphQL také podporuje dávkový náhled (create-or-update v jednom hovoru) pomocí plurálu jako je `CreateCompanies`.
## Rate limits
## Míra omezení
| Limit | Hodnota |
| ---------- | -------------------- |
| Requests | 100 per minute |
| Batch size | 60 záznamů na volání |
| Limit | Hodnota |
| -------------- | -------------------- |
| Požadavky | 100 za minutu |
| Velikost šarže | 60 záznamů na volání |
@@ -51,10 +51,10 @@ export const MyComponent = () => {
| varianta | řetězec | Vizualní stylová varianta tlačítka. Možnosti zahrnují `primární`, `sekundární` a `terciární` |
| velikost | řetězec | Velikost tlačítka. Má dvě možnosti: `malé` a `střední` |
| pozice | řetězec | Pozice tlačítka ve vztahu k jeho sourozencům. Možnosti zahrnují: `samostatné`, `levé`, `pravé` a `střední` |
| akcent | řetězec | Barva akcentu tlačítka. Options include: `default`, `blue`, and `danger` |
| akcent | řetězec | Barva akcentu tlačítka. Možnosti zahrnují: `default`, `blue`, a `danger` |
| brzy | booleovská hodnota | Indikuje, jestli je tlačítko označené jako "brzy" (například pro nadcházející funkce) |
| neaktivní | booleovská hodnota | Specifies whether the button is disabled or not |
| focus | booleovská hodnota | Určuje, zda tlačítko má zaměření |
| neaktivní | booleovská hodnota | Určuje, zda je tlačítko zakázáno nebo ne |
| ostření | booleovská hodnota | Určuje, zda tlačítko má zaměření |
| onClick | funkce | Funkce zpětného volání, která se spustí, když uživatel klikne na tlačítko |
@@ -127,13 +127,13 @@ export const MyComponent = () => {
<Tab title="Vlastnosti">
| Vlastnosti | Typ | Popis |
| ---------- | --------------- | ------------------------------------------------------------------------------------------------------------------ |
| varianta | řetězec | The visual style variant of the buttons within the group. Možnosti zahrnují `primární`, `sekundární` a `terciární` |
| velikost | řetězec | Velikost tlačítek ve skupině. Má dvě možnosti: `střední` a `malé` |
| akcent | textový řetězec | Barva akcentu tlačítek ve skupině. Options include `default`, `blue` and `danger` |
| className | řetězec | Volitelný název třídy pro dodatečné stylování |
| děti | ReactNode | Pole prvků React představující jednotlivá tlačítka ve skupině |
| Vlastnosti | Typ | Popis |
| ---------- | --------------- | ------------------------------------------------------------------------------------------- |
| varianta | řetězec | Vizuální styl tlačítek ve skupině. Možnosti zahrnují `primární`, `sekundární` a `terciární` |
| velikost | řetězec | Velikost tlačítek ve skupině. Má dvě možnosti: `střední` a `malé` |
| akcent | textový řetězec | Barva akcentu tlačítek ve skupině. Mezi možnosti patří `default`, `blue` a `danger` |
| className | řetězec | Volitelný název třídy pro dodatečné stylování |
| děti | ReactNode | Pole prvků React představující jednotlivá tlačítka ve skupině |
@@ -171,17 +171,17 @@ export const MyComponent = () => {
<Tab title="Vlastnosti">
| Vlastnosti | Typ | Popis |
| --------------- | --------------------- | ------------------------------------------------------------------------------------------------------ |
| className | řetězec | Volitelný název pro dodatečné stylování |
| Ikona | `React.ComponentType` | Volitelná komponenta ikony, která se zobrazuje v rámci tlačítka |
| název | řetězec | Textový obsah tlačítka |
| velikost | řetězec | Velikost tlačítka. Má dvě možnosti: `malé` a `střední` |
| pozice | řetězec | Pozice tlačítka ve vztahu k jeho sourozencům. Options include: `standalone`, `left`, `middle`, `right` |
| přidatStín | booleovská hodnota | Určuje, zda se má na tlačítko přidat stín |
| použítRozmazání | booleovská hodnota | Určuje, zda se má na tlačítko použít rozostření |
| neaktivní | booleovská hodnota | Determines whether the button is disabled |
| focus | booleovská hodnota | Indikuje, zda tlačítko má zaměření |
| Vlastnosti | Typ | Popis |
| --------------- | --------------------- | ---------------------------------------------------------------------------------------------------------- |
| className | řetězec | Volitelný název pro dodatečné stylování |
| Ikona | `React.ComponentType` | Volitelná komponenta ikony, která se zobrazuje v rámci tlačítka |
| název | řetězec | Textový obsah tlačítka |
| velikost | řetězec | Velikost tlačítka. Má dvě možnosti: `malé` a `střední` |
| pozice | řetězec | Pozice tlačítka ve vztahu k jeho sourozencům. Mezi možnosti patří: `standalone`, `left`, `middle`, `right` |
| přidatStín | booleovská hodnota | Určuje, zda se má na tlačítko přidat stín |
| použítRozmazání | booleovská hodnota | Určuje, zda se má na tlačítko použít rozostření |
| neaktivní | booleovská hodnota | Určuje, zda je tlačítko zakázáno |
| ostření | booleovská hodnota | Indikuje, zda tlačítko má zaměření |
@@ -283,8 +283,8 @@ export const MyComponent = () => {
| pozice | řetězec | Pozice tlačítka ve vztahu k jeho sourozencům. Možnosti zahrnují: `samostatné`, `levé`, `pravé` a `střední` |
| přidatStín | booleovská hodnota | Určuje, zda se má na tlačítko přidat stín |
| použítRozmazání | booleovská hodnota | Určuje, zda se má na tlačítko použít rozostření |
| neaktivní | booleovská hodnota | Determines whether the button is disabled |
| focus | booleovská hodnota | Indikuje, zda tlačítko má zaměření |
| neaktivní | booleovská hodnota | Určuje, zda je tlačítko zakázáno |
| ostření | booleovská hodnota | Indikuje, zda tlačítko má zaměření |
| onClick | funkce | Funkce zpětného volání, která se spustí, když uživatel klikne na tlačítko |
| jeAktivní | booleovská hodnota | Určuje, zda je tlačítko v aktivním stavu |
@@ -344,7 +344,7 @@ export const MyComponent = () => {
</Tabs>
## Light Button
## Tlačítko světla
<Tabs>
<Tab title="Použití">
@@ -377,10 +377,10 @@ export const MyComponent = () => {
| className | řetězec | Volitelný název pro dodatečné stylování |
| ikona | `React.ReactNode` | Ikona, kterou chcete zobrazit v tlačítku |
| název | řetězec | Textový obsah tlačítka |
| akcent | řetězec | Barva akcentu tlačítka. Options include: `secondary` and `tertiary` |
| akcent | řetězec | Barva akcentu tlačítka. Možnosti zahrnují: `sekundární` a `tertiary` |
| aktivní | booleovská hodnota | Určuje, zda je tlačítko v aktivním stavu |
| neaktivní | booleovská hodnota | Determines whether the button is disabled |
| focus | booleovská hodnota | Indikuje, zda tlačítko má zaměření |
| neaktivní | booleovská hodnota | Určuje, zda je tlačítko zakázáno |
| ostření | booleovská hodnota | Indikuje, zda tlačítko má zaměření |
| onClick | funkce | Funkce zpětného volání, která se spustí, když uživatel klikne na tlačítko |
@@ -390,7 +390,7 @@ export const MyComponent = () => {
</Tabs>
## Light Icon Button
## Tlačítko Světlé ikony
<Tabs>
<Tab title="Použití">
@@ -430,10 +430,10 @@ export const MyComponent = () => {
| Ikona | `React.ComponentType` | Volitelná komponenta ikony, která se zobrazuje v rámci tlačítka |
| název | řetězec | Textový obsah tlačítka |
| velikost | řetězec | Velikost tlačítka. Má dvě možnosti: `malé` a `střední` |
| akcent | řetězec | Barva akcentu tlačítka. Options include: `secondary` and `tertiary` |
| akcent | řetězec | Barva akcentu tlačítka. Možnosti zahrnují: `sekundární` a `tertiary` |
| aktivní | booleovská hodnota | Určuje, zda je tlačítko v aktivním stavu |
| neaktivní | booleovská hodnota | Determines whether the button is disabled |
| focus | booleovská hodnota | Indikuje, zda má tlačítko zaměření |
| neaktivní | booleovská hodnota | Určuje, zda je tlačítko zakázáno |
| ostření | booleovská hodnota | Indikuje, zda má tlačítko zaměření |
| onClick | funkce | Funkce zpětného volání, která se spustí, když uživatel klikne na tlačítko |
@@ -470,14 +470,14 @@ export const MyComponent = () => {
<Tab title="Vlastnosti">
| Vlastnosti | Typ | Popis |
| -------------------- | -------------------------------- | ---------------------------------------------------------------------------------- |
| název | řetězec | Textový obsah tlačítka |
| fullWidth | booleovská hodnota | Určuje, zda by tlačítko mělo zabírat celou šířku svého kontejneru |
| varianta | řetězec | Vizuální stylová varianta tlačítka. Options include `primary` and `secondary` |
| brzy | booleovská hodnota | Indikuje, zda je tlačítko označeno jako "brzy" (například pro nadcházející funkce) |
| Ikona | `React.ComponentType` | Volitelná komponenta ikony, která se zobrazuje v rámci tlačítka |
| React `button` props | `React.ComponentProps<'button'>` | All standard HTML button props are supported |
| Vlastnosti | Typ | Popis |
| ---------------------------- | -------------------------------- | ---------------------------------------------------------------------------------- |
| název | řetězec | Textový obsah tlačítka |
| plná šířka | booleovská hodnota | Určuje, zda by tlačítko mělo zabírat celou šířku svého kontejneru |
| varianta | řetězec | Vizuální stylová varianta tlačítka. Možnosti zahrnují `primární` a `sekundární` |
| brzy | booleovská hodnota | Indikuje, zda je tlačítko označeno jako "brzy" (například pro nadcházející funkce) |
| Ikona | `React.ComponentType` | Volitelná komponenta ikony, která se zobrazuje v rámci tlačítka |
| Reagovat `tlačítko` výklopky | `React.ComponentProps<'button'>` | Všechny podpěry HTML tlačítek jsou podporovány |
@@ -510,10 +510,10 @@ export const MyComponent = () => {
<Tab title="Vlastnosti">
| Vlastnosti | Typ | Popis |
| -------------------- | ----------------------------------------------- | ----- |
| Ikona | `React.ComponentType` | |
| React `button` props | `React.ButtonHTMLAttributes<HTMLButtonElement>` | |
| Vlastnosti | Typ | Popis |
| ---------------------------- | ----------------------------------------------- | ----- |
| Ikona | `React.ComponentType` | |
| Reagovat `tlačítko` výklopky | `React.ButtonHTMLAttributes<HTMLButtonElement>` | |
@@ -35,7 +35,7 @@ export const MyComponent = () => {
| Vlastnosti | Typ | Popis | Výchozí |
| ---------------- | --------------------------------------- | ------------------------------------------------------------------------------ | ------- |
| varianta | řetězec | Varianta barevného schématu. Možnosti zahrnují `Tmavý`, `Světlý` a `Systémový` | světlý |
| vybráno | booleovská hodnota | If `true`, displays a checkmark to indicate the selected color scheme | |
| vybráno | booleovská hodnota | Pokud 'true' zobrazí zaškrtnutí pro označení vybraného barevného schématu | |
| další vlastnosti | `React.ComponentPropsWithoutRef<'div'>` | Standardní vlastnosti HTML `div` elementu | |
@@ -50,13 +50,13 @@ export const MyComponent = () => {
| --------------- | ---------------------- | ---------------------------------------------------------------------------------- |
| styl | Vlastnosti `React.CSS` | Další inline styly pro komponentu |
| className | řetězec | Volitelná CSS třída pro další stylování |
| zaškrtnuté | booleovská hodnota | Indicates whether the radio button is checked |
| zaškrtnuté | booleovská hodnota | Označuje, zda je zaškrtnuto rádiové tlačítko |
| hodnota | řetězec | Označení nebo text spojený s radiobuttonem |
| onChange | funkce | The function called when the selected radio button is changed |
| onCheckedChange | funkce | The function called when the `checked` state of the radio button changes |
| onChange | funkce | Funkce volaná při změně vybraného přepínače |
| onCheckedChange | funkce | Funkce volaná, když se změní stav tlačítka "zaškrtnuto" |
| velikost | řetězec | Velikost radiobuttonu. Možnosti zahrnují: `velký` a `malý` |
| neaktivní | booleovská hodnota | If `true`, the radio button is disabled and not clickable |
| labelPosition | řetězec | Pozice textu označení vzhledem k radiobuttonu. Má dvě možnosti: `vlevo` a `vpravo` |
| neaktivní | booleovská hodnota | Pokud je 'pravda', rádiové tlačítko je zakázáno a nelze kliknout |
| Pozice štítku | řetězec | Pozice textu označení vzhledem k radiobuttonu. Má dvě možnosti: `vlevo` a `vpravo` |
@@ -64,9 +64,9 @@ export const MyComponent = () => {
</Tab>
</Tabs>
## Radio Group
## Rozhlasová skupina
Groups together related radio buttons.
Skupiny společně související rádiová tlačítka.
<Tabs>
<Tab title="Použití">
@@ -98,12 +98,12 @@ export const MyComponent = () => {
<Tab title="Vlastnosti">
| Vlastnosti | Typ | Popis |
| --------------- | ----------------- | ---------------------------------------------------------------------------------- |
| hodnota | řetězec | Hodnota aktuálně vybraného radiobuttonu |
| onChange | funkce | The callback function triggered when the radio button is changed |
| přiZměněHodnoty | funkce | Funkce spouštěná při změně vybrané hodnoty ve skupině. |
| děti | `React.ReactNode` | Allows you to pass React components (such as Radio) as children to the Radio Group |
| Vlastnosti | Typ | Popis |
| --------------- | ----------------- | ------------------------------------------------------------------------------ |
| hodnota | řetězec | Hodnota aktuálně vybraného radiobuttonu |
| onChange | funkce | Funkce zpětného volání spuštěná při změně rádiového tlačítka |
| přiZměněHodnoty | funkce | Funkce spouštěná při změně vybrané hodnoty ve skupině. |
| děti | `React.ReactNode` | Umožňuje předávat React komponenty (např. Radio) jako potomky do skupiny rádií |
@@ -16,11 +16,11 @@ Pokud chcete hostovat sami a potřebujete prémiové funkce (SSO a oprávnění
Prémiové funkce jsou dostupné pouze v plánech Organization (Cloud nebo Self-Hosted):
* **Integrace SSO**: Jednotné přihlášení s vaším poskytovatelem identity
* **Oprávnění na úrovni řádků**: Jemně granulované řízení přístupu na úrovni záznamu
* **AI usage data**: Track AI consumption across the workspace
* **AI využití data**: Sledovat spotřebu AI v pracovním prostoru
</Accordion>
<Accordion title="Is Organization plan on cloud and Organization plan on self-hosted the same?">
They offer the same premium features. However, a cloud subscription cannot be used for self-hosted deployments. Self-hosted requires an Enterprise key.
<Accordion title="Plánuje organizace na mraky a plán Organizace na totéž?">
Nabízejí stejné prémiové funkce. Předplatné cloudu však nelze použít pro vlastní hostované nasazení. Samostatně hostované potřebují klíč Enterprise.
</Accordion>
<Accordion title="Nabízíte volná místa pro uživatele pouze s přístupem ke čtení?">
@@ -1,5 +1,5 @@
---
title: Restrict Access to Your View
title: Omezit přístup k vašemu zobrazení
description: Ovládejte, kdo může vidět vaše vlastní zobrazení.
---
@@ -256,7 +256,7 @@ Spouští vlastní JavaScript ve vašem pracovním postupu.
* Testovat kód přímo ve kroku
<Note>
Pokud potřebujete ve svém kódu použít externí klíče API, musíte je zadat přímo do těla funkce. You cannot configure API keys elsewhere and reference them in the logic function.
Pokud potřebujete ve svém kódu použít externí klíče API, musíte je zadat přímo do těla funkce. Nelze nakonfigurovat API klíče jinde a odkazovat na ně v logic funkci.
</Note>
<Tip>
@@ -1,5 +1,5 @@
---
title: Workflow Versions
title: Verze pracovního postupu
description: Spravujte verze a koncepty pracovních postupů.
---
@@ -62,23 +62,23 @@ Beachten Sie, dass Sie **immer** Re-Renderings vermeiden können, indem Sie dere
Das Vermeiden von Re-Renderings in neuen Funktionen wird jetzt erleichtert, indem sie auf Root-Ebene eliminiert werden.
The `PageChangeEffect` sidecar component contains just one `useEffect` that holds all the logic to execute on a page change.
Die `PageChangeEffect`-Sidecar-Komponente enthält nur einen `useEffect`-Hook, der die gesamte Logik für den Seitenwechsel enthält.
Auf diese Weise wissen Sie, dass es nur einen Ort gibt, der ein Re-Rendering auslösen kann.
### Always think twice before adding `useEffect` in your codebase
### Denken Sie immer zweimal nach, bevor Sie `useEffect` in Ihre Codebasis aufnehmen.
Re-renders are often caused by unnecessary `useEffect`.
Re-Renderings werden oft durch unnötige `useEffect`-Verwendungen verursacht.
You should think whether you need `useEffect`, or if you can move the logic in a event handler function.
Sie sollten überlegen, ob Sie `useEffect` benötigen oder ob Sie die Logik in eine Event-Handler-Funktion verschieben können.
You'll find it generally easy to move the logic in a `handleClick` or `handleChange` function.
Es ist in der Regel einfach, die Logik in eine `handleClick` oder `handleChange`-Funktion zu verschieben.
Sie können sie auch in Bibliotheken wie Apollo finden: `onCompleted`, `onError`, usw.
### Use a sibling component to extract `useEffect` or data fetching logic
### Verwenden Sie eine Geschwisterkomponente, um `useEffect`- oder Datenabruf-Logik auszulagern.
If you feel like you need to add a `useEffect` in your root component, you should consider extracting it in a sidecar component.
Wenn Sie das Gefühl haben, Ihrer Root-Komponente einen `useEffect` hinzufügen zu müssen, sollten Sie erwägen, ihn in eine Sidecar-Komponente auszulagern.
Dasselbe können Sie auch für die Datenabruflogik mit Apollo-Hooks anwenden.
@@ -74,7 +74,7 @@ Das Projekt hat einen sauberen und einfachen Stack mit minimalem Boilerplate-Cod
[React Router](https://reactrouter.com/) übernimmt das Routing.
To avoid unnecessary [re-renders](/l/de/developers/contribute/capabilities/frontend-development/best-practices-front#managing-re-renders) all the routing logic is in a `useEffect` in `PageChangeEffect`.
Um unnötige [re-renders](/l/de/developers/contribute/capabilities/frontend-development/best-practices-front#managing-re-renders) zu vermeiden, befindet sich die gesamte Routing-Logik in einem `useEffect` in `PageChangeEffect`.
### Zustandsverwaltung
@@ -127,9 +127,9 @@ const MyDropdownComponent = ({ onClose }: { onClose: () => void }) => {
};
```
It's important to use this pattern when you're not sure that just using a useEffect with mount/unmount will be enough to avoid conflicts.
Es ist wichtig, dieses Muster zu verwenden, wenn du nicht sicher bist, dass die Verwendung eines useEffect mit mount/unmount ausreicht, um Konflikte zu vermeiden.
Those conflicts can be hard to debug, and it might happen more often than not with useEffects.
Diese Konflikte können schwer zu debuggen sein, und es kann öfter passieren, als nicht mit useEffects.
## Was ist ein Tastenkombinationsbereich?
@@ -48,16 +48,16 @@ export const MyComponent = () => {
<Tab title="Eigenschaften">
| Props | Typ | Beschreibung |
| -------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| className | Zeichenkette | Optionaler Name für zusätzliche Stile |
| Beschriftung | Zeichenkette | Stellt die Beschriftung für das Eingabefeld dar |
| onChange | function | Die Funktion, die aufgerufen wird, wenn sich der Eingabewert ändert |
| volle Breite | boolesch | Gibt an, ob die Eingabe 100 % der Breite einnehmen soll |
| disableHotkeys | boolesch | Gibt an, ob Hotkeys für die Eingabe aktiviert sind |
| fehler | Zeichenkette | Stellt die Fehlermeldung dar, die angezeigt werden soll. Wenn vorhanden, wird auch ein Fehler-Icon auf der rechten Seite des Eingabefelds angezeigt |
| onKeyDown | Funktion | Wird aufgerufen, wenn eine Taste gedrückt gehalten wird, während das Eingabefeld fokussiert ist. Erhält ein `React.KeyboardEvent` als Argument |
| RightIcon | Icon-Komponente | Eine optionale Ikonenkomponente, die auf der rechten Seite des Eingabefelds angezeigt wird |
| Props | Typ | Beschreibung |
| -------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| className | Zeichenkette | Optionaler Name für zusätzliche Stile |
| Beschriftung | Zeichenkette | Stellt die Beschriftung für das Eingabefeld dar |
| onChange | function | Die Funktion, die aufgerufen wird, wenn sich der Eingabewert ändert |
| volle Breite | boolesch | Gibt an, ob die Eingabe 100 % der Breite einnehmen soll |
| deaktivierte Hotkeys | boolesch | Gibt an, ob Hotkeys für die Eingabe aktiviert sind |
| fehler | Zeichenkette | Stellt die Fehlermeldung dar, die angezeigt werden soll. Wenn vorhanden, wird auch ein Fehler-Icon auf der rechten Seite des Eingabefelds angezeigt |
| onKeyDown | Funktion | Wird aufgerufen, wenn eine Taste gedrückt gehalten wird, während das Eingabefeld fokussiert ist. Erhält ein `React.KeyboardEvent` als Argument |
| Rechtes Icon | Icon-Komponente | Eine optionale Ikonenkomponente, die auf der rechten Seite des Eingabefelds angezeigt wird |
@@ -103,11 +103,11 @@ export const MyComponent = () => {
| Props | Typ | Beschreibung |
| ----------- | ------------ | ---------------------------------------------------------------------------------------- |
| onValidate | Funktion | Die Callback-Funktion, die Sie auslösen möchten, wenn der Benutzer die Eingabe validiert |
| minRows | nummer | Die minimale Anzahl von Zeilen für den Textbereich |
| minzeilen | nummer | Die minimale Anzahl von Zeilen für den Textbereich |
| Platzhalter | Zeichenkette | Der Platzhaltertext, den Sie anzeigen möchten, wenn der Textbereich leer ist |
| onFocus | Funktion | Die Callback-Funktion, die Sie auslösen möchten, wenn der Textbereich den Fokus erlangt |
| onFokus | Funktion | Die Callback-Funktion, die Sie auslösen möchten, wenn der Textbereich den Fokus erlangt |
| Variante | Zeichenkette | Die Variante der Eingabe. Optionen umfassen: `Standard`, `Ikone` und `Schaltfläche` |
| buttonTitle | Zeichenkette | Der Titel für die Schaltfläche (nur für die Schaltflächenvariante anwendbar) |
| tastentitel | Zeichenkette | Der Titel für die Schaltfläche (nur für die Schaltflächenvariante anwendbar) |
| wert | Zeichenkette | Der Initialwert für den Textbereich |
@@ -149,7 +149,7 @@ export const MyComponent = () => {
| Props | Typ | Beschreibung |
| ----------- | ------------ | ---------------------------------------------------------------------------- |
| deaktiviert | boolesch | Gibt an, ob der Textbereich deaktiviert ist |
| minRows | nummer | Minimale Anzahl sichtbarer Zeilen für den Textbereich. |
| minzeilen | nummer | Minimale Anzahl sichtbarer Zeilen für den Textbereich. |
| onChange | Funktion | Rückruffunktion wird ausgelöst, wenn sich der Inhalt des Textbereichs ändert |
| Platzhalter | Zeichenkette | Platzhaltertext, der angezeigt wird, wenn der Textbereich leer ist |
| wert | Zeichenkette | Der aktuelle Wert des Textbereichs |
@@ -29,7 +29,7 @@ export const MyComponent = () => {
| ------------- | ------------ | -------------------------------------------------------------------------------------------------------- | ------------ |
| wert | boolesch | Der aktuelle Zustand des Umschalters | `falsch` |
| onChange | Funktion | Callback-Funktion, die ausgelöst wird, wenn sich der Umschaltzustand ändert | |
| farbe | Zeichenkette | Farbe des Umschalters, wenn er | s blue color |
| farbe | Zeichenkette | Farbe des Umschalters, wenn er | s blau Farbe |
| ToggleSize | Zeichenkette | Größe des Umschalters, beeinflusst sowohl Höhe als auch Gewicht. Hat zwei Optionen: `klein` und `mittel` | mittel |
@@ -1,5 +1,5 @@
---
title: Permissions & Access Control
title: Berechtigungen & Zugriffskontrolle
description: Steuern Sie, auf welche Daten KI-Agenten in Ihrem Arbeitsbereich zugreifen und was sie dort ändern können.
---
@@ -1,5 +1,5 @@
---
title: Prepare Your CSV Files
title: CSV-Dateien vorbereiten
description: Vollständige Schritt-für-Schritt-Anleitung zum Formatieren deiner Daten für den Import in Twenty.
---
@@ -1,5 +1,5 @@
---
title: Restrict Access to Your View
title: Zugriff auf Ihre Ansicht beschränken
description: Steuern Sie, wer Ihre benutzerdefinierten Ansichten sehen kann.
---
@@ -1,5 +1,5 @@
---
title: Show Expected Amount in Your Pipeline
title: Erwarteter Betrag in Ihrer Pipeline anzeigen
description: Gewichtete DealWerte basierend auf der Phasenwahrscheinlichkeit berechnen und anzeigen.
---
@@ -135,7 +135,7 @@ Sie können Dateien an E-Mails anhängen, die von Workflows gesendet werden. Der
| **Veranstaltungsbestätigungen** | Veranstaltungsdetails oder Agenda |
<Note>
Anhänge sind statisch—dieselbe Datei wird an alle Empfänger gesendet. For dynamic documents (like personalized quotes), generate and attach files using a [Logic Function](/l/de/user-guide/workflows/how-tos/connect-to-other-tools/generate-pdf-from-twenty).
Anhänge sind statisch—dieselbe Datei wird an alle Empfänger gesendet. Für dynamische Dokumente (wie personalisierte Anführungszeichen), generieren und fügen Sie Dateien mit einer [Logic Funktion](/l/de/user-guide/workflows/how-tos/connect-to-other-tools/generate-pdf-from-twenty).
</Note>
## Beste Praktiken
@@ -96,150 +96,150 @@ Erstellt einen neuen Datensatz oder aktualisiert einen vorhandenen anhand von Ü
* Verwenden Sie Daten aus vorherigen Schritten, um Felder zu füllen
**How it works**:
**So funktioniert**:
1. Searches for a record matching your criteria
2. If found → updates the existing record
3. If not found → creates a new record
1. Sucht nach einem Datensatz, der Ihren Kriterien entspricht
2. Wenn gefundenAktualisiere den vorhandenen Eintrag
3. Wenn nicht gefundenErstelle einen neuen Datensatz
**Output**: The created or updated record data is available for use in subsequent steps.
**Ausgabe**: Die erstellten oder aktualisierten Datensatzdaten sind für die Verwendung in folgenden Schritten verfügbar.
## Flow Actions
## Flow-Aktionen
### Iterator
**Loops through an array of records** returned from a previous step, allowing you to perform actions on each record individually.
**Schleppt sich durch ein Array von Datensätzen** aus einem vorherigen Schritt, so dass du Aktionen auf jedem Datensatz einzeln ausführen kannst.
**Konfiguration**:
* Select the array of records from a previous step (e.g., results from Search Records, from a Manual trigger with Bulk availability, from a code node)
* Wählen Sie ein Array von Datensätzen aus einem vorherigen Schritt (z.B. Ergebnisse von Suchdatensätzen, aus einem manuellen Trigger mit Bulk-Verfügbarkeit, von einem Codeknoten)
* Definieren Sie die Aktionen, die für jeden Datensatz in der Schleife ausgeführt werden sollen.
<Note>
- You can add several actions within an iterator.
- When using branches inside an iterator, make sure the last step of each branch connects back to the iterator to close the loop.
- Sie können mehrere Aktionen innerhalb eines Iterators hinzufügen.
- Wenn Sie Zweige innerhalb eines Iterators verwenden, stellen Sie sicher, dass sich der letzte Schritt jedes Zweiges mit dem Iterator verbindet, um die Schleife zu schließen.
</Note>
* Access `Current Item` Fields: to use fields from the record currently being processed, click on the **Iterator** step, then select **Current item**. The list of available fields from that record will be displayed and can be selected for use in subsequent actions.
* Zugriff auf `Aktuelle Item` Felder: Um Felder aus dem aktuell verarbeiteten Datensatz zu verwenden, klicke auf den **Iterator** Schritt, dann wähle **Aktuelles Iterator**. Die Liste der verfügbaren Felder aus diesem Datensatz wird angezeigt und kann für die Verwendung in folgenden Aktionen ausgewählt werden.
<VimeoEmbed videoId="1146577247" title="Video demonstration" />
<VimeoEmbed videoId="1146577247" title="Video-Demo" />
### Filter
Filters records based on specified conditions, allowing only records that meet the criteria to pass through.
Filtert Datensätze basierend auf bestimmten Bedingungen, so dass nur Datensätze, die die Kriterien erfüllen, durchlaufen können.
**Konfiguration**:
* Select the record to filter
* Datensatz zum filtern auswählen
* Definieren Sie Filterbedingungen und Kriterien
* Konfigurieren Sie, welche Datensätze in nachfolgende Schritte übergehen sollen
<Note>
1. **Output**: Filter nodes don't return data—they act as gates. If the conditions are met, the workflow continues. If not, the workflow stops at that branch.
2. The `IS` operator can be used with numeric fields. It performs as an `EQUAL`.
1. **Ausgabe**: Filterknoten geben keine Daten zurück sie fungieren als Tore. Wenn die Bedingungen erfüllt sind, geht der Workflow weiter. Wenn nicht, stoppt der Workflow an diesem Zweig.
2. Der "IS"-Operator kann mit numerischen Feldern verwendet werden. Es spielt als "EQUAL".
</Note>
### Delay
### Verzögerung
Pauses workflow execution for a specified duration or until a specific date/time.
Behebt Workflow-Ausführung für eine bestimmte Dauer oder bis zu einem bestimmten Datum/Zeitpunkt.
**Delay Types**:
**Verzögerungstypen**:
| Typ | Beschreibung |
| ------------------ | ------------------------------------------------------------------ |
| **Duration** | Wait for a specific amount of time (days, hours, minutes, seconds) |
| **Scheduled Date** | Wait until a specific date and time |
| Typ | Beschreibung |
| ------------------- | ---------------------------------------------------------------- |
| **Dauer** | Warte auf eine bestimmte Zeit (Tage, Stunden, Minuten, Sekunden) |
| **Geplantes Datum** | Warten Sie bis zu einem bestimmten Datum und Zeit |
**Configuration for Duration**:
**Konfiguration für Dauern**:
* Set days, hours, minutes, and/or seconds
* Combine multiple units (e.g., 2 days and 4 hours)
* Tage, Stunden, Minuten und/oder Sekunden festlegen
* Mehrere Einheiten kombinieren (z. B. 2 Tage und 4 Stunden)
**Configuration for Scheduled Date**:
**Konfiguration für geplantes Datum**:
* Select a date and time
* Can reference a date field from a previous step (e.g., follow up 3 days after a meeting)
* Datum und Uhrzeit auswählen
* Kann ein Datumsfeld aus einem vorherigen Schritt referenzieren (z.B. 3 Tage nach einer Besprechung)
**Anwendungsfälle**:
* Wait 24 hours before sending a follow-up email
* Pause until an opportunity's close date
* Schedule actions for business hours
* Warten Sie 24 Stunden bevor Sie eine Nachfass-E-Mail senden
* Pause bis zum Enddatum einer Gelegenheit
* Aufgaben für Geschäftszeiten planen
<Note>
The scheduled date cannot be in the past. If a date field from a previous step is used and the date has already passed, the workflow will fail.
Das geplante Datum kann nicht in der Vergangenheit sein. Wenn ein Datumsfeld aus einem vorherigen Schritt verwendet wird und das Datum bereits abgelaufen ist, wird der Workflow fehlschlagen.
</Note>
**Limits & Credits**:
* **No maximum duration limit**—you can set delays of minutes, days, weeks, or longer
* **1 credit consumed** when the Delay node executes, regardless of duration
* **No credits consumed** while waiting—a 5-minute delay costs the same as a 5-day delay
* **Kein maximales Zeitlimit** - Du kannst Verzögerungen von Minuten, Tage, Wochen oder länger einstellen
* **1 Credits verbraucht** wenn der Delay Knoten ausgeführt wird, unabhängig von der Dauer
* **Kein Guthaben verbraucht** während des Wartens - eine 5-minütige Verzögerung kostet dasselbe wie eine 5-tägige Verzögerung
## Communication Actions
## Kommunikationsaktionen
### E-Mail senden
Sendet eine E-Mail aus Ihrem Workflow. This is great for templated group emails. Emails will look like the ones you send from your mailbox.
Not suited for newsletters (which require richer formatting) or automated email sequences.
Sendet eine E-Mail aus Ihrem Workflow. Dies ist ideal für vordefinierte Gruppenmails. E-Mails werden so aussehen, wie sie von Ihrem Postfach gesendet werden.
Nicht geeignet für Newsletter (die eine umfassendere Formatierung erfordern) oder für automatisierte E-Mail-Sequenzen.
**Prerequisites**: Add an email account in Settings → Accounts
**Voraussetzungen**: Fügen Sie ein E-Mail-Konto unter Einstellungen → Konten hinzu
**Konfiguration**:
* Select the sender email account
* Wählen Sie das Absender-E-Mail-Konto
<Note>
You can only send emails from mailboxes synced to your own Twenty account. Sending from other team members' mailboxes (e.g., the account owner's email) is on the roadmap.
Sie können nur E-Mails aus Postfächern versenden, die mit Ihrem eigenen Konto synchronisiert wurden. Das Versenden von Postfächern anderer Teammitglieder (z. B. die E-Mail des Kontoinhabers) ist auf der Roadmap.
</Note>
For all the following steps, you can reference variables from previous steps for personalization.
Für alle folgenden Schritte können Sie Variablen aus früheren Schritten zur Personalisierung referenzieren.
* E-Mail-Adresse des Empfängers eingeben.
<Note>
Only one recipient is possible at the moment.
Im Moment ist nur ein Empfänger möglich.
</Note>
* Betreffzeile festlegen.
* Nachrichtentext verfassen. You can format links, create numbered list, bullet point lists, add attachments.
* Nachrichtentext verfassen. Sie können Links formatieren, nummerierte Liste, Aufzählungspunkte erstellen und Anhänge hinzufügen.
<Note>
Adding HTML signatures is not possible at the moment.
Das Hinzufügen von HTML-Signaturen ist im Moment nicht möglich.
</Note>
### Formular
Fordert während der Workflow-Ausführung ein Formular an, um Benutzereingaben zu sammeln. The responses can then be used in subsequent steps to create records, send emails, or execute any other action based on the input.
Fordert während der Workflow-Ausführung ein Formular an, um Benutzereingaben zu sammeln. Die Antworten können dann in folgenden Schritten verwendet werden, um Datensätze zu erstellen, E-Mails zu senden oder jede andere Aktion basierend auf der Eingabe auszuführen.
<Warning>
**Forms are designed for manual triggers only**. Bei Workflows mit anderen Triggern (Datensatz erstellt, aktualisiert, etc.) sind Formulare nur über die Workflow-Ausführungsoberfläche zugänglich, was nicht das erwartete Benutzererlebnis ist. Ein Benachrichtigungszentrum wird im Jahr 2026 eingeführt, um die Unterstützung von Formularen in automatisierten Workflows zu verbessern.
**Formulare sind nur für manuelle Trigger konzipiert**. Bei Workflows mit anderen Triggern (Datensatz erstellt, aktualisiert, etc.) sind Formulare nur über die Workflow-Ausführungsoberfläche zugänglich, was nicht das erwartete Benutzererlebnis ist. Ein Benachrichtigungszentrum wird im Jahr 2026 eingeführt, um die Unterstützung von Formularen in automatisierten Workflows zu verbessern.
</Warning>
**Konfiguration**:
* Configure the fields that users will be asked to fill. For each field, choose
* a type among text, number, date, a given record, a select field. Select fields from all objects are available.
* a label
* a default value under `Placeholder` (optional)
* Edit the form title
* Konfigurieren Sie die Felder, die Benutzer ausfüllen sollen. Für jedes Feld wählen
* ein Typ unter Text, Nummer, Datum, gegebener Datensatz, ein Auswahlfeld. Wählen Sie Felder aus allen Objekten verfügbar.
* ein Label
* ein Standardwert unter `Platzhalter` (optional)
* Formulartitel bearbeiten
**Ausgabe**: Formularantworten sind für nachfolgende Schritte verfügbar.
**Example**: The "Quick Lead" workflow is available by default in all workspaces, available anywhere in the Command Menu `Cmd + K`.
**Beispiel**: Der "Quick Lead"-Workflow ist standardmäßig in allen Arbeitsbereichen verfügbar, die überall im Kommandomenü `Cmd + K` verfügbar sind.
**How to fill the form**:
**So füllen Sie das Formular aus**:
* Trigger your manual workflow from the command menu `Cmd K`
* Fill the form that is displayed in the side panel and click `Submit`.
* Löse deinen manuellen Workflow aus dem Kommandomenü `Cmd K` aus
* Füllen Sie das Formular aus, das im Seitenfenster angezeigt wird, und klicken Sie auf "Absenden".
<Note>
The fields cannot be made mandatory.
Die Felder können nicht obligatorisch gemacht werden.
</Note>
<VimeoEmbed videoId="1147277989" title="Video demonstration" />
<VimeoEmbed videoId="1147277989" title="Video-Demo" />
## Integration Actions
## Integrationsaktionen
### Code
@@ -247,24 +247,24 @@ Führt benutzerdefiniertes JavaScript in Ihrem Workflow aus.
**Konfiguration**:
* Greifen Sie auf Variablen aus vorherigen Schritten zu. You can edit the variables names dynamically.
* Greifen Sie auf Variablen aus vorherigen Schritten zu. Sie können die Namen der Variablen dynamisch bearbeiten.
<VimeoEmbed videoId="1147281795" title="Video demonstration" />
<VimeoEmbed videoId="1147281795" title="Video-Demo" />
* Schreiben Sie JavaScript-Code im Editor
* Variablen zurückgeben, um sie in nachfolgenden Schritten zu verwenden
* Code direkt im Schritt testen
<Note>
If you need to use external API keys in your code, you must input them directly in the function body. Sie können API-Schlüssel nicht an anderer Stelle konfigurieren und sie dann in der Logikfunktion referenzieren.
Wenn Sie externe API-Schlüssel in Ihrem Code verwenden müssen, müssen Sie diese direkt in den Funktionskörper eingeben. Sie können API-Schlüssel nicht an anderer Stelle konfigurieren und sie dann in der Logikfunktion referenzieren.
</Note>
<Tip>
**Working with arrays?** Arrays from external systems or previous steps may come as strings. See [How to handle arrays in Code actions](/l/de/user-guide/workflows/how-tos/advanced-configurations/handle-arrays-in-code-actions) for the solution.
**Mit Arrays arbeiten?** Arrays von externen Systemen oder vorherigen Schritten können als Zeichenketten verwendet werden. Siehe [Wie man Arrays in Code-Aktionen behandelt](/l/de/user-guide/workflows/how-tos/advanced-configurations/handle-arrays-in-code-actions) für die Lösung.
</Tip>
<Tip>
Click the square icon at the top right of the code editor to display it in full screen helpful since the default editor width is limited.
Klicken Sie auf das quadratische Symbol oben rechts im Code-Editor, um es im Vollbildmodus anzuzeigen hilfreich, da die Standardbreite des Editors begrenzt ist.
</Tip>
### HTTP-Anfrage
@@ -275,37 +275,37 @@ Sendet eine Anfrage an eine externe API als Teil Ihres Workflows.
**Konfiguration**:
* Geben Sie die API-Endpunkt-URL ein. Using parameters from previous steps is possible.
* Geben Sie die API-Endpunkt-URL ein. Die Verwendung von Parametern aus früheren Schritten ist möglich.
* Wählen Sie die HTTP-Methode aus (GET, POST, PUT, PATCH, DELETE)
* Erforderliche Header und Werte hinzufügen
* Beispielantwort zur Strukturvorschau bereitstellen
## AI Actions
## KI-Aktionen
### AI Agent - Coming Soon
### AI Agent - demnächst
Runs an AI agent within your workflow to perform intelligent tasks.
Führt einen KI-Agent innerhalb Ihres Workflows aus, um intelligente Aufgaben auszuführen.
**Konfiguration**:
* **Agent**: Select an existing AI agent or use the default agent
* **Prompt**: Write the instruction for the AI agent
* Reference variables from previous steps in the prompt
* **Agent**: Wähle einen vorhandenen KI-Agent oder verwende den Standardmakler
* **Anfrage**: Schreibe die Anweisung für den KI-Agent
* Referenzvariablen von vorherigen Schritten in der Promption
**What AI Agents can do**:
**Was KI Agenten tun können**:
* Analyze and summarize data
* Classify or categorize records
* Generate text content
* Make decisions based on data
* Interact with your CRM data using tools
* Daten analysieren und zusammenfassen
* Einträge klassifizieren oder kategorisieren
* Textinhalt generieren
* Entscheidungen auf Basis von Daten treffen
* Interagiere mit deinen CRM-Daten mithilfe von Tools
**Output**: The AI agent's response is available for use in subsequent steps. If the agent has a structured output schema, the response will follow that format.
**Ausgabe**: Die Antwort des KI-Agenten ist verfügbar für die Verwendung in folgenden Schritten. Wenn der Agent ein strukturiertes Ausgabeschema hat, folgt die Antwort diesem Format.
<Note>
AI Agent actions consume workflow credits based on the AI model used. See [Workflow Credits](/l/de/user-guide/workflows/capabilities/workflow-credits) for details.
AI Agent-Aktionen verbrauchen Workflow-Credits basierend auf dem verwendeten KI-Modell. Siehe [Workflow Credits](/l/de/user-guide/workflows/capabilities/workflow-credits) für Details.
</Note>
<Note>
AI agents respect role-based permissions. Sie können Agenten unter **Einstellungen → Mitglieder → Rollen** bestimmte Rollen zuweisen, um zu steuern, auf welche Daten sie zugreifen können. See [Permissions](/l/de/user-guide/permissions-access/capabilities/permissions) for details.
Die AI-Agenten respektieren die rollenbasierten Genehmigungen. Sie können Agenten unter **Einstellungen → Mitglieder → Rollen** bestimmte Rollen zuweisen, um zu steuern, auf welche Daten sie zugreifen können. Siehe [Permissions](/l/de/user-guide/permissions-access/capabilities/permissions) für Details.
</Note>
@@ -62,23 +62,23 @@ Ten en cuenta que siempre puedes evitar re-renderizaciones comprendiendo su caus
Ahora es fácil evitar re-renderizaciones en nuevas funciones eliminándolas a nivel de raíz.
The `PageChangeEffect` sidecar component contains just one `useEffect` that holds all the logic to execute on a page change.
El componente sidecar `PageChangeEffect` contiene sólo un `useEffect` que contiene toda la lógica a ejecutar en un cambio de página.
De esa manera, sabes que solo hay un lugar que puede desencadenar una re-renderización.
### Always think twice before adding `useEffect` in your codebase
### Siempre piensa dos veces antes de añadir `useEffect` en tu base de código
Re-renders are often caused by unnecessary `useEffect`.
Re-renders son a menudo causados por `useEffect` innecesario.
You should think whether you need `useEffect`, or if you can move the logic in a event handler function.
Debería pensar si necesita `useEffect`, o si puede mover la lógica en una función manejadora de eventos.
You'll find it generally easy to move the logic in a `handleClick` or `handleChange` function.
Generalmente te resultará fácil mover la lógica en una función `handleClick` o `handleChange`.
También puedes encontrarlas en bibliotecas como Apollo: `onCompleted`, `onError`, etc.
### Use a sibling component to extract `useEffect` or data fetching logic
### Usa un componente hermano para extraer `useEffect` o lógica de obtención de datos
If you feel like you need to add a `useEffect` in your root component, you should consider extracting it in a sidecar component.
Si crees que necesitas añadir un `useEffect` en tu componente raíz, deberías considerar extraerlo en un componente sidecar.
Puedes aplicar lo mismo para la lógica de obtención de datos, con hooks de Apollo.
@@ -74,7 +74,7 @@ El proyecto tiene un stack limpio y sencillo, con un código boilerplate mínimo
[React Router](https://reactrouter.com/) maneja el enrutamiento.
To avoid unnecessary [re-renders](/l/es/developers/contribute/capabilities/frontend-development/best-practices-front#managing-re-renders) all the routing logic is in a `useEffect` in `PageChangeEffect`.
Para evitar [re-renders]innecesarios (/developers/contribute/capabilities/frontend-development/best-practices-front#managing-re-renders) toda la lógica de enrutamiento está en un `useEffect` en `PageChangeEffect`.
### Gestión del Estado
@@ -127,9 +127,9 @@ const MyDropdownComponent = ({ onClose }: { onClose: () => void }) => {
};
```
It's important to use this pattern when you're not sure that just using a useEffect with mount/unmount will be enough to avoid conflicts.
Es importante usar este patrón cuando no está seguro de que sólo usar useEffect con montaje/desmontaje sea suficiente para evitar conflictos.
Those conflicts can be hard to debug, and it might happen more often than not with useEffects.
Esos conflictos pueden ser difíciles de depurar y podría ocurrir con más frecuencia que con useEffects.
## ¿Qué es un ámbito de atajo de teclado?
@@ -42,17 +42,17 @@ export const MyComponent = () => {
<Tab title="Props">
| Props | Tipo | Descripción |
| ------------------ | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| nombreDeClase | cadena | Clase CSS opcional para estilo adicional |
| anchorSelect | Selector CSS | Selector para el ancla del consejo (el elemento que activa el consejo) |
| contenido | cadena | El contenido que desea mostrar dentro del consejo |
| delayHide | número | The delay in seconds before hiding the tooltip after the cursor leaves the anchor |
| desplazamiento | número | El desplazamiento en píxeles para posicionar el consejo |
| sinFlecha | booleano | Si es `true`, oculta la flecha en el consejo |
| estáAbierto | booleano | Si es `true`, el consejo está abierto por defecto |
| lugar | Cadena `PlacesType` de `react-tooltip` | Especifica la colocación del consejo. Los valores incluyen `inferior`, `izquierda`, `derecha`, `superior`, `superior-inicio`, `superior-fin`, `derecha-inicio`, `derecha-fin`, `inferior-inicio`, `inferior-fin`, `izquierda-inicio` y `izquierda-fin` |
| estrategiaPosicion | Cadena `PositionStrategy` de `react-tooltip` | Estrategia de posición para el consejo. Tiene dos valores: `absoluto` y `fijo` |
| Props | Tipo | Descripción |
| -------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| nombreDeClase | cadena | Clase CSS opcional para estilo adicional |
| selección de anclaje | Selector CSS | Selector para el ancla del consejo (el elemento que activa el consejo) |
| contenido | cadena | El contenido que desea mostrar dentro del consejo |
| retrasaresPie | número | El retraso en segundos antes de ocultar la descripción después de que el cursor deje el ancla |
| desplazamiento | número | El desplazamiento en píxeles para posicionar el consejo |
| sinFlecha | booleano | Si es `true`, oculta la flecha en el consejo |
| estáAbierto | booleano | Si es `true`, el consejo está abierto por defecto |
| lugar | Cadena `PlacesType` de `react-tooltip` | Especifica la colocación del consejo. Los valores incluyen `inferior`, `izquierda`, `derecha`, `superior`, `superior-inicio`, `superior-fin`, `derecha-inicio`, `derecha-fin`, `inferior-inicio`, `inferior-fin`, `izquierda-inicio` y `izquierda-fin` |
| estrategiaPosicion | Cadena `PositionStrategy` de `react-tooltip` | Estrategia de posición para el consejo. Tiene dos valores: `absoluto` y `fijo` |
@@ -35,10 +35,10 @@ export const MyComponent = () => {
<Tab title="Props">
| Props | Tipo | Descripción |
| ------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| nombreDeClase | cadena | Nombre de clase opcional para estilos adicionales |
| enlaces | matriz | An array of objects, each representing a breadcrumb link. Cada objeto tiene una propiedad `children` (el contenido de texto del enlace) y una propiedad `href` opcional (la URL a la que navegar cuando se hace clic en el enlace) |
| Props | Tipo | Descripción |
| ------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| nombreDeClase | cadena | Nombre de clase opcional para estilos adicionales |
| enlaces | matriz | Una matriz de objetos, cada uno que representa un enlace de migas de pan. Cada objeto tiene una propiedad `children` (el contenido de texto del enlace) y una propiedad `href` opcional (la URL a la que navegar cuando se hace clic en el enlace) |
@@ -21,7 +21,7 @@ server
└───utils
```
## Ability
## Compétence
Définit les permissions et inclut des gestionnaires pour chaque entité.
@@ -29,13 +29,13 @@ Définit les permissions et inclut des gestionnaires pour chaque entité.
Définit des décorateurs personnalisés dans NestJS pour des fonctionnalités supplémentaires.
See [custom decorators](https://docs.nestjs.com/custom-decorators) for more details.
Voir [décorateurs personnalisés](https://docs.nestjs.com/custom-decorators) pour plus de détails.
## Filtres
Inclut des filtres d'exception pour gérer les exceptions qui pourraient se produire dans les points de terminaison GraphQL.
## Guards
## Gardes
Voir [gardiens](https://docs.nestjs.com/guards) pour plus de détails.
@@ -62,23 +62,23 @@ Gardez à l'esprit que vous pouvez **toujours** éviter les re-rendus en compren
Éviter les re-rendus dans les nouvelles fonctionnalités est désormais facile en les éliminant au niveau racine.
The `PageChangeEffect` sidecar component contains just one `useEffect` that holds all the logic to execute on a page change.
Le composant latéral `PageChangeEffect` contient juste un `useEffect` qui contient toute la logique à exécuter sur un changement de page.
De cette manière, vous savez qu'il n'y a qu'un seul endroit qui peut déclencher un re-rendu.
### Always think twice before adding `useEffect` in your codebase
### Réfléchissez toujours à deux fois avant d'ajouter `useEffect` dans votre code de base
Re-renders are often caused by unnecessary `useEffect`.
Les re-rendus sont souvent causés par un `useEffect` inutile.
You should think whether you need `useEffect`, or if you can move the logic in a event handler function.
Vous devriez vous demander si vous avez besoin de `useEffect`, ou si vous pouvez déplacer la logique dans une fonction de gestion d'événements.
You'll find it generally easy to move the logic in a `handleClick` or `handleChange` function.
Vous trouverez généralement facile de déplacer la logique dans une fonction `handleClick` ou `handleChange`.
Vous pouvez également les trouver dans des bibliothèques comme Apollo : `onCompleted`, `onError`, etc.
### Use a sibling component to extract `useEffect` or data fetching logic
### Utilisez un composant frère pour extraire `useEffect` ou une logique de récupération de données
If you feel like you need to add a `useEffect` in your root component, you should consider extracting it in a sidecar component.
Si vous avez le sentiment que vous avez besoin d'ajouter un `useEffect` à votre composant racine, vous devriez envisager de l'extraire dans un composant de voiture latérale.
Vous pouvez appliquer la même chose à la logique de récupération de données, avec les hooks Apollo.
@@ -74,7 +74,7 @@ Le projet a une stack simple et propre, avec un code boilerplate minimal.
[React Router](https://reactrouter.com/) gère le routage.
To avoid unnecessary [re-renders](/l/fr/developers/contribute/capabilities/frontend-development/best-practices-front#managing-re-renders) all the routing logic is in a `useEffect` in `PageChangeEffect`.
Pour éviter les [re-renders](/l/fr/developers/contribute/capabilities/frontend-development/best-practices-front#managing-re-renders) inutiles toute la logique de routage est dans un `useEffect` dans `PageChangeEffect`.
### Gestion de l'État
@@ -127,9 +127,9 @@ const MyDropdownComponent = ({ onClose }: { onClose: () => void }) => {
};
```
It's important to use this pattern when you're not sure that just using a useEffect with mount/unmount will be enough to avoid conflicts.
Il est important d'utiliser ce masque lorsque vous n'êtes pas sûr que le simple fait d'utiliser un useEffect avec mount/unmount sera suffisant pour éviter les conflits.
Those conflicts can be hard to debug, and it might happen more often than not with useEffects.
Ces conflits peuvent être difficiles à déboger, et cela peut se produire plus souvent avec useEffects.
## Qu'est-ce qu'un périmètre de raccourci ?
@@ -51,7 +51,7 @@ export const MyComponent = () => {
| variante | chaîne | La variante de style visuel du bouton. Les options incluent `primaire`, `secondaire` et `tertiaire` |
| taille | chaîne | La taille du bouton. A deux options : `small` et `medium` |
| position | chaîne | La position du bouton par rapport à ses voisins. Les options incluent : `indépendant`, `gauche`, `droite` et `milieu` |
| accent | chaîne | La couleur d'accentuation du bouton. Options include: `default`, `blue`, and `danger` |
| accent | chaîne | La couleur d'accentuation du bouton. Les options incluent : `default`, `blue`, et `danger` |
| Bient\u00f4t | booléen | Indique si le bouton est marqué comme "bientôt" (comme pour les futures fonctionnalités) |
| désactivé | booléen | Spécifie si le bouton est désactivé ou non |
| focus | booléen | Détermine si le bouton a le focus |
@@ -130,8 +130,8 @@ export const MyComponent = () => {
| Propriétés | Type | Description |
| ----------- | --------- | -------------------------------------------------------------------------------------------------------------------- |
| variante | chaîne | La variante de style visuel des boutons dans le groupe. Les options incluent `primaire`, `secondaire` et `tertiaire` |
| taille | chaîne | La taille des boutons dans le groupe. Has two options: `medium` and `small` |
| accent | chaîne | La couleur d'accentuation des boutons dans le groupe. Options include `default`, `blue` and `danger` |
| taille | chaîne | La taille des boutons dans le groupe. A deux options : `medium` et `small` |
| accent | chaîne | La couleur d'accentuation des boutons dans le groupe. Les options incluent `default`, `blue` et `danger` |
| nomDeClasse | chaîne | Nom de classe facultatif pour le style supplémentaire |
| enfants | ReactNode | Un tableau d'éléments React représentant les boutons individuels dans le groupe |
@@ -25,12 +25,12 @@ export const MyComponent = () => {
<Tab title="Propriétés">
| Propriétés | Type | Description | Par défaut |
| -------------- | -------- | ------------------------------------------------------------------------------------------ | -------------------- |
| valeur | booléen | The current state of the toggle | `faux` |
| onChange | fonction | Callback function triggered when the toggle state changes | |
| couleur | chaîne | Color of the toggle when it\ | est de couleur bleue |
| tailleBasculer | chaîne | Size of the toggle, affecting both height and weight. A deux options : `small` et `medium` | moyen |
| Propriétés | Type | Description | Par défaut |
| -------------- | -------- | ------------------------------------------------------------------------------------------------------ | -------------------- |
| valeur | booléen | L'état actuel de la bascule | `faux` |
| onChange | fonction | Fonction de rappel déclenchée lorsque le bascule d'état change | |
| couleur | chaîne | Couleur de l'interrupteur quand il\ | est de couleur bleue |
| tailleBasculer | chaîne | Taille du commutateur, affectant à la fois la taille et le poids. A deux options : `small` et `medium` | moyen |
@@ -10,8 +10,8 @@ import { CardTitle } from "/snippets/card-title.mdx"
<CardGroup cols={2}>
<Card href="/l/fr/twenty-ui/display" img="/images/user-guide/views/filter.png">
<CardTitle>Display</CardTitle>
Display components for showing information visually
<CardTitle>Afficher</CardTitle>
Afficher les composants pour afficher les informations visuellement
</Card>
<Card href="/l/fr/twenty-ui/progress-bar" img="/images/user-guide/fields/field.png">
@@ -20,12 +20,12 @@ import { CardTitle } from "/snippets/card-title.mdx"
</Card>
<Card href="/l/fr/twenty-ui/input" img="/images/user-guide/tips/light-bulb.png">
<CardTitle>Input</CardTitle>
Input components for user interaction
<CardTitle>Entrée</CardTitle>
Composants d'entrée pour interaction utilisateur
</Card>
<Card href="/l/fr/twenty-ui/navigation" img="/images/user-guide/tasks/tasks_header.png">
<CardTitle>Navigation</CardTitle>
Navigation components for user interface
Composants de navigation pour l'interface utilisateur
</Card>
</CardGroup>
@@ -8,10 +8,10 @@ Twenty propose des formules tarifaires flexibles adaptées aux besoins de votre
## Dans cette section
<CardGroup cols={2}>
<Card title="Formules tarifaires" icon="tags" href="/l/fr/user-guide/billing/capabilities/pricing-plans">
<Card title="Formules tarifaires" icon="tags" href="/fr/user-guide/billing/capabilities/pricing-plans">
Découvrez les formules tarifaires de Twenty et ce qu'elles incluent.
</Card>
<Card title="FAQ" icon="circle-question" href="/l/fr/user-guide/billing/how-tos/billing-faq">
<Card title="FAQ" icon="circle-question" href="/fr/user-guide/billing/how-tos/billing-faq">
Questions fréquentes sur les tarifs et la facturation.
</Card>
</CardGroup>
@@ -1,176 +1,176 @@
---
title: Field Mapping
description: How field mapping works during data import.
title: Mappage des champs
description: Comment fonctionne la cartographie des champs pendant l'importation des données.
---
import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
## How Field Mapping Works
## Comment fonctionne la cartographie des champs
When you upload a file, Twenty analyzes your columns and attempts to match them to existing fields.
Lorsque vous téléchargez un fichier, 20 analysent vos colonnes et tentent de les faire correspondre aux champs existants.
### Automatic Mapping
### Mappage automatique
Twenty tries to match columns based on:
Vingt tentatives de faire correspondre les colonnes basées sur:
* Column header names (exact or similar matches)
* Data type detection (dates, numbers, emails)
* Common field patterns
* Noms d'en-tête de colonne (correspondances exactes ou similaires)
* Détection du type de données (dates, chiffres, emails)
* Modèles de champs communs
<Note>**Quick tip:** Export a few rows from the object you want to import. The exported file will have the exact column names Twenty expects, making automatic mapping seamless during import.</Note>
<Note>**Astuce rapide:** Exporter quelques lignes depuis l'objet que vous voulez importer. Le fichier exporté aura le nom exact des colonnes à 20 attendus, rendant le mappage automatique sans problème pendant l'importation.</Note>
### Manual Mapping Options
### Options de mappage manuel
For each column, you can:
Pour chaque colonne, vous pouvez:
* **Map to a field**: Select the matching Twenty field from a dropdown
* **Do not map**: Skip the column entirely (data won't be imported)
* **Mapper à un champ**: Sélectionnez le champ correspondant à 20 dans un menu déroulant
* **Ne pas mapper** : Ignorer entièrement la colonne (les données ne seront pas importées)
<Note>**Fields must exist before import.** The import creates records, not fields. Create custom fields under **Settings → Data Model** before importing.</Note>
<Note>**Les champs doivent exister avant l'importation.** L'importation crée des enregistrements, pas des champs. Créez des champs personnalisés sous **Paramètres → Modèle de données** avant d'importer.</Note>
## Field Type Compatibility
## Compatibilité du type de champ
All field types available in the Data Model are supported for import.
Tous les types de champs disponibles dans le Modèle de Données sont pris en charge pour l'importation.
You can also import `id` values to either assign a specific ID to new records or update existing ones.
Vous pouvez également importer des valeurs `id` pour assigner un ID spécifique à de nouveaux enregistrements ou mettre à jour les valeurs existantes.
<img src="/images/user-guide/fields/all-field-types.png" style={{width:'100%'}} />
## Data Format Requirements
## Exigences du format de données
<Note>**Some fields have special syntax.** We recommend downloading the sample file before preparing your import to see the expected syntax for each field type.</Note>
### Address Fields
### Champs d'adresse
Address is a nested field with multiple columns. Some can be left empty.
L'adresse est un champ imbriqué avec plusieurs colonnes. Certains peuvent être laissés vides.
* **Address / Address 1**: Street address line 1
* **Address / Address 2**: Street address line 2
* **Address / City**: City name
* **Address / State**: State or province
* **Address / Country**: Country name
* **Address / Post Code**: Postal/ZIP code
* **Adresse / Adresse 1**: Rue ligne 1
* **Adresse / Adresse 2** : Rue ligne 2
* **Adresse / Ville** : Nom de la Ville
* **Adresse / État** : État ou province
* **Adresse / Pays** : Nom du pays
* **Adresse / Code postal**: Code postal
### Array Fields
### Champs de tableau
Use the following format:
Utilisez le format suivant :
```
["value1","value2"]
```
### Boolean Fields
### Champs booléens
Use `TRUE` or `FALSE` (uppercase) - not `true` or `false`
Utilisez `TRUE` ou `FALSE` (majuscule) - pas `true` ou `false`
### Currency Fields
### Champs de la devise
Currency is a nested field with two columns that **both must be filled**:
La devise est un champ imbriqué avec deux colonnes qui **doivent être remplies**:
* **Amount / Amount**: The numeric value (e.g., `1234.56`)
* **Amount / Currency**: The currency code (e.g., `USD`, `EUR`)
* **Montant / Montant** : La valeur numérique (par exemple, `1234.56`)
* **Montant / Devise** : Le code de la devise (par exemple, `USD`, `EUR`)
### Date Fields
### Champs de date
Supported formats:
Formats pris en charge :
* `YYYY-MM-DD` (recommended)
* `MM/DD/YYYY`
* `DD/MM/YYYY`
* `YYYY-MM-DD` (recommandé)
* `MM/DD/YYYYY`
* `JJ/MM/YYYY`
* ISO 8601 format
### Domain Fields
### Champs de domaine
* It is recommended to use the format `https://domain.com` to avoid creating duplicates, as this is the format used for Companies created by the mailbox and calendar synchronizations
* A `Domain Label` and `Domain URL` can be filled: best practice is to fill `domain.com` in the label and `https://domain.com` in the url
* Domains must be unique within the Companies object
* **Domains must be unique within the file to import**
* Il est recommandé d'utiliser le format `https://domain. om` pour éviter de créer des doublons, car c'est le format utilisé pour les entreprises créées par la boîte aux lettres et les synchronisations de calendrier
* Un `label de domaine` et `URL de domaine` peuvent être remplis : la meilleure pratique est de remplir `domain.com` dans l'étiquette et `https://domain.com` dans l'url
* Les domaines doivent être uniques au sein de l'objet Entreprises
* **Les domaines doivent être uniques dans le fichier à importer**
### Email Fields
### Champs e-mail
* Must be valid email format
* Emails must be unique within the People object
* **Emails must be unique within the file to import**
* For additional emails: use **Emails / Primary Email** for the main email, and **Emails / Additional Emails** with this format:
* Doit être un format d'email valide
* Les e-mails doivent être uniques dans l'objet People
* **Les e-mails doivent être uniques dans le fichier à importer**
* Pour les e-mails supplémentaires: utilisez **Emails / Courriel Primaire** pour l'e-mail principal, et **Emails / E-mails Supplémentaires** avec ce format:
```
["jane@twenty.com","jane.doe@twenty.com"]
```
### Id Fields
### Champs ID
Specifying an `id` during import is optional. Twenty auto-generates one if not provided.
Spécifier un `id` pendant l'importation est optionnel. Vingt auto-génère une si elle n'est pas fournie.
Use cases for mapping an `id` column:
Utiliser des cas pour mapper une colonne `id`:
* **Set a specific ID**: Choose the UUID for newly created records
* **Update existing records**: Match against existing records to update them instead of creating duplicates. In that case, it is recommended to not map the other unique fields: mapping only one unique field ensures a smoother import.
* **Définit un ID spécifique** : Choisissez l'UUID pour les enregistrements nouvellement créés
* **Mettre à jour les enregistrements existants**: Faites correspondre avec les enregistrements existants pour les mettre à jour au lieu de créer des doublons. Dans ce cas, il est recommandé de ne pas cartographier les autres champs uniques: la cartographie d'un seul champ unique garantit une importation plus fluide.
<Note>If you provide an `id`, it must be in UUID format (e.g., `c776ee49-f608-4a77-8cc8-6fe96ae1e43f`).</Note>
### JSON Fields
### Champs JSON
Use valid JSON format:
Utiliser un format JSON valide :
```
{"key":"value","key2":"value2"}
```
### Links Fields
### Champs de liens
Similar to Domain fields:
Semblable aux champs de domaine:
* Fill both the label and URL columns: **Links / Link URL** and **Links / Link Label**
* Use full URL format: `https://example.com`
* For secondary links, use **Links / Secondary Links** column with this format:
* Remplissez à la fois le libellé et les colonnes d'URL : **Liens / URL de liaison** et **Liens / Étiquette de lien**
* Utiliser le format complet de l'URL : `https://example.com`
* Pour les liens secondaires, utilisez la colonne **Liens / Liens secondaires** avec ce format :
```
[{"url":"https://twenty.com","label":"Twenty"}]
```
### Multi-Select Fields
### Champs à sélection multiple
Use the **API names** (not the display labels) in the following format:
Utilisez les **noms de l'API** (pas les libellés d'affichage) dans le format suivant :
```
["VALUE1","VALUE2"]
```
See [here](#finding-api-names-for-select-fields) where to find the API names.
Voir [here](#finding-api-names-for-select-fields) où trouver les noms de l'API.
<Note>New select options will not be created automatically by the import. They must be added under **Settings → Data Model** before importing.</Note>
<Note>New select options will not be created automatically by the import. Ils doivent être ajoutés dans **Paramètres → Modèle de données** avant d'importer.</Note>
<Warning>
**Import overwrites, it does not add.**
**Importation écrasée, elle n'ajoute pas.**
If a record already has `VALUE2` and `VALUE3` selected, and you import `["VALUE1"]`, the record will only have `VALUE1` after import. The previous selections are replaced, not merged.
Si un enregistrement a déjà `VALUE2` et `VALUE3` sélectionnés, et que vous importez `["VALUE1"]`, l'enregistrement n'aura `VALUE1` qu'après l'importation. Les sélections précédentes sont remplacées, non fusionnées.
</Warning>
### Number Fields
### Nombre de champs
* Numbers only
* Decimals use period: `1234.56`
* No thousands separators
* Numéros uniquement
* Les décimales utilisent la période: `1234.56`
* Pas de milliers de séparateurs
### Phone Fields
### Champs du téléphone
Phone is a nested field with multiple columns that **must be filled**
Le téléphone est un champ imbriqué avec plusieurs colonnes qui **doivent être remplies**
* **Phones / Primary Phone Number**: The phone number (e.g., `4159095555`)
* **Phones / Primary Phone Country Code**: Country code (e.g., `US`)
* **Phones / Primary Phone Calling Code**: Dialing code (e.g., `+1`)
* **Téléphones / Numéro de téléphone principal**: le numéro de téléphone (par exemple, `4159095555`)
* **Téléphones / Code de pays de téléphone principal**: Code pays (par exemple, `US`)
* **Téléphones / Code d'appel téléphonique principal**: Code d'appel (par exemple, `+1`)
### Rating Fields
### Champs d'évaluation
Use the API name format: `RATING_1`, `RATING_2`, `RATING_3`, `RATING_4`, `RATING_5`
Utilisez le format du nom de l'API: `RATING_1`, `RATING_2`, `RATING_3`, `RATING_4`, `RATING_5`
### Champs de relation
Please see our dedicated article: [Import Relations Between Objects](/l/fr/user-guide/data-migration/capabilities/import-relations)
Veuillez consulter notre article dédié : [Importer des relations entre les objets](/l/fr/user-guide/data-migration/capabilities/import-relations)
### Champs de sélection
Use the **API name** of the option (not the display label):
Utilisez le **nom de l'API** de l'option (pas l'étiquette d'affichage) :
```
VALUE1
@@ -3,7 +3,7 @@ title: Paramètres de l'espace de travail
description: Personnalisez le nom et la marque de votre espace de travail.
---
Those are accessible under **Settings → General**.
Elles sont accessibles dans **Paramètres → Général**.
## Image de l'espace de travail
@@ -5,8 +5,8 @@ icon: wrench
## Risoluzione dei problemi
If you encounter any problem while setting up environment for development, upgrading your instance or self-hosting,
here are some solutions for common problems.
Se riscontri qualche problema durante l'impostazione dell'ambiente per lo sviluppo, l'aggiornamento della tua istanza o l'auto-hosting,
qui sono alcune soluzioni per problemi comuni.
### Auto-ospitato
@@ -31,7 +31,7 @@ docker compose up -d
#### CR interruzioni di linea trovate [Windows]
This is due to the line break characters of Windows and the git configuration. Prova a eseguire:
Ciò è dovuto ai caratteri di interruzione di riga di Windows e la configurazione git. Prova a eseguire:
```
git config --global core.autocrlf false
@@ -43,17 +43,17 @@ Quindi elimina il repository e clonalo nuovamente.
Durante l'installazione di Twenty, devi fornire il tuo database postgres con gli schemi, le estensioni e gli utenti corretti.
Se riesci a eseguire correttamente questo provisioning, dovresti avere schemi `default` e `metadata` nel tuo database.
If you don't, make sure you don't have more than one postgres instance running on your computer.
Se non lo fai, assicurati di non avere più di un'istanza di postgres in esecuzione sul tuo computer.
#### Cannot find module 'twenty-emails' or its corresponding type declarations.
#### Impossibile trovare il modulo 'twenty-emails' o le relative dichiarazioni di tipo corrispondente.
You have to build the package `twenty-emails` before running the initialization of the database with `npx nx run twenty-emails:build`
Devi costruire il pacchetto `twenty-emails` prima di avviare l'inizializzazione del database con `npx nx run twenty-emails:build`
#### Pacchetto twenty-x mancante
Assicurati di eseguire yarn nella directory principale e poi esegui `npx nx server:dev twenty-server`. Se ancora non funziona prova a costruire manualmente il pacchetto mancante.
#### Lint on Save not working
#### Lint su Salva non funzionante
Questo dovrebbe funzionare direttamente con l'estensione Oxc (`oxc.oxc-vscode`) installata. Se questo non funziona prova ad aggiungere questo alle impostazioni di vscode (nello scope del container di sviluppo):
@@ -69,8 +69,8 @@ Questo dovrebbe funzionare direttamente con l'estensione Oxc (`oxc.oxc-vscode`)
Esegui solo i servizi di cui hai bisogno, invece di `npx nx start`. Ad esempio, se lavori sul server, esegui solo `npx nx worker twenty-server`
**If it does not work:**
If you tried to run only `npx nx run twenty-server:start` on WSL and it's failing with the below memory error:
**Se non funziona:**
Se hai provato ad eseguire solo `npx nx run twenty-server:start` su WSL e sta fallendo con l'errore di memoria sottostante:
`ERRORE FATALE: Mark-compacts inefficaci vicino al limite dell'heap Assegnazione fallita - heap di memoria JavaScript esaurito`
@@ -81,11 +81,11 @@ Il metodo alternativo è eseguire il seguente comando nel terminale o aggiungerl
Il flag --max-old-space-size=8192 imposta un limite massimo di 8GB per l'heap di Node.js; l'utilizzo si adatta alla domanda dell'applicazione.
Riferimento: https://stackoverflow.com/questions/56982005/where-do-i-set-node-options-max-old-space-size-2048
**If it does not work:**
Investigate which processes are taking you most of your machine RAM. In Twenty, abbiamo notato che alcune estensioni di VScode stavano occupando molta RAM quindi le disabilitiamo temporaneamente.
**Se non funziona:**
indaga quali processi ti stanno portando la maggior parte della tua RAM. In Twenty, abbiamo notato che alcune estensioni di VScode stavano occupando molta RAM quindi le disabilitiamo temporaneamente.
**If it does not work:**
Restart your machine helps to clean up ghost processes.
**Se non funziona:**
Riavviare la macchina aiuta a ripulire i processi fantasma.
#### Durante l'esecuzione di `npx nx start` ci sono strani [0] e [1] nei log
@@ -138,7 +138,7 @@ Gli avvisi informano sul caricamento di dipendenze aggiuntive che non sono espli
* Se è ricevuta una **richiesta POST**, il tuo worker è in esecuzione con successo. In caso contrario, devi risolvere i problemi del tuo worker.
#### Front-end fails to start and returns error TS5042: Option 'project' cannot be mixed with source files on a command line
#### Front-end non riesce ad avviare e restituisce l'errore TS5042: L'opzione 'project' non può essere miscelata con i file sorgente su una riga di comando
Commenta il plugin checker in `packages/twenty-ui/vite-config.ts` come mostrato nell'esempio sotto
@@ -1,5 +1,5 @@
---
title: Limit Emails Imported
title: Email Limite Importate
description: Controlla quali email vengono importate in Twenty.
---
@@ -47,7 +47,7 @@ Le relazioni molti-a-molti utilizzano lo schema dell'**oggetto di giunzione**: u
**Funzionalità di laboratorio**: le relazioni di giunzione devono essere abilitate in **Impostazioni → Aggiornamenti → Lab** prima dell'uso.
</Warning>
See [How to Create Many-to-Many Relations](/l/it/user-guide/data-model/how-tos/create-many-to-many-relations) for a complete step-by-step guide.
Vedi [Come creare molte relazioni](/l/it/user-guide/data-model/how-tos/create-many-to-many-relations) per una guida completa passo-passo.
## Creazione di un campo di relazione
@@ -1,5 +1,5 @@
---
title: Customize Your Data Model
title: Personalizza Il Modello Di Dati
description: Panoramica delle opzioni di personalizzazione del modello di dati.
---
@@ -1,5 +1,5 @@
---
title: Permissions & Access
title: Permessi E Accesso
description: Gestisci ruoli, permessi e il controllo degli accessi nel tuo spazio di lavoro.
---
@@ -1,5 +1,5 @@
---
title: Restrict Access to Your View
title: Limita l'accesso alla tua vista
description: Controlla chi può vedere le tue visualizzazioni personalizzate.
---
@@ -1,5 +1,5 @@
---
title: Workflow Branches
title: Rami Di Workflow
description: Crea percorsi paralleli e logica condizionale nei tuoi flussi di lavoro.
---
@@ -62,23 +62,23 @@ React で再レンダリングを管理するのは難しいことがありま
新機能での再レンダリングをルートレベルで排除することで、簡単に避けることができるようになりました。
The `PageChangeEffect` sidecar component contains just one `useEffect` that holds all the logic to execute on a page change.
`PageChangeEffect` サイドカーコンポーネントには、ページ変更時に実行するすべてのロジックを保持する `useEffect` が1つだけ含まれています。
その方法で、再レンダリングを引き起こす場所が 1 つだけあることを認識できます。
### Always think twice before adding `useEffect` in your codebase
### コードベースに `useEffect` を追加する前に、常に考えてください。
Re-renders are often caused by unnecessary `useEffect`.
再レンダリングは、しばしば不要な `useEffect` によって引き起こされます。
You should think whether you need `useEffect`, or if you can move the logic in a event handler function.
`useEffect` が必要か、イベントハンドラ関数でロジックを動かせるか考えるべきです。
You'll find it generally easy to move the logic in a `handleClick` or `handleChange` function.
handleClick」関数や「handleChange」関数の中で、ロジックを簡単に動かすことができます。
Apollo などのライブラリで `onCompleted`、`onError` などとしても見つかることがあります。
### Use a sibling component to extract `useEffect` or data fetching logic
### 兄弟コンポーネントを使用して、`useEffect` またはデータ取得ロジックを抽出します。
If you feel like you need to add a `useEffect` in your root component, you should consider extracting it in a sidecar component.
ルートコンポーネントに `useEffect` を追加する必要があると思われる場合は、サイドカーコンポーネント内で展開することを検討する必要があります。
Apollo フックを使用してデータ取得ロジックにも同じことを適用できます。
@@ -74,7 +74,7 @@ npx nx run twenty-front:storybook:coverage # (needs yarn storybook:serve:dev to
[React Router](https://reactrouter.com/)はルーティングを処理します。
To avoid unnecessary [re-renders](/l/ja/developers/contribute/capabilities/frontend-development/best-practices-front#managing-re-renders) all the routing logic is in a `useEffect` in `PageChangeEffect`.
不要な [re-renders](/l/ja/developers/contribute/capabilities/frontend-development/best-practices-front#managing-re-renders) を避けるために、すべてのルーティングロジックは `PageChangeEffect` の `useEffect` にあります。
### 状態管理
@@ -127,9 +127,9 @@ const MyDropdownComponent = ({ onClose }: { onClose: () => void }) => {
};
```
It's important to use this pattern when you're not sure that just using a useEffect with mount/unmount will be enough to avoid conflicts.
mount/unmount で useEffect を使うだけで、競合を避けるのに十分なことがわからない場合は、このパターンを使用することが重要です。
Those conflicts can be hard to debug, and it might happen more often than not with useEffects.
これらの競合はデバッグが難しく、useEffectsを使わないよりも頻繁に発生する可能性があります。
## ホットキースコープとは?
@@ -98,12 +98,12 @@ export const MyComponent = () => {
<Tab title="プロパティ">
| プロパティ | タイプ | 説明 |
| ------------- | ----------------- | ---------------------------------------------------------------------------------- |
| 値 | string | 現在選択されているラジオボタンの値 |
| onChange | 機能 | ラジオボタンが変更されたときにトリガーされるコールバック関数 |
| onValueChange | 機能 | グループ内の選択された値が変更されたときにトリガーされるコールバック関数。 |
| children | `React.ReactNode` | Allows you to pass React components (such as Radio) as children to the Radio Group |
| プロパティ | タイプ | 説明 |
| ------------- | ----------------- | ---------------------------------------------------- |
| 値 | string | 現在選択されているラジオボタンの値 |
| onChange | 機能 | ラジオボタンが変更されたときにトリガーされるコールバック関数 |
| onValueChange | 機能 | グループ内の選択された値が変更されたときにトリガーされるコールバック関数。 |
| children | `React.ReactNode` | Radio Groupの子要素として (Radioなど) React コンポーネントを渡すことができます |
@@ -38,14 +38,14 @@ export const MyComponent = () => {
<Tab title="プロパティ">
| プロパティ | タイプ | 説明 |
| --------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
| className | string | 追加のスタイリング用のオプションのCSSクラス |
| disabled | ブール型 | `true` に設定すると、コンポーネントとのユーザーインタラクションが無効になります。 |
| ラベル | string | `選択` コンポーネントの目的を説明するラベル |
| onChange | 関数 | 選択された値が変更されたときに呼び出される機能 |
| オプション | 配列 | Represents the options available for the `Selected` component. 各オブジェクトが `value`(一意の識別子)、`label`(一意の識別子)、およびオプションの `アイコン` を持つオブジェクトの配列です。 |
| 値 | string | 現在選択されている値を表します。 その `options` 配列の `value` プロパティのいずれかと一致する必要があります。 |
| プロパティ | タイプ | 説明 |
| --------- | ------ | ------------------------------------------------------------------------------------------------------------- |
| className | string | 追加のスタイリング用のオプションのCSSクラス |
| disabled | ブール型 | `true` に設定すると、コンポーネントとのユーザーインタラクションが無効になります。 |
| ラベル | string | `選択` コンポーネントの目的を説明するラベル |
| onChange | 関数 | 選択された値が変更されたときに呼び出される機能 |
| オプション | 配列 | `Selected` コンポーネントで使用できるオプションを表します。 各オブジェクトが `value`(一意の識別子)、`label`(一意の識別子)、およびオプションの `アイコン` を持つオブジェクトの配列です。 |
| 値 | string | 現在選択されている値を表します。 その `options` 配列の `value` プロパティのいずれかと一致する必要があります。 |
@@ -53,8 +53,8 @@ export const MyComponent = () => {
| className | string | 追加スタイル用のオプション名 |
| ラベル | string | 入力のラベルを表します。 |
| onChange | function | 入力値が変わるときに呼び出される関数 |
| fullWidth | ブール型 | Indicates whether the input should take up 100% of the width |
| disableHotkeys | ブール型 | Indicates whether hotkeys are enabled for the input |
| fullWidth | ブール型 | 入力が幅の100%を占めるかどうかを示します |
| disableHotkeys | ブール型 | 入力でホットキーが有効になっているかどうかを示します |
| エラー | string | 表示されるエラーメッセージを表します。 指定された場合、入力の右側にアイコンエラーも追加されます。 |
| onKeyDown | 機能 | 入力フィールドにフォーカスがあるときにキーが押されたときに呼び出されます。 入力フィールドにフォーカスがあるときにキーが押されたときに呼び出されます。 Receives a `React.KeyboardEvent` as an argument |
| 右アイコン | アイコンコンポーネント | 入力の右側に表示されるオプションのアイコンコンポーネント |
@@ -100,15 +100,15 @@ export const MyComponent = () => {
<Tab title="プロパティ">
| プロパティ | タイプ | 説明 |
| ---------- | ------ | ------------------------------------------------------------------------ |
| onValidate | 機能 | ユーザーが入力を検証するときにトリガーされるコールバック関数 |
| 最小行数 | 数 | The minimum number of rows for the text area |
| プレースホルダー | string | The placeholder text you want to display when the text area is empty |
| onFocus | 機能 | テキストエリアにフォーカスが当たったときにトリガーされるコールバック関数 |
| バリアント | string | The variant of the input. オプションには `default`、 `icon`、および `button` が含まれます。 |
| ボタンタイトル | string | ボタンのタイトル(ボタンのバリアントの場合のみ適用可能) |
| 値 | string | テキストエリアの初期値 |
| プロパティ | タイプ | 説明 |
| ---------- | ------ | ---------------------------------------------------------- |
| onValidate | 機能 | ユーザーが入力を検証するときにトリガーされるコールバック関数 |
| 最小行数 | 数 | テキスト領域の最小行数 |
| プレースホルダー | string | テキストエリアが空の場合に表示するプレースホルダー テキスト |
| onFocus | 機能 | テキストエリアにフォーカスが当たったときにトリガーされるコールバック関数 |
| バリアント | string | 入力のバリエーション。 オプションには `default`、 `icon`、および `button` が含まれます。 |
| ボタンタイトル | string | ボタンのタイトル(ボタンのバリアントの場合のみ適用可能) |
| 値 | string | テキストエリアの初期値 |
@@ -1,31 +1,31 @@
---
title: AI FAQ
description: Frequently asked questions about AI features in Twenty.
description: Twenty の AI 機能に関するよくある質問。
---
<AccordionGroup>
<Accordion title="When will AI features be available?">
AI features are currently in development and will be released in beta soon. Stay tuned for updates!
<Accordion title="AI機能はいつ利用できますか?">
AI機能は現在開発中で、まもなくベータ版がリリースされる予定です。 アップデートをお楽しみに!
</Accordion>
<Accordion title="What AI capabilities are planned?">
We're building two main AI capabilities:
<Accordion title="AI能力はどのように計画されていますか?">
私たちは2つの主要なAI機能を構築しています。
1. **AI Chatbot**: A context-aware assistant that can access your Twenty data and help you with queries
2. **AI Agents in Workflows**: Intelligent automation that can process data, make decisions, and execute tasks within your workflows
1. **AI Chatbot**: 20 のデータにアクセスし、クエリをサポートするコンテキスト認識アシスタント
2. **ワークフローのAIエージェント**:ワークフロー内でデータの処理、意思決定、タスクの実行を行うインテリジェントな自動化。
</Accordion>
<Accordion title="Will AI agents have access to all my data?">
AI agents will operate under the permission system. **設定 → メンバー → ロール** で AIエージェントに特定のロールを割り当て、アクセスできるデータと実行できるアクションを完全に制御できます。
<Accordion title="AIエージェントは、すべてのデータにアクセスできますか?">
AIエージェントは許可システムの下で動作します。 **設定 → メンバー → ロール** で AIエージェントに特定のロールを割り当て、アクセスできるデータと実行できるアクションを完全に制御できます。
</Accordion>
<Accordion title="How will AI credits work?">
AI actions will consume workflow credits based on the complexity of the task and the AI model used. More details will be available when the features launch.
<Accordion title="AIクレジットはどのように機能しますか?">
AIアクションは、タスクの複雑さと使用されるAIモデルに基づいてワークフローのクレジットを消費します。 機能の起動時に詳細が表示されます。
</Accordion>
<Accordion title="Can I use my own AI models?">
Initially, Twenty will use built-in AI models. Support for custom or external AI models may be added in future releases based on user feedback.
<Accordion title="自分のAIモデルを使用できますか?">
当初、Twenty は組み込みの AI モデルを使用します。 今後のリリースでは、ユーザーからのフィードバックに基づいてカスタムモデルまたは外部AIモデルのサポートが追加される可能性があります。
</Accordion>
</AccordionGroup>
@@ -1,21 +1,21 @@
---
title: Billing FAQ
description: Frequently asked questions about Twenty pricing and billing.
title: お支払いに関する FAQ
description: 価格設定と請求についてのよくある質問。
---
## 料金
<AccordionGroup>
<Accordion title="Twentyを自分でホストして無料で利用できますか?">
はい、自分でホストしながら無料で利用できます。 You will get access to everything included in the Pro (Cloud) plan, except the support from our core-team. サポートはDiscordコミュニティを通じて利用可能です。
はい、自分でホストしながら無料で利用できます。 弊社のコアチームのサポートを除き、Pro (クラウド) プランに含まれるすべてのものにアクセスできます。 サポートはDiscordコミュニティを通じて利用可能です。
If you want to self-host and need the Premium features (SSO and row-level permissions), you can choose the paid Organization (Self-Hosted) license. This also includes support from the Twenty team and removes the requirement to publish custom code as open-source before distributing.
自己ホストを行い、プレミアム機能(SSOと行レベルの権限)が必要な場合は、有料の組織(セルフホスティング)ライセンスを選択できます。 これには、Twenty チームのサポートも含まれており、配布する前に、カスタム コードをオープンソースとして公開する必要がなくなります。
</Accordion>
<Accordion title="What are the Premium features?">
Premium features are only available on the Organization plans (Cloud or Self-Hosted):
* **SSO integration**: Single Sign-On with your identity provider
* **Row-level permissions**: Fine-grained access control at the record level
<Accordion title="プレミアム機能とは何ですか?">
プレミアム機能は、組織プラン(クラウドまたはセルフホスティングプラン)でのみ利用できます。
* **SSO統合**: IDプロバイダーとのシングルサインオンformat@@0
* **行レベルの権限**: レコードレベルでの細かいアクセス制御
* **AI 利用データ**: ワークスペース全体の AI 消費を追跡します。
</Accordion>
@@ -48,7 +48,7 @@ Premium features are only available on the Organization plans (Cloud or Self-Hos
</Accordion>
<Accordion title="ワークフロークレジットはいくつありますか?">
The number of credits depends on your billing cycle, not your plan:
クレジットの数は、あなたのプランではなく、請求サイクルによって異なります。
* **月額サブスクリプション**: 毎月5クレジット
* **年間サブスクリプション**: 1年あたり50クレジット
</Accordion>
@@ -9,12 +9,12 @@ import { ChartIcon } from '/snippets/chart-icon.mdx';
Twentyは、CRMデータを可視化するためのさまざまなウィジェットタイプを提供します。
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-bar-popular" />Bar Charts</span>
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-bar-popular" />棒グラフ</span>
データを横棒または縦棒で表示します。
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-bar-chart.png" alt="Bar chart" />
<img src="/images/user-guide/dashboard/dashboard-widget-bar-chart.png" alt="棒グラフ" />
</Frame>
**最適な用途:**
@@ -30,15 +30,15 @@ Twentyは、CRMデータを可視化するためのさまざまなウィジェ
* 月別のコンタクト追加数
<Note>
**Display limits**: Bar charts can show a maximum of 100 bars, and 50 groups per bar when using Group By. 警告 "Undisplayed data: max X bars per chart" が表示された場合は、フィルターを追加してデータを絞り込むか、グルーピングを変更します(例: 日単位ではなく週単位でグループ化)。
**制限を表示**: 棒グラフは、Group Byを使用する場合、最大100小節、および1小節あたり50グループを表示できます。 警告 "Undisplayed data: max X bars per chart" が表示された場合は、フィルターを追加してデータを絞り込むか、グルーピングを変更します(例: 日単位ではなく週単位でグループ化)。
</Note>
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-pie" />Pie Charts</span>
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-pie" />円グラフ</span>
全体に占める割合を表示します。
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-pie-chart.png" alt="Pie chart" />
<img src="/images/user-guide/dashboard/dashboard-widget-pie-chart.png" alt="円グラフ" />
</Frame>
**最適な用途:**
@@ -53,12 +53,12 @@ Twentyは、CRMデータを可視化するためのさまざまなウィジェ
* 業種別のコンタクト内訳
* 担当者別のパイプライン構成
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-line" />Line Charts</span>
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-line" />折れ線グラフ</span>
時間の経過に伴う傾向を表示します。
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-line-chart.png" alt="Line chart" />
<img src="/images/user-guide/dashboard/dashboard-widget-line-chart.png" alt="折れ線グラフ" />
</Frame>
**最適な用途:**
@@ -73,12 +73,12 @@ Twentyは、CRMデータを可視化するためのさまざまなウィジェ
* 四半期ごとの売上成長
* 活動量の推移
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="sum" />Aggregate Charts</span>
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="sum" />グラフ</span>
重要な単一値を目立つ形で表示します。
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-aggregate-chart.png" alt="Aggregate chart" />
<img src="/images/user-guide/dashboard/dashboard-widget-aggregate-chart.png" alt="集計グラフ" />
</Frame>
**最適な用途:**
@@ -98,7 +98,7 @@ Twentyは、CRMデータを可視化するためのさまざまなウィジェ
* **比率**: Select フィールドで、値同士の比率を計算します。 **Data on display** → フィールドを選択 → **Ratio** オプションを有効にします。
* **Prefix & Suffix**: 可読性を高めるために、数値の前後にカスタムテキストを追加します(例: "$" のプレフィックスや "%" のサフィックス)。
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="frame" />iFrames</span>
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="frame" />iFrame</span>
外部ツールやコンテンツをダッシュボードに直接埋め込みます。
@@ -118,25 +118,25 @@ Twentyは、CRMデータを可視化するためのさまざまなウィジェ
* ダイヤラーの指標
* セールスシーケンスツールのライブコンテンツ
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="align-box-left-top" />Rich Text</span>
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="align-box-left-top" />リッチテキスト</span>
Add formatted text and content directly to your dashboard.
書式設定されたテキストとコンテンツをダッシュボードに直接追加します。
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-rich-text.png" alt="Rich text" />
<img src="/images/user-guide/dashboard/dashboard-widget-rich-text.png" alt="リッチテキスト" />
</Frame>
**最適な用途:**
* Adding context or instructions
* Dashboard descriptions
* Notes and annotations
* 説明または説明を追加する
* ダッシュボードの説明
* メモと注釈
**Features:**
**機能:**
* Rich text formatting (bold, italic, lists, etc.)
* Image and file uploads
* Markdown-style editing
* リッチテキストの書式設定(太字、斜体、リストなど)
* 画像とファイルのアップロード
* Markdown スタイルの編集
<Note>
**近日提供予定**: ゲージチャートとテーブルはまだ利用できませんが、ロードマップに含まれています。
@@ -1,72 +1,72 @@
---
title: Create Custom Fields
description: Step-by-step guide to adding custom fields to any object.
title: カスタムフィールドの作成
description: 任意のオブジェクトにカスタムフィールドを追加するためのステップバイステップガイド
---
Custom fields let you capture information specific to your business. Add them to any object—standard or custom.
カスタムフィールドを使用すると、ビジネス固有の情報をキャプチャできます。 それらを任意のオブジェクト — 標準またはカスタムに追加します。
## Steps
## 歩数
1. Go to **Settings → Data Model**
2. Select the object you want to add a field to
3. Click **+ Add Field**
4. Choose a **field type** (see [Fields](/l/ja/user-guide/data-model/capabilities/fields) for all types)
5. Enter the **field name** and optional description
6. Configure field-specific settings (see below)
1. **設定 → データモデル** に移動
2. フィールドを追加するオブジェクトを選択します。
3. **+ Add Field** をクリックします
4. **フィールドタイプ** を選択してください (すべてのタイプについては [Fields](/l/ja/user-guide/data-model/capabilities/fields) を参照してください)
5. **フィールド名** と説明を入力してください
6. フィールド固有の設定を構成します (下記参照)
7. **保存**をクリック
**Quick method:** Click the **+** at the end of column headers in any table view → **Customize fields**.
**クイックメソッド** テーブルビューの列ヘッダーの最後に **+** をクリックします → **フィールドをカスタマイズ** 。
## Show the Field in Views
## ビューにフィールドを表示
New fields aren't automatically visible. To display:
新しいフィールドは自動的に表示されません。 表示する:
1. Open the object's table view
2. Click **Options → Fields**
3. Click the **eye icon** next to your field to show it
4. Drag to reorder
1. オブジェクトのテーブルビューを開く
2. **オプション → フィールド** をクリックします。
3. フィールドの横にある **目のアイコン** をクリックして表示します
4. ドラッグして並べ替え
## Configuration Options
## 設定オプション
### For Select / Multi-Select
### 選択/複数選択用
1. Click **+ Add option** to create choices
2. Set a **default option** if desired
3. Drag to reorder options
1. **+ オプションを追加**をクリックして選択肢を作成します
2. 必要に応じて**デフォルトオプション**を設定してください
3. ドラッグして並べ替えオプション
<Note>
**Use API names for imports.** Enable **Advanced mode** in Settings to see API names. See [Field Mapping](/l/ja/user-guide/data-migration/capabilities/field-mapping).
**インポートにAPI名を使用します。** API名を表示するには、設定で**詳細モード**を有効にします。 [Field Mapping](/l/ja/user-guide/data-migration/capabilities/field-mapping)を参照してください。
</Note>
### For Currency Fields
### 通貨フィールド用
Set the **default currency** (USD, EUR, etc.) for new records.
**デフォルトの通貨** (米ドル、ユーロなど) を設定します。 新しい記録の為に
### For Phone Fields
### 電話項目用
Set the **default country code** to pre-fill for new phone numbers.
新しい電話番号を入力するには、**デフォルトの国コード**を設定してください。
### Making a Field Unique
### フィールドをユニークにする
Toggle **Unique** to prevent duplicate values across records.
**ユニーク**をオンにすると、レコード間の重複値を防ぐことができます。
<Note>
If duplicates exist (including in deleted records), you'll get an error. Clean up duplicates first.
重複が(削除されたレコードを含む)存在する場合、エラーが発生します。 重複を最初にクリーンアップします。
</Note>
### Setting Default Values
### デフォルト値の設定
For Select fields, you can choose which option is pre-selected for new records. For Checkbox fields, set whether it's checked or unchecked by default.
format@@0フィールドでは、新規レコードに事前に選択されているオプションを選択できます。 チェックボックス項目では、デフォルトでチェックボックスかチェックオフかを設定します。
## Deactivating a Field
## フィールドを無効にしています
1. Go to **Settings → Data Model**
2. Find the field
1. **設定 → データモデル** に移動
2. フィールドを探す
3. Click **⋮ → Deactivate**
Data is preserved. You can reactivate or permanently delete later.
データは保存されます。 再アクティブ化または後で永久に削除できます。
## Related
## 関連
* [Fields](/l/ja/user-guide/data-model/capabilities/fields) — all field types explained
* [Data Model FAQ](/l/ja/user-guide/data-model/how-tos/data-model-faq) — common questions
* [Fields](/l/ja/user-guide/data-model/capabilities/fields) — すべてのフィールドタイプについて説明されています
* [Data Model FAQ](/l/ja/user-guide/data-model/how-tos/data-model-faq) — よくある質問
@@ -1,6 +1,6 @@
---
title: What is Twenty
description: Twenty is an open-source CRM that gives you the building blocks to create exactly what your business needs.
title: 二十歳とは?
description: Twenty」はオープンソースのCRMで、お客様のビジネスニーズに合った構成要素を提供します。
---
## ビジョン
@@ -14,7 +14,7 @@ description: Twenty is an open-source CRM that gives you the building blocks to
その結果、CRMはあまりにも基本的なものか、万能選手を目指して結果的にどれも得意でないものになります。
最初は、トゥエンティはあなたが既に知っているほとんどのCRMと同じように見えます:取引の追跡、連絡先の整理、タスクやノートの管理ができます。
**But what sets it apart is our approach to extensibility. We are building an open platform that provides the building blocks for you to solve your unique business problems.**
**しかし、それを区別するのは、拡張性へのアプローチです。 私たちはあなたのビジネス上の問題を解決するためのブロックを提供するオープンなプラットフォームを構築しています。**
我々は機能リストよりも、普遍的な原則と共通のパターンを優先します。
すべての答えを出そうとはせず、代わりにユーザーが最も効果的な方法を見つけるのを助けます。
@@ -30,11 +30,11 @@ description: Twenty is an open-source CRM that gives you the building blocks to
## 主な機能
* **Calendar & Emails:** Sync your mailbox and calendar to see all communications on your CRM records. [詳細はこちら](/l/ja/user-guide/calendar-emails/overview).
* **Data Model:** Create custom objects and fields to match your unique business processes. [Explore](/l/ja/user-guide/data-model/overview).
* **Data Migration:** Import and export your data via CSV or API. [始める](/l/ja/user-guide/data-migration/overview).
* **Views & Pipelines:** Organize your data with table views, kanban boards, and sales pipelines. [Discover](/l/ja/user-guide/views-pipelines/overview).
* **Workflows:** Automate your business processes and integrate with external tools. [Build automations](/l/ja/user-guide/workflows/overview).
* **カレンダーとメール:** メールボックスとカレンダーを同期してCRMレコード上のすべての通信を見ることができます。 [詳細はこちら](/l/ja/user-guide/calendar-emails/overview).
* **データモデル:** 独自のビジネスプロセスに合わせてカスタムオブジェクトとフィールドを作成します。 [Explore](/l/ja/user-guide/data-model/overview).
* **データの移行:** CSVまたはAPI経由でデータをインポートしてエクスポートします。 [始める](/l/ja/user-guide/data-migration/overview).
* **ビューとパイプライン:** テーブルビュー、カンバンボード、販売パイプラインでデータを整理します。 [Discover](/l/ja/user-guide/views-pipelines/overview).
* **ワークフロー:** ビジネスプロセスを自動化し、外部ツールと統合します。 [Build automations](/l/ja/user-guide/workflows/overview).
* **AI:** AI搭載の機能やエージェントでCRMを強化します。 [AIを詳しく見る](/l/ja/user-guide/ai/overview)。
* **ダッシュボード:** カスタムレポートや可視化でパフォーマンスを追跡します。 [ダッシュボードを表示](/l/ja/user-guide/dashboards/overview)。
* **権限とアクセス:** ロールベースの権限で、誰がデータを閲覧、編集、管理できるかを制御します。 [アクセスを設定](/l/ja/user-guide/permissions-access/overview)。
@@ -1,6 +1,6 @@
---
title: 権限とアクセス
description: Manage roles, permissions, and access control in your workspace.
description: ワークスペースのロール、権限、およびアクセス制御を管理します。
---
Twentyの権限システムは、ワークスペース内のデータに誰がアクセスし、変更できるかを制御できます。 ロールを作成し、権限を割り当て、安全なアクセスのためにSSOを構成します。
@@ -1,120 +1,120 @@
---
title: Set Up a Sales Pipeline
description: Configure your sales pipeline to track opportunities through stages.
title: セールスパイプラインの設定
description: ステージを介して商談を追跡するための販売パイプラインを設定します。
---
import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
A sales pipeline in Twenty is a Kanban view of your Opportunities object, where each column represents a stage in your sales process.
Twenty の Sales パイプラインは、商談オブジェクトのカンバン ビューです。各列は、販売プロセスのステージを表します。
## Step 1: Configure Your Stages
## ステップ 1: ステージの設定
Stages are defined in the Opportunities object's **Stage** field.
ステージは商談オブジェクトの **ステージ** 項目で定義されます。
1. Go to **Settings → Data Model**
2. Select **Opportunities**
3. Find and click the **Stage** field
4. Add, remove, or rename stages to match your process
1. **設定 → データモデル** に移動
2. **商談** を選択
3. **ステージ**フィールドを見つけてクリックしてください
4. あなたのプロセスに合わせてステージを追加、削除、またはリネームします
<VimeoEmbed videoId="927890428" title="Video demonstration" />
<VimeoEmbed videoId="927890428" title="デモ動画" />
### Recommended Stages
### 推奨ステージ
| ステージ | Purpose |
| --------------- | ----------------------------------- |
| **New** | Fresh opportunities just identified |
| **Qualified** | Confirmed as a good fit |
| **Meeting** | Engaged in discussions |
| **Proposal** | Proposal sent |
| **Negotiation** | Working on terms |
| **Closed Won** | Deal successful |
| **Closed Lost** | Deal unsuccessful |
| ステージ | 目的 |
| ---------- | ---------------- |
| **新しい** | 特定されたばかりの新鮮な機会 |
| **適格** | 良いフィットとして確認されました |
| **ミーティング** | ディスカッションに参加 |
| **提案** | 提案が送信されました |
| **交渉** | 用語で作業する |
| **獲得完了** | 取引が成功しました |
| **閉鎖失敗** | 取引に失敗しました |
<Note>
**5-7 stages is optimal.** Too many stages makes the pipeline hard to scan; too few loses visibility into deal progress.
**5~7段階が最適です。** パイプラインをスキャンするのが難しくなりすぎます。ディールの進行状況が見えなくなります。
</Note>
## Step 2: Create a Pipeline View
## ステップ 2: パイプラインビューを作成
1. Go to **Opportunities**
2. Click the view dropdown → **+ Add view**
3. Name it "Sales Pipeline"
4. Click **Create**
5. Open **Options** and select **Kanban** as the layout
1. **商談** に移動
2. ビュードロップダウンをクリックして → **+ ビューを追加**
3. 「セールスパイプライン」という名前を付けてください
4. **作成**をクリックしてください
5. **Options** を開き、レイアウトとして **Kanban** を選択します
The view automatically uses the Stage field for columns.
ビューは自動的に列に format@@0 フィールドを使用します。
## Step 3: Configure Your View
## ステップ 3: ビューの構成
### Show Key Fields
### キーフィールドを表示
1. Click **Options → Fields**
2. Look for fields in the "Hidden Fields" section
3. Click the **eye icon** to display: Company, Amount, Close Date, Owner
1. **オプション → フィールド** をクリックします。
2. 「非表示フィールド」セクションのフィールドを探します
3. **目のアイコン**をクリックすると、会社、金額、日付を閉じる、オーナーが表示されます。
### Enable Aggregations
### 集計を有効にする
Show totals at the top of each column:
各列の上部に合計を表示:
1. Click the number displayed next to a Stage name at the top of a column
2. Select the aggregation type (Count, Sum, Average, etc.)
3. Choose the field to aggregate (e.g., Amount)
1. 列の上部にあるステージ名の横に表示される数字をクリックします
2. 集計の種類(カウント、合計、平均など)を選択します。
3. 集計するフィールドを選択します(例:金額)
**Example:** Show total deal value per stage by aggregating Amount with Sum.
**例:** 合計金額を集計してステージごとのディール値を表示します。
### Use Compact View (Optional)
### コンパクトビューの使用 (オプション)
For a high-level overview with minimal card content:
最小限のカードコンテンツを持つ高レベルの概要:
1. Click **Options**
2. Turn on the toggle for **Compact view**
1. **Options** をクリックします
2. **コンパクトビュー** のトグルをオンにする
## Step 4: Create Personal and Team Views
## ステップ 4: 個人ビューとチームビューを作成
### "My Pipeline"
### "パイプライン"
* **Filter**: Owner = Me
* **Visibility**: Unlisted (personal view)
* **フィルター**: 所有者 = Me
* **可視性**: リストに追加されていない(パーソナルビュー)
### "Team Pipeline"
### "チームパイプライン"
* **Filter**: None (show all)
* **Visibility**: Workspace (shared view)
* **フィルター**: なし (すべて表示)
* **可視性**: ワークスペース (共有ビュー)
### "Closing This Month"
### "今月の閉店"
* **Type**: Table
* **タイプ**: 表
* **Filter**: Close Date = This month, Stage ≠ Closed Won, Stage ≠ Closed Lost
* **Sort**: Close Date ascending
* **並べ替え**: 終了日昇順
## Working with Opportunities
## 商談との作業
### Creating Opportunities
### 案件の作成
* Click **+ New** in the Opportunities view
* Or click **+** in a specific stage column
* 商談ビューで\*\*+ 新しい\*\*をクリックしてください
* または、特定のステージカラムの\*\*+\*\*をクリックしてください
### Moving Through Stages
### ステージを移動する
Drag and drop opportunity cards between columns to update their stage.
列間で商談カードをドラッグアンドドロップして、ステージを更新します。
<VimeoEmbed videoId="927888627" title="Video demonstration" />
<VimeoEmbed videoId="927888627" title="ビデオのデモ" />
## ベストプラクティス
### Pipeline Hygiene
### パイプライン衛生型
* Update deals daily as they progress
* Move or close stale deals promptly
* Keep close dates realistic
* 彼らが進むにつれて毎日情報を更新します
* 速やかに古い取引を移動または閉じる
* 現実的な日付を保ちます
### Stage Discipline
### ステージ制限
* Define clear criteria for each stage
* Move deals promptly when criteria are met
* Don't let deals sit in stages too long
* 各ステージの明確な基準を定義する
* 基準が満たされたときに迅速に取引を移動する
* お得な情報をステージにあまりにも長く座らせてはいけません
## Related
## 関連
* [Kanban Views](/l/ja/user-guide/views-pipelines/capabilities/kanban-views) — aggregations and compact view
* [かんばんビュー](/l/ja/user-guide/views-pipelines/capabilities/kanban-views) — 集計とコンパクトビュー
* [Filters and Sorting](/l/ja/user-guide/views-pipelines/capabilities/filters-and-sorting) — creating filtered views
@@ -256,7 +256,7 @@ import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
* ステップ内でコードを直接テスト
<Note>
コードで外部のAPIキーを使用する必要がある場合は、関数本体に直接入力する必要があります。 You cannot configure API keys elsewhere and reference them in the logic function.
コードで外部のAPIキーを使用する必要がある場合は、関数本体に直接入力する必要があります。 他の場所でAPIキーを設定したり、ロジック関数で参照したりすることはできません。
</Note>
<Tip>
@@ -7,46 +7,46 @@ description: AI を使用して受信メールをトリアージし、スレッ
## メールスレッドの仕組み
すべてのメールには、送信者のメールサーバーによって割り当てられる一意の識別子である非表示の `Message-ID` ヘッダーが含まれています。 When you reply to an email, your mail client sets an `In-Reply-To` header referencing that fingerprint. That's how Gmail, Outlook, and every other client groups messages into threads.
すべてのメールには、送信者のメールサーバーによって割り当てられる一意の識別子である非表示の `Message-ID` ヘッダーが含まれています。 メールに返信すると、メールクライアントはフィンガープリントを参照する `In-Reply-To` ヘッダーを設定します。 GmailOutlook、その他すべてのクライアントはメッセージをスレッドにまとめています。
In Twenty, that fingerprint is stored as `headerMessageId` on the Message object. Your workflow grabs it and passes it into the Send Email action's In-Reply-To field.
Twenty では、そのフィンガープリントは Message オブジェクトに `headerMessageId` として保存されます。 ワークフローはそれをつかみ、返信メール送信アクションのIn-Reply-To 項目に渡します。
## Building the workflow
## ワークフローの構築
### Step 1: Create a new workflow
### ステップ 1: 新しいワークフローを作成
Head to **Settings -> Workflows** and click **+ New Workflow**.
**設定->ワークフロー**に進み\*\*+新しいワークフロー\*\*をクリックしてください。
### Step 2: Trigger on incoming messages
### ステップ2:受信メッセージをトリガーする
Pick **When a Record is Created** and choose **Messages**.
**レコードが作成されたら** **メッセージ**を選択します。
Every time an email lands in Twenty, this fires.
メールがTwentyに届くたびに、これは火事になります。
<img src="/images/user-guide/workflows/auto-reply/workflow-overview.png" style={{width:'100%'}} />
### Step 3: Look up who sent it
### ステップ 3: 送金者を調べてください
Add a **Search Records** action.
**レコードを検索**アクションを追加します。
The sender's address isn't on the message itself — it's on the related Message Participant record.
送信者のアドレスはメッセージ自体にありません — 関連するメッセージ参加者レコードにあります。
| フィールド | 値 |
| ---------- | ------------------------------- |
| **オブジェクト** | Message Participants |
| **フィルター** | Message **is** `{{trigger.id}}` |
| **フィルター** | Role **is** From |
| **制限** | 1 |
| フィールド | 値 |
| ---------- | ----------------------------- |
| **オブジェクト** | メッセージ参加者 |
| **フィルター** | メッセージ **です** `{{trigger.id}}` |
| **フィルター** | ロールは **以下から** |
| **制限** | 1 |
This gives you the sender's email in `handle` and their name in `displayName`.
これにより、`handle` で送信者のメールアドレスと、`displayName` で送信者の名前が表示されます。
<img src="/images/user-guide/workflows/auto-reply/find-sender.png" style={{width:'100%'}} />
### Step 4: AI triage and draft reply
### ステップ4:AIトリアージと返信のドラフトを行う
Add an **AI Agent** action. This single step does two things: decides whether the email deserves a reply, and if so, writes one.
**AI エージェント** アクションを追加します。 この単一のステップは、2つのことを行います: 電子メールに返信が値するかどうかを決定し、その場合は1つを書き込みます。
Use a prompt like:
次のようなプロンプトを使用します。
```
You are an email triage assistant for a sales team. Read the following
@@ -67,27 +67,27 @@ Otherwise, write a short, professional reply (3-4 sentences max) that:
Respond with only the reply text, no subject line or greeting prefix.
```
The AI Agent outputs its response in a `response` field that the next steps can reference.
AI Agent は、次のステップが参照できるレスポンスを `response` フィールドに出力します。
<img src="/images/user-guide/workflows/auto-reply/ai-triage.png" style={{width:'100%'}} />
### Step 5: Branch on the AI decision
### ステップ5AIの決定に支局
Add an **If/Else** action to check whether the AI decided to reply or skip.
**If/Else**アクションを追加して、AIが返信するかスキップするかを確認します。
| フィールド | 値 |
| ----------- | ----------------------------------------------- |
| **条件** | AI Agent `response` **does not contain** `SKIP` |
| **If true** | Continue to Send Email |
| **Else** | Do nothing (workflow ends) |
| フィールド | 値 |
| ----------- | ------------------------------------ |
| **条件** | AI Agent `response` **`SKIP`を含まない** |
| **If true** | メール送信を続ける |
| **それ以外** | 何もしない (ワークフロー終了) |
Spam, newsletters, and auto-generated messages get dropped. Everything else moves to the next step.
スパム、ニュースレター、自動生成されたメッセージは削除されます。 他のすべてが次のステップに移動します。
<img src="/images/user-guide/workflows/auto-reply/should-reply.png" style={{width:'100%'}} />
### Step 6: Send a threaded reply
### ステップ 6: スレッド返信を送信
Add a **Send Email** action on the "if true" branch. Click **Advanced options**, then **Add In-Reply-To**.
"if true" ブランチに **メール送信** アクションを追加します。 **詳細オプション**をクリックし、**返信内に追加**をクリックします。
| フィールド | 値 |
| --------------- | -------------------------------------- |
@@ -96,26 +96,26 @@ Add a **Send Email** action on the "if true" branch. Click **Advanced options**,
| **本文** | `{{AI Triage & Draft Reply.response}}` |
| **In-Reply-To** | `{{trigger.headerMessageId}}` |
The In-Reply-To field is what makes this a reply instead of a new conversation. The recipient sees it threaded under the original email in Gmail, Outlook, or any other client.
In-Reply-To フィールドは、新しい会話ではなく返信になります。 受信者は、GmailOutlook、または他のクライアントでは、元の電子メールの下でスレッド化されていることを確認します。
<img src="/images/user-guide/workflows/auto-reply/send-email.png" style={{width:'100%'}} />
<Tip>
**In-Reply-To** expects a `message.headerMessageId` from the trigger — it's the email's unique fingerprint, not a recipient address. If you leave it empty, the email still sends, just as a standalone message.
**In-Reply-To** はトリガーから `message.headerMessageId` を期待します — 受信者のアドレスではなく、メールの固有の指紋です。 空白のままにすると、電子メールは単独のメッセージとして送信されます。
</Tip>
<Warning>
Gmail uses the subject line to group messages into threads. The subject **must** start with `Re:` (including the colon and space) for Gmail to display the reply inside the original thread. Without it, the reply will appear as a separate conversation — even if the In-Reply-To header is set correctly.
Gmail は件名を使用してメッセージをスレッドにグループ化します。 元のスレッドの中に返信を表示するには、件名が `Re:` (コロンとスペースを含む) で始まる必要があります。 In-Reply-To ヘッダーが正しく設定されている場合でも、返信は別個の会話として表示されます。
</Warning>
### Step 7: Test and activate
### ステップ 7: テストして有効化
Hit **Test**, then check your email client. The reply should appear nested under the original message.
**テスト**をクリックし、メールクライアントを確認してください。 返信は元のメッセージの下に入れ子になっているように見えます。
Activate when you're happy with it.
あなたがそれに満足しているときに有効にします。
## Ideas to build on
## 上に構築するアイデア
* **Only reply to VIPs** — add a branch that checks the sender's domain or whether they exist as a Contact in Twenty
* **Route by intent** — use separate AI Agent prompts to handle sales inquiries differently from support requests
* **Enrich before replying** — add a Search Records step to pull the sender's company or deal history into the AI prompt for more personalized replies
* **VIPへの返信のみ** — 送信者のドメインを確認するブランチを追加します。
* **意図でルート化** — サポートリクエストとは異なる販売お問い合わせに対応するために、別個の AI Agent プロンプトを使用してください。
* **返信する前にエンリッチする** — 送信者の会社を引っ張ったり、AIプロンプトに履歴を出すために検索レコードのステップを追加し、よりパーソナライズされた返信を求めます。
@@ -6,7 +6,7 @@ icon: terminal
## Comandos Úteis
Esses comandos devem ser executados a partir da pasta packages/twenty-server.
From any other folder you can run `npx nx {command} twenty-server` (or `npx nx run twenty-server:{command}`).
Em qualquer outra pasta você pode executar o `npx nx {command} twenty-server` (ou o `npx nx run twenty-server:{command}`).
### Configuração inicial
@@ -37,7 +37,7 @@ Nota: você pode executar `npx nx run twenty-server:test:integration:with-db-res
### Redefinindo o banco de dados
If you want to reset and seed the database, you can run the following command:
Se você deseja redefinir e semear a base de dados, pode executar o seguinte comando:
```bash
npx nx run twenty-server:database:reset
@@ -69,7 +69,7 @@ Veja como a pilha de tecnologia se parece agora.
* [Postgres](https://www.postgresql.org/)
**Third-party integrations**
**Integrações de terceiros**
* [Sentry](https://sentry.io/welcome/) para rastreamento de bugs
@@ -62,23 +62,23 @@ Lembre-se de que você pode **sempre** evitar re-renderizações entendendo sua
Evitar re-renderizações em novos recursos agora é fácil eliminando-as no nível raiz.
The `PageChangeEffect` sidecar component contains just one `useEffect` that holds all the logic to execute on a page change.
O componente sidecar `PageChangeEffect` contém apenas um `useEffect` que contém toda a lógica para executar em uma mudança de página.
Assim você sabe que há apenas um lugar que pode disparar uma re-renderização.
### Always think twice before adding `useEffect` in your codebase
### Sempre pense duas vezes antes de adicionar `useEffect` em sua base de código
Re-renders are often caused by unnecessary `useEffect`.
As renderizações são frequentemente causadas por `useEffect` desnecessários.
You should think whether you need `useEffect`, or if you can move the logic in a event handler function.
Você deve pensar se precisa de `useEffect`, ou se você pode mover a lógica em uma função de manipulador de eventos.
You'll find it generally easy to move the logic in a `handleClick` or `handleChange` function.
Você vai achar geralmente fácil mover a lógica na função `handleClick` ou `handleChange`.
Você também pode encontrá-las em bibliotecas como Apollo: `onCompleted`, `onError`, etc.
### Use a sibling component to extract `useEffect` or data fetching logic
### Use um componente irmão para extrair `useEffect` ou lógica de busca de dados
If you feel like you need to add a `useEffect` in your root component, you should consider extracting it in a sidecar component.
Se você acha que precisa adicionar um `useEffect` no seu componente raiz, considere extraí-lo em um componente sidecar.
Você pode aplicar o mesmo para lógica de busca de dados, com hooks do Apollo.
@@ -74,7 +74,7 @@ O projeto possui uma pilha limpa e simples, com pouco código boilerplate.
[React Router](https://reactrouter.com/) gerencia o roteamento.
To avoid unnecessary [re-renders](/l/pt/developers/contribute/capabilities/frontend-development/best-practices-front#managing-re-renders) all the routing logic is in a `useEffect` in `PageChangeEffect`.
Para evitar [re-renders]desnecessário (/developers/contribute/capabilities/frontend-development/best-practices-front#managing-re-renders) toda a lógica de roteamento está em um `useEffect` em `PageChangeEffect`.
### Gerenciamento de Estado
@@ -127,9 +127,9 @@ const MyDropdownComponent = ({ onClose }: { onClose: () => void }) => {
};
```
It's important to use this pattern when you're not sure that just using a useEffect with mount/unmount will be enough to avoid conflicts.
É importante usar este padrão quando você não tem certeza de que apenas usar um useEffect com montagem/desmontagem será suficiente para evitar conflitos.
Those conflicts can be hard to debug, and it might happen more often than not with useEffects.
Esses conflitos podem ser difíceis de depurar, e isso pode acontecer com mais frequência do que não com useEffects.
## O que é um escopo de tecla de atalho?
@@ -66,7 +66,7 @@ Isso deve funcionar automaticamente com a extensão Oxc (`oxc.oxc-vscode`) insta
#### Ao executar `npx nx start` ou `npx nx start twenty-front`, é lançada uma mensagem de erro de falta de memória
Run only the services you need, instead of `npx nx start`. Por exemplo, se estiver trabalhando no servidor, execute apenas `npx nx worker twenty-server`
Execute apenas os serviços que você precisa, ao invés do `npx nx start`. Por exemplo, se estiver trabalhando no servidor, execute apenas `npx nx worker twenty-server`
**Se não funcionar:**
Se você tentou executar apenas `npx nx run twenty-server:start` no WSL e está falhando com o erro de memória abaixo:
+18 -18
View File
@@ -12,7 +12,7 @@
}
},
"userGuide": {
"label": "User Guide",
"label": "Manual do Usuário",
"groups": {
"userGuideOverview": {
"label": "Visão Geral"
@@ -24,29 +24,29 @@
"label": "Referência"
},
"dataModelHowTos": {
"label": "How-Tos"
"label": "Como-Tos"
}
}
},
"dataMigration": {
"label": "Data Migration",
"label": "Migração de dados",
"groups": {
"dataMigrationReference": {
"label": "Referência"
},
"dataMigrationHowTos": {
"label": "How-Tos"
"label": "Como-Tos"
}
}
},
"calendarEmails": {
"label": "Calendar & Emails",
"label": "Calendário e E-mails",
"groups": {
"calendarEmailsReference": {
"label": "Referência"
},
"calendarEmailsHowTos": {
"label": "How-Tos"
"label": "Como-Tos"
}
}
},
@@ -57,16 +57,16 @@
"label": "Referência"
},
"workflowsHowTos": {
"label": "How-Tos",
"label": "Como-Tos",
"groups": {
"crmAutomations": {
"label": "CRM Automations"
"label": "Automações CRM"
},
"connectToOtherTools": {
"label": "Connect to Other Tools"
"label": "Conectar a outras ferramentas"
},
"advancedConfigurations": {
"label": "Advanced Configurations"
"label": "Configurações avançadas"
},
"needMoreHelp": {
"label": "Precisa de mais ajuda"
@@ -82,7 +82,7 @@
"label": "Referência"
},
"aiHowTos": {
"label": "How-Tos"
"label": "Como-Tos"
}
}
},
@@ -109,18 +109,18 @@
"label": "Referência"
},
"dashboardsHowTos": {
"label": "How-Tos"
"label": "Como-Tos"
}
}
},
"permissionsAccess": {
"label": "Permissions & Access",
"label": "Permissões e Acesso",
"groups": {
"permissionsAccessReference": {
"label": "Referência"
},
"permissionsAccessHowTos": {
"label": "How-Tos"
"label": "Como-Tos"
}
}
},
@@ -131,7 +131,7 @@
"label": "Referência"
},
"billingHowTos": {
"label": "How-Tos"
"label": "Como-Tos"
}
}
},
@@ -142,7 +142,7 @@
"label": "Referência"
},
"settingsHowTos": {
"label": "How-Tos"
"label": "Como-Tos"
}
}
}
@@ -181,10 +181,10 @@
"label": "API"
},
"selfHost": {
"label": "Self-Host"
"label": "Auto-Anfitrião"
},
"contribute": {
"label": "Contribute"
"label": "Contribuir"
}
}
}
@@ -32,11 +32,11 @@ export const MyComponent = () => {
<Tab title="Propriedades">
| Propriedades | Tipo | Descrição | Padrão |
| ----------------------- | --------------------------------------- | ------------------------------------------------------------------------------- | ------ |
| variante | string | A variante do esquema de cores. As opções incluem `Escuro`, `Claro` e `Sistema` | claro |
| selecionado | booleano | If `true`, displays a checkmark to indicate the selected color scheme | |
| propriedades adicionais | `React.ComponentPropsWithoutRef<'div'>` | Propriedades padrão do elemento HTML `div` | |
| Propriedades | Tipo | Descrição | Padrão |
| ----------------------- | --------------------------------------- | --------------------------------------------------------------------------------- | ------ |
| variante | string | A variante do esquema de cores. As opções incluem `Escuro`, `Claro` e `Sistema` | claro |
| selecionado | booleano | Se `true`, exibe uma marca de seleção para indicar o esquema de cores selecionado | |
| propriedades adicionais | `React.ComponentPropsWithoutRef<'div'>` | Propriedades padrão do elemento HTML `div` | |
@@ -67,10 +67,10 @@ export const MyComponent = () => {
<Tab title="Propriedades">
| Propriedades | Tipo | Descrição |
| ------------ | ------------------ | ---------------------------------------------------------------------------- |
| valor | `Esquema de Cores` | O esquema de cores atualmente selecionado |
| onChange | função | The callback function you want to trigger when a user selects a color scheme |
| Propriedades | Tipo | Descrição |
| ------------ | ------------------ | ------------------------------------------------------------------------------------------------------ |
| valor | `Esquema de Cores` | O esquema de cores atualmente selecionado |
| onChange | função | A função de retorno de chamada que você deseja acionar quando um usuário seleciona um esquema de cores |
@@ -30,7 +30,7 @@ export const MyComponent = () => {
| onRemove | função | A função chamada quando o usuário clica no botão de remoção |
| onAbort | função | A função chamada quando o usuário clica no botão de cancelamento durante o upload da imagem |
| isUploading | booleano | Indica se uma imagem está sendo enviada no momento |
| errorMessage | string | An optional error message to display below the image input |
| mensagem | string | Uma mensagem de erro opcional a ser exibida abaixo da entrada de imagem |
| desativado | booleano | Se `true`, a entrada inteira está desativada e os botões não são clicáveis |
@@ -98,12 +98,12 @@ export const MyComponent = () => {
<Tab title="Propriedades">
| Propriedades | Tipo | Descrição |
| ------------- | ----------------- | --------------------------------------------------------------------------------------- |
| valor | string | O valor do botão de rádio atualmente selecionado |
| onChange | função | A função de retorno de chamada disparada quando o botão de rádio é alterado |
| onValueChange | função | A função de retorno de chamada disparada quando o valor selecionado no grupo muda. |
| filhos | `React.ReactNode` | Permite que você passe componentes React (como Rádio) como filhos para o Grupo de Rádio |
| Propriedades | Tipo | Descrição |
| ---------------- | ----------------- | --------------------------------------------------------------------------------------- |
| valor | string | O valor do botão de rádio atualmente selecionado |
| onChange | função | A função de retorno de chamada disparada quando o botão de rádio é alterado |
| onValueAlteração | função | A função de retorno de chamada disparada quando o valor selecionado no grupo muda. |
| filhos | `React.ReactNode` | Permite que você passe componentes React (como Rádio) como filhos para o Grupo de Rádio |
@@ -25,12 +25,12 @@ export const MyComponent = () => {
<Tab title="Propriedades">
| Propriedades | Tipo | Descrição | Padrão |
| --------------- | -------- | --------------------------------------------------------------------------------------------- | -------- |
| valor | booleano | O estado atual da alternância | `falso` |
| onChange | função | Função de retorno de chamada acionada quando o estado da alternância muda | |
| cor | string | Color of the toggle when it\ | cor azul |
| tamanhoAlternar | string | Size of the toggle, affecting both height and weight. Possui duas opções: `pequeno` e `médio` | médio |
| Propriedades | Tipo | Descrição | Padrão |
| --------------- | -------- | ------------------------------------------------------------------------------------------ | -------- |
| valor | booleano | O estado atual da alternância | `falso` |
| onChange | função | Função de retorno de chamada acionada quando o estado da alternância muda | |
| cor | string | Cor do alternador quando estiver \ | cor azul |
| tamanhoAlternar | string | Tamanho do alternador, afetando a altura e o peso. Possui duas opções: `pequeno` e `médio` | médio |
@@ -12,7 +12,7 @@ Os painéis no Twenty são organizados em uma hierarquia: **Painéis → Abas
1. Vá até **Dashboards** na navegação
2. Clique em **+ New Record**
<img src="/images/user-guide/dashboard/dashboard-create-new.png" alt="Create a new dashboard" />
<img src="/images/user-guide/dashboard/dashboard-create-new.png" alt="Criar novo painel de controle" />
3. Dê um nome ao seu painel
4. Comece a adicionar abas e widgets
@@ -23,27 +23,27 @@ As abas ajudam você a organizar seu painel em seções lógicas.
### Criando abas
1. In edit mode, click **+** in the tab bar, side panel will open on the right
1. No modo de edição, clique em **+** na barra de abas, o painel lateral abrirá à direita
2. Dê um nome à sua aba (por exemplo, "Visão geral do pipeline", "Desempenho da equipe")
3. Adicione widgets à aba
### Reordering Tabs
1. In edit mode, click and hold on the tab you want to move
2. Drag and drop to the new position
3. You can also click on the tab and use the command menu to move the tab to left or right
1. No modo de edição, clique e segure na guia que deseja mover
2. Arraste e solte para a nova posição
3. Você também pode clicar na aba e usar o menu de comando para mover a guia para a esquerda ou direita
### Deleting Tabs
### Excluindo abas
1. In edit mode, click on the tab you want to delete
2. Click the **Delete** button in the command menu
1. No modo de edição, clique na aba que deseja excluir
2. Clique no botão **Excluir** no menu de comando
### Duplicando abas
1. Clique na aba que você deseja duplicar
2. Clique no botão **Duplicate** no painel lateral
<img src="/images/user-guide/dashboard/dashboard-tabs.png" alt="Dashboard tab" />
<img src="/images/user-guide/dashboard/dashboard-tabs.png" alt="Aba do Painel" />
## Layout do painel
@@ -55,11 +55,11 @@ As abas ajudam você a organizar seu painel em seções lógicas.
### Duplicando um painel
1. Select the dashboard you want to duplicate
1. Selecione o painel que você deseja duplicar
2. Abra a barra de comandos com **Cmd + K** (ou **Ctrl + K** no Windows)
3. Selecione **Duplicar painel**
<img src="/images/user-guide/dashboard/dashboard-duplicate.png" alt="Duplicate a dashboard" />
<img src="/images/user-guide/dashboard/dashboard-duplicate.png" alt="Duplicar painel de controle" />
### Melhores Práticas
@@ -3,7 +3,7 @@ title: Configurações do Espaço de Trabalho
description: Personalize o nome e a marca do seu espaço de trabalho.
---
Those are accessible under **Settings → General**.
Essas são acessíveis em **Configurações → Geral**.
## Foto do Espaço de Trabalho
@@ -55,7 +55,7 @@ Asigurați-vă că rulați yarn în directorul rădăcină și apoi rulați `npx
#### Lint la salvare nu funcționează
This should work out of the box with the Oxc extension (`oxc.oxc-vscode`) installed. Dacă acest lucru nu funcționează, încercați să adăugați acest lucru la setarea vscode (în sfera containerului dev):
Acest lucru ar trebui să fie finalizat cu extensia Oxc (`oxc.oxc-vscode`) instalată. Dacă acest lucru nu funcționează, încercați să adăugați acest lucru la setarea vscode (în sfera containerului dev):
```
"editor.codeActionsOnSave": {
+9 -9
View File
@@ -12,7 +12,7 @@
}
},
"userGuide": {
"label": "User Guide",
"label": "Ghid de utilizator",
"groups": {
"userGuideOverview": {
"label": "Prezentare generală"
@@ -29,7 +29,7 @@
}
},
"dataMigration": {
"label": "Data Migration",
"label": "Migrarea Datelor",
"groups": {
"dataMigrationReference": {
"label": "Referință"
@@ -40,7 +40,7 @@
}
},
"calendarEmails": {
"label": "Calendar & Emails",
"label": "Calendar & E-mailuri",
"groups": {
"calendarEmailsReference": {
"label": "Referință"
@@ -60,13 +60,13 @@
"label": "How-Tos",
"groups": {
"crmAutomations": {
"label": "CRM Automations"
"label": "CRM Automate"
},
"connectToOtherTools": {
"label": "Connect to Other Tools"
"label": "Conectează-te la alte instrumente"
},
"advancedConfigurations": {
"label": "Advanced Configurations"
"label": "Configurații avansate"
},
"needMoreHelp": {
"label": "Ai nevoie de mai mult ajutor"
@@ -114,7 +114,7 @@
}
},
"permissionsAccess": {
"label": "Permissions & Access",
"label": "Permisiuni & Acces",
"groups": {
"permissionsAccessReference": {
"label": "Referință"
@@ -181,10 +181,10 @@
"label": "API"
},
"selfHost": {
"label": "Self-Host"
"label": "Autogazda"
},
"contribute": {
"label": "Contribute"
"label": "Contribuie"
}
}
}
@@ -47,12 +47,12 @@ export const MyComponent = () => {
| className | șir | Clasă CSS opțională pentru stilizare suplimentară |
| Selectează ancora | Selector CSS | Selector pentru ancora tooltipului (elementul care activează tooltipul) |
| conținut | șir | Conținutul pe care doriți să îl afișați în interiorul tooltipului |
| delayHide | număr | Întârzierea în secunde înainte de a ascunde tooltipul după ce cursorul părăsește ancora |
| ascuns | număr | Întârzierea în secunde înainte de a ascunde tooltipul după ce cursorul părăsește ancora |
| deplasare | număr | Deplasarea în pixeli pentru poziționarea tooltipului |
| noArrow | boolean | Dacă este `adevărat`, ascunde săgeata de pe tooltip |
| isOpen | boolean | Dacă este `adevărat`, tooltipul este deschis în mod implicit |
| loc | șir `PlacesType` din `react-tooltip` | Specifică plasarea tooltipului. Valorile includ `jos`, `stânga`, `dreapta`, `sus`, `sus-start`, `sus-end`, `dreapta-start`, `dreapta-end`, `jos-start`, `jos-end`, `stânga-start`, și `stânga-end` |
| positionStrategy | șir `PositionStrategy` din `react-tooltip` | Strategia de poziționare pentru tooltip. Are două valori: `absolut` și `fix` |
| poziționare | șir `PositionStrategy` din `react-tooltip` | Strategia de poziționare pentru tooltip. Are două valori: `absolut` și `fix` |
@@ -60,7 +60,7 @@ export const MyComponent = () => {
</Tabs>
## Overflowing Text with Tooltip
## Text depășit cu Tooltip
Gestionează textul redundant și afișează un tooltip când textul depășește.
@@ -29,12 +29,12 @@ export const MyComponent = () => {
<Tab title="Proprietăți">
| Proprietăți | Tip | Descriere |
| ----------- | ------- | ----------------------------------------------------------------------------------------------------------------------------- |
| className | șir | Nume opțional pentru stilizare suplimentară |
| culoare | șir | Culoarea etichetei. Options include: `green`, `turquoise`, `sky`, `blue`, `purple`, `pink`, `red`, `orange`, `yellow`, `gray` |
| text | șir | Conținutul etichetei |
| onClick | funcție | Funcție opțională apelată când un utilizator face clic pe etichetă |
| Proprietăți | Tip | Descriere |
| ----------- | ------- | ------------------------------------------------------------------------------------------------------------------------------ |
| className | șir | Nume opțional pentru stilizare suplimentară |
| culoare | șir | Culoarea etichetei. Opțiunile includ: `green`, `turquoise`, `sky`, `blue`, `purple`, `pink`, `red`, `orange`, `yellow`, `gray` |
| text | șir | Conținutul etichetei |
| onClick | funcție | Funcție opțională apelată când un utilizator face clic pe etichetă |
@@ -53,7 +53,7 @@ export const MyComponent = () => {
| poziție | șir | Poziția butonului în raport cu frații săi. Opțiunile includ: `independent`, `stânga`, `dreapta` și `mijloc` |
| accent | șir | Culoarea accentului butonului. Opțiunile includ: `implicit`, `albastru` și `pericol` |
| în curând | boolean | Indică dacă butonul este marcat ca "în curând" (de exemplu, pentru funcționalități viitoare) |
| dezactivat | boolean | Specifies whether the button is disabled or not |
| dezactivat | boolean | Specifică dacă butonul este dezactivat sau nu |
| focalizare | boolean | Determină dacă butonul are focalizare |
| laClick | funcție | O funcție de apel de întoarcere care se declanșează când utilizatorul face clic pe buton |
@@ -171,24 +171,24 @@ export const MyComponent = () => {
<Tab title="Proprietăți">
| Proprietăți | Tip | Descriere |
| ----------- | --------------------- | --------------------------------------------------------------------------------------------------- |
| numeClasa | șir | Nume opțional pentru stilizare suplimentară |
| Pictogramă | `React.ComponentType` | O componentă opțională de pictogramă afișată în cadrul butonului |
| titlu | șir | Conținutul textului butonului |
| dimensiune | șir | Dimensiunea butonului. Are două opțiuni: `mic` și `mediu` |
| poziție | șir | Poziția butonului în raport cu frații săi. Options include: `standalone`, `left`, `middle`, `right` |
| applyShadow | boolean | Determines whether to apply shadow to a button |
| applyBlur | boolean | Determines whether to apply a blur effect to the button |
| dezactivat | boolean | Determină dacă butonul este dezactivat |
| focalizare | boolean | Indică dacă butonul este focusat |
| Proprietăți | Tip | Descriere |
| ----------- | --------------------- | ---------------------------------------------------------------------------------------------------- |
| numeClasa | șir | Nume opțional pentru stilizare suplimentară |
| Pictogramă | `React.ComponentType` | O componentă opțională de pictogramă afișată în cadrul butonului |
| titlu | șir | Conținutul textului butonului |
| dimensiune | șir | Dimensiunea butonului. Are două opțiuni: `mic` și `mediu` |
| poziție | șir | Poziția butonului în raport cu frații săi. Opțiunile includ: `standalone`, `left`, `middle`, `right` |
| applyUmbră | boolean | Determină dacă să aplice umbra unui buton |
| Aplaurează | boolean | Determină dacă să aplice un efect de estompare pe buton |
| dezactivat | boolean | Determină dacă butonul este dezactivat |
| focalizare | boolean | Indică dacă butonul este focusat |
</Tab>
</Tabs>
## Floating Button Group
## Grup butoane plutitoare
<Tabs>
<Tab title="Utilizare">
@@ -281,8 +281,8 @@ export const MyComponent = () => {
| Pictogramă | `React.ComponentType` | O componentă opțională de pictogramă afișată în cadrul butonului |
| dimensiune | șir | Dimensiunea butonului. Are două opțiuni: `mic` și `mediu` |
| poziție | șir | Poziția butonului în raport cu frații săi. Opțiunile includ: `independent`, `stânga`, `dreapta` și `mijloc` |
| applyShadow | boolean | Determines whether to apply shadow to a button |
| applyBlur | boolean | Determines whether to apply a blur effect to the button |
| applyUmbră | boolean | Determină dacă să aplice umbra unui buton |
| Aplaurează | boolean | Determină dacă să aplice un efect de estompare pe buton |
| dezactivat | boolean | Determină dacă butonul este dezactivat |
| focalizare | boolean | Indică dacă butonul este focusat |
| laClick | funcție | O funcție callback care se declanșează când utilizatorul face click pe buton |
@@ -294,7 +294,7 @@ export const MyComponent = () => {
</Tabs>
## Floating Icon Button Group
## Grup de butoane plutitoare
<Tabs>
<Tab title="Utilizare">
@@ -332,11 +332,11 @@ export const MyComponent = () => {
<Tab title="Proprietăți">
| Proprietăți | Tip | Descriere |
| ----------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| numeClasa | șir | Nume opțional pentru stilizare suplimentară |
| dimensiune | șir | Dimensiunea butonului. Are două opțiuni: `mic` și `mediu` |
| iconButtons | matrice | An array of objects, each representing an icon button in the group. Each object should include the icon component you want to display in the button, the function you want to call when a user clicks on the button, and whether the button should be active or not. |
| Proprietăți | Tip | Descriere |
| ----------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| numeClasa | șir | Nume opțional pentru stilizare suplimentară |
| dimensiune | șir | Dimensiunea butonului. Are două opțiuni: `mic` și `mediu` |
| iconButtons | matrice | O serie de obiecte, fiecare reprezentând un buton de pictogramă din grup. Fiecare obiect ar trebui să includă componenta pictogramă pe care doriți să o afișați în buton, funcția pe care doriți să o apelați când un utilizator face clic pe buton și dacă butonul ar trebui să fie activ sau nu. |
@@ -344,7 +344,7 @@ export const MyComponent = () => {
</Tabs>
## Light Button
## Buton luminos
<Tabs>
<Tab title="Utilizare">
@@ -375,7 +375,7 @@ export const MyComponent = () => {
| Proprietăți | Tip | Descriere |
| ----------- | ----------------- | ---------------------------------------------------------------------------- |
| numeClasa | șir | Nume opțional pentru stilizare suplimentară |
| pictogramă | `React.ReactNode` | The icon you want to display in the button |
| pictogramă | `React.ReactNode` | Pictograma pe care doriţi să o afişaţi în buton |
| titlu | șir | Conținutul textului butonului |
| accent | șir | Culoarea de accent a butonului. Opțiunile includ: `secundar` și `terțiar` |
| activ | boolean | Determină dacă butonul este în stare activă |
@@ -470,14 +470,14 @@ export const MyComponent = () => {
<Tab title="Proprietăți">
| Proprietăți | Tip | Descriere |
| -------------------- | -------------------------------- | -------------------------------------------------------------------------------------------- |
| titlu | șir | Conținutul textului butonului |
| lățimeCompletă | boolean | Definește dacă butonul ar trebui să ocupe toată lățimea containerului său |
| variantă | șir | Stilul vizual al butonului. Opțiunile includ `primar` și `secundar` |
| în curând | boolean | Indică dacă butonul este marcat ca "în curând" (de exemplu, pentru funcționalități viitoare) |
| Pictogramă | `React.ComponentType` | O componentă opțională de pictogramă afișată în cadrul butonului |
| React `button` props | `React.ComponentProps<'button'>` | All standard HTML button props are supported |
| Proprietăți | Tip | Descriere |
| ---------------------------- | -------------------------------- | -------------------------------------------------------------------------------------------- |
| titlu | șir | Conținutul textului butonului |
| lățimeCompletă | boolean | Definește dacă butonul ar trebui să ocupe toată lățimea containerului său |
| variantă | șir | Stilul vizual al butonului. Opțiunile includ `primar` și `secundar` |
| în curând | boolean | Indică dacă butonul este marcat ca "în curând" (de exemplu, pentru funcționalități viitoare) |
| Pictogramă | `React.ComponentType` | O componentă opțională de pictogramă afișată în cadrul butonului |
| Reacţionaţi `button` reclame | `React.ComponentProps<'button'>` | Toate variantele standard pentru butoanele HTML sunt acceptate |
@@ -510,10 +510,10 @@ export const MyComponent = () => {
<Tab title="Proprietăți">
| Proprietăți | Tip | Descriere |
| -------------------- | ----------------------------------------------- | --------- |
| Pictogramă | `React.ComponentType` | |
| React `button` props | `React.ButtonHTMLAttributes<HTMLButtonElement>` | |
| Proprietăți | Tip | Descriere |
| ---------------------------- | ----------------------------------------------- | --------- |
| Pictogramă | `React.ComponentType` | |
| Reacţionaţi `button` reclame | `React.ButtonHTMLAttributes<HTMLButtonElement>` | |
@@ -56,7 +56,7 @@ export const MyComponent = () => {
| laSchimbareBifată | funcție | Funcția apelată atunci când starea `verificat` a butonului radio se schimbă |
| dimensiune | șir | Dimensiunea butonului radio. Opțiuni incluse: `mare` și `mic` |
| dezactivat | boolean | Dacă este `adevărat`, butonul radio este dezactivat și nu este clicabil |
| labelPosition | șir | Poziția textului etichetei în raport cu butonul radio. Are două opțiuni: `stânga` și `dreapta` |
| Pozitie | șir | Poziția textului etichetei în raport cu butonul radio. Are două opțiuni: `stânga` și `dreapta` |
@@ -66,7 +66,7 @@ export const MyComponent = () => {
## Grup Radio
Groups together related radio buttons.
Grupează butoanele radio asociate.
<Tabs>
<Tab title="Utilizare">
@@ -98,12 +98,12 @@ export const MyComponent = () => {
<Tab title="Proprietăți">
| Proprietăți | Tip | Descriere |
| ------------- | ----------------- | ------------------------------------------------------------------------------------- |
| valoare | șir | Valoarea butonului radio selectat în prezent |
| onChange | funcție | Funcția callback activată când butonul radio este schimbat |
| onValueChange | funcție | Funcția callback activată când valoarea selectată din grup se schimbă. |
| copii | `React.ReactNode` | Îți permite să trimiți componente React (cum ar fi Radio) ca și copii la Grupul Radio |
| Proprietăți | Tip | Descriere |
| ----------------- | ----------------- | ------------------------------------------------------------------------------------- |
| valoare | șir | Valoarea butonului radio selectat în prezent |
| onChange | funcție | Funcția callback activată când butonul radio este schimbat |
| onValueModificare | funcție | Funcția callback activată când valoarea selectată din grup se schimbă. |
| copii | `React.ReactNode` | Îți permite să trimiți componente React (cum ar fi Radio) ca și copii la Grupul Radio |
@@ -38,14 +38,14 @@ export const MyComponent = () => {
<Tab title="Proprietăți">
| Proprietăți | Tip | Descriere |
| ----------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| className | șir | Clasă CSS opțională pentru stilizare suplimentară |
| dezactivat | boolean | Când este setat la `true`, dezactivează interacțiunea utilizatorului cu componenta |
| etichetă | șir | Eticheta care descrie scopul componentei `Select` |
| laSchimbare | funcție | Funcția apelată când valorile selectate se schimbă |
| opțiuni | array | Represents the options available for the `Selected` component. Este un tablou de obiecte unde fiecare obiect are un `value` (identificatorul unic), `label` (etichetă) și un `Icon` opțional |
| valoare | şir | Reprezintă valoarea momentan selectată. Ar trebui să corespundă uneia dintre proprietățile `value` din tabloul `opțiuni`. |
| Proprietăți | Tip | Descriere |
| ----------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| className | șir | Clasă CSS opțională pentru stilizare suplimentară |
| dezactivat | boolean | Când este setat la `true`, dezactivează interacțiunea utilizatorului cu componenta |
| etichetă | șir | Eticheta care descrie scopul componentei `Select` |
| laSchimbare | funcție | Funcția apelată când valorile selectate se schimbă |
| opțiuni | array | Reprezintă opţiunile disponibile pentru componenta `selectată`. (Automatic Translation) Este un tablou de obiecte unde fiecare obiect are un `value` (identificatorul unic), `label` (etichetă) și un `Icon` opțional |
| valoare | şir | Reprezintă valoarea momentan selectată. Ar trebui să corespundă uneia dintre proprietățile `value` din tabloul `opțiuni`. |
@@ -48,16 +48,16 @@ export const MyComponent = () => {
<Tab title="Proprietăți">
| Proprietăți | Tip | Descriere |
| -------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| numeClasa | șir | Nume opțional pentru stilizare suplimentară |
| etichetă | string | Reprezintă eticheta pentru intrare |
| onChange | funcție | The function called when the input value changes |
| lățimeCompletă | boolean | Indică dacă intrarea ar trebui să ocupe 100% din lățime |
| disableHotkeys | boolean | Indică dacă tastele rapide sunt activate pentru intrare |
| eroare | șir | Reprezintă mesajul de eroare care să fie afișat. Când este oferit, adaugă și o pictogramă de eroare pe partea dreaptă a intrării |
| onKeyDown | funcție | Apelează atunci când o tastă este apăsată în timp ce câmpul de intrare este focalizat. Primește un `React.KeyboardEvent` ca argument |
| RightIcon | ComponentaIcoana | An optional icon component displayed on the right side of the input |
| Proprietăți | Tip | Descriere |
| ------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| numeClasa | șir | Nume opțional pentru stilizare suplimentară |
| etichetă | string | Reprezintă eticheta pentru intrare |
| onChange | funcție | Funcția apelată atunci când valoarea de intrare se modifică |
| lățimeCompletă | boolean | Indică dacă intrarea ar trebui să ocupe 100% din lățime |
| dezactiveazăTaste | boolean | Indică dacă tastele rapide sunt activate pentru intrare |
| eroare | șir | Reprezintă mesajul de eroare care să fie afișat. Când este oferit, adaugă și o pictogramă de eroare pe partea dreaptă a intrării |
| onKeyDown | funcție | Apelează atunci când o tastă este apăsată în timp ce câmpul de intrare este focalizat. Primește un `React.KeyboardEvent` ca argument |
| Pictograma Dreapta | ComponentaIcoana | O componentă de pictogramă opțională afișată în partea dreaptă a intrării |
@@ -100,15 +100,15 @@ export const MyComponent = () => {
<Tab title="Proprietăți">
| Proprietăți | Tip | Descriere |
| ------------- | ------- | --------------------------------------------------------------------------- |
| onValidate | funcție | The callback function you want to trigger when the user validates the input |
| minRows | număr | Numărul minim de rânduri pentru aria textului |
| text sugestiv | string | Text loc de plasare afișat când aria textului este goală |
| onFocus | funcție | Funcția de apelare dorită când aria textului câștigă focalizare |
| variantă | string | Varianta intrării. Opțiuni includ: `implicit`, `icon`, și `buton` |
| buttonTitle | string | Titlul pentru buton (aplicabil doar pentru varianta butonului) |
| valoare | string | Valoarea inițială pentru aria textului |
| Proprietăți | Tip | Descriere |
| ------------- | ------- | ------------------------------------------------------------------------------------------------- |
| onValidate | funcție | Funcția de apel invers pe care doriți să o declanșați atunci când utilizatorul validează intrarea |
| minute | număr | Numărul minim de rânduri pentru aria textului |
| text sugestiv | string | Text loc de plasare afișat când aria textului este goală |
| onFocus | funcție | Funcția de apelare dorită când aria textului câștigă focalizare |
| variantă | string | Varianta intrării. Opțiuni includ: `implicit`, `icon`, și `buton` |
| buton Titlu | string | Titlul pentru buton (aplicabil doar pentru varianta butonului) |
| valoare | string | Valoarea inițială pentru aria textului |
@@ -117,7 +117,7 @@ export const MyComponent = () => {
</Tabs>
## Text Area
## Zonă text
Vă permite să creați intrări de text pe mai multe linii.
@@ -146,13 +146,13 @@ export const MyComponent = () => {
<Tab title="Proprietăți">
| Proprietăți | Tip | Descriere |
| ------------- | ------- | -------------------------------------------------------------- |
| dezactivat | boolean | Indică dacă aria textului este dezactivată |
| minRows | număr | Numărul minim de rânduri vizibile pentru aria textului. |
| onChange | funcție | Callback function triggered when the text area content changes |
| text sugestiv | șir | Placeholder text displayed when the text area is empty |
| valoare | șir | Valoarea curentă a câmpului de text |
| Proprietăți | Tip | Descriere |
| ------------- | ------- | ----------------------------------------------------------------------- |
| dezactivat | boolean | Indică dacă aria textului este dezactivată |
| minute | număr | Numărul minim de rânduri vizibile pentru aria textului. |
| onChange | funcție | Funcția de apelare este declanșată atunci când zona de text se modifică |
| text sugestiv | șir | Text substitut afișat atunci când zona de text este goală |
| valoare | șir | Valoarea curentă a câmpului de text |

Some files were not shown because too many files have changed in this diff Show More