---
.../extend/apps/config/application.mdx | 1 +
.../extend/apps/layout/front-components.mdx | 34 +++++++++++++++++--
.../extend/apps/layout/overview.mdx | 15 ++++----
.../extend/apps/config/application.mdx | 1 +
.../extend/apps/layout/front-components.mdx | 34 +++++++++++++++++--
.../extend/apps/layout/overview.mdx | 15 ++++----
.../extend/apps/config/application.mdx | 1 +
.../extend/apps/layout/front-components.mdx | 34 +++++++++++++++++--
.../extend/apps/layout/overview.mdx | 15 ++++----
.../extend/apps/config/application.mdx | 1 +
.../extend/apps/layout/front-components.mdx | 34 +++++++++++++++++--
.../extend/apps/layout/overview.mdx | 15 ++++----
.../extend/apps/config/application.mdx | 1 +
.../extend/apps/layout/front-components.mdx | 34 +++++++++++++++++--
.../extend/apps/layout/overview.mdx | 15 ++++----
.../extend/apps/config/application.mdx | 1 +
.../extend/apps/layout/front-components.mdx | 34 +++++++++++++++++--
.../extend/apps/layout/overview.mdx | 15 ++++----
.../extend/apps/config/application.mdx | 1 +
.../extend/apps/layout/front-components.mdx | 34 +++++++++++++++++--
.../extend/apps/layout/overview.mdx | 1 +
.../extend/apps/config/application.mdx | 1 +
.../extend/apps/layout/front-components.mdx | 34 +++++++++++++++++--
.../extend/apps/layout/overview.mdx | 15 ++++----
.../extend/apps/config/application.mdx | 1 +
.../extend/apps/layout/front-components.mdx | 34 +++++++++++++++++--
.../extend/apps/layout/overview.mdx | 15 ++++----
.../extend/apps/config/application.mdx | 1 +
.../extend/apps/layout/front-components.mdx | 34 +++++++++++++++++--
.../extend/apps/layout/overview.mdx | 15 ++++----
.../extend/apps/config/application.mdx | 1 +
.../extend/apps/layout/front-components.mdx | 34 +++++++++++++++++--
.../extend/apps/layout/overview.mdx | 15 ++++----
.../extend/apps/config/application.mdx | 1 +
.../extend/apps/layout/front-components.mdx | 34 +++++++++++++++++--
.../extend/apps/layout/overview.mdx | 15 ++++----
36 files changed, 485 insertions(+), 101 deletions(-)
diff --git a/packages/twenty-docs/l/ar/developers/extend/apps/config/application.mdx b/packages/twenty-docs/l/ar/developers/extend/apps/config/application.mdx
index 27dbf54609..233560283d 100644
--- a/packages/twenty-docs/l/ar/developers/extend/apps/config/application.mdx
+++ b/packages/twenty-docs/l/ar/developers/extend/apps/config/application.mdx
@@ -37,6 +37,7 @@ export default defineApplication({
* يتم اكتشاف دوال ما قبل التثبيت وما بعد التثبيت وإلغاء التثبيت تلقائيًا أثناء بناء البيان — لا حاجة للإشارة إليها في `defineApplication()`.
* لا يزال تمرير `defaultRoleUniversalIdentifier` بشكل صريح مدعومًا من أجل التوافق مع الإصدارات السابقة، ولكنه مُهمل لصالح `defineApplicationRole()`.
* `serverVariables` هي تكوينات وأسرار بنطاق المثيل (مثل مفاتيح واجهة برمجة التطبيقات). على عكس `applicationVariables`، فهي لا تصرح عن أي قيمة في ملف manifest — حيث يقوم مشغّل مساحة العمل بملئها من إعدادات التطبيق، ويتم حقنها في دوال المنطق فقط بعد تعيينها.
+* لعرض واجهة مستخدم مخصّصة لإعدادات التكوين داخل علامة تبويب **Settings** في التطبيق (بدلًا من قسم تكوين المتغيّرات الافتراضي)، صرّح بمكوّن واجهة أمامية باستخدام [`defineSettingsFrontComponent()`](/l/ar/developers/extend/apps/layout/front-components#custom-settings-component) في ملفه الخاص. يُسمح بواحد فقط لكل تطبيق. الأقسام التي يديرها النظام (الترقية التلقائية، App URL، الاتصالات) تظل مرئية دائمًا.
## أنواع المتغيرات
diff --git a/packages/twenty-docs/l/ar/developers/extend/apps/layout/front-components.mdx b/packages/twenty-docs/l/ar/developers/extend/apps/layout/front-components.mdx
index 2ec38ce9b6..35c50a94da 100644
--- a/packages/twenty-docs/l/ar/developers/extend/apps/layout/front-components.mdx
+++ b/packages/twenty-docs/l/ar/developers/extend/apps/layout/front-components.mdx
@@ -8,15 +8,17 @@ icon: window-maximize
## أين يمكن استخدام مكوّنات الواجهة الأمامية
-يمكن عرض مكوّنات الواجهة الأمامية في موقعين داخل Twenty:
+يمكن عرض مكوّنات الواجهة الأمامية في ثلاثة مواقع داخل Twenty:
* **اللوحة الجانبية** — المكوّنات غير عديمة الرأس تفتح في اللوحة الجانبية اليمنى. هذا هو السلوك الافتراضي عندما يتم تشغيل مكوّن واجهة أمامية من قائمة الأوامر.
* **الويدجت (لوحات المعلومات وصفحات السجلات)** — يمكن تضمين مكوّنات الواجهة الأمامية كويدجت داخل [تخطيطات الصفحات](/l/ar/developers/extend/apps/layout/page-layouts). عند تكوين لوحة معلومات أو تخطيط صفحة سجل، يمكن للمستخدمين إضافة ويدجت لمكوّن واجهة أمامية.
+* **App settings** — يتم تعريفها باستخدام [`defineSettingsFrontComponent()`](#custom-settings-component)، حيث يُعرَض مكوّن الواجهة الأمامية كقسم داخل علامة تبويب **Settings** في التطبيق، ليحل محل واجهة مستخدم تكوين المتغيرات الافتراضية.
-مكوّن الواجهة الأمامية بمفرده لا يمكن الوصول إليه من واجهة المستخدم — تحتاج إلى *عرضه*. هناك طريقتان للقيام بذلك:
+مكوّن الواجهة الأمامية بمفرده لا يمكن الوصول إليه من واجهة المستخدم — تحتاج إلى *عرضه*. الطرق الثلاث للقيام بذلك هي:
* **إقرانه مع [عنصر قائمة الأوامر](/l/ar/developers/extend/apps/layout/command-menu-items)** — يقوم بتسجيله في قائمة الأوامر (Cmd+K) واختياريًا كإجراء سريع مُثبّت.
* **تضمينه كويدجت في [تخطيط صفحة](/l/ar/developers/extend/apps/layout/page-layouts)** — يضعه في صفحة تفاصيل السجل أو لوحة المعلومات.
+* **عرِّفه باستخدام [`defineSettingsFrontComponent()`](#custom-settings-component)** — يعرضه كقسم داخل علامة تبويب **Settings** في التطبيق، ليحل محل واجهة مستخدم تكوين المتغيرات الافتراضية.
## مثال أساسي
@@ -77,6 +79,34 @@ export default defineCommandMenuItem({
إضافةً إلى الأوامر، يمكنك تضمين مكوّن أمامي مباشرةً في صفحة سجل عبر إضافته كودجت في **تخطيط صفحة**. لمزيد من التفاصيل، راجع [تخطيطات الصفحات](/l/ar/developers/extend/apps/layout/page-layouts).
+## مكوّن إعدادات مخصص
+
+لاستبدال واجهة مستخدم تكوين المتغيرات المولَّدة تلقائيًا في علامة تبويب **Settings** في تطبيقك بمكوّنك الخاص، عرِّفه باستخدام `defineSettingsFrontComponent` بدلًا من `defineFrontComponent`. يستخدم نفس [حقول الإعدادات](#configuration-fields) (باستثناء `isHeadless`، الذي لا يُقبل لأن مكوّن الإعدادات يعرض دائمًا واجهة مستخدم مرئية)، ويُحدِّد أيضًا هذا المكوّن باعتباره واجهة إعدادات التطبيق.
+
+يتم عرض المكوّن كقسم **داخل** علامة تبويب الإعدادات، وليس كبديل لعلامة التبويب بالكامل. الأقسام التي يديرها نظام Twenty — الترقية التلقائية، و App URL، والاتصالات — يتم عرضها دائمًا أعلاه ولا يمكن تجاوزها بواسطة التطبيق.
+
+```tsx src/front-components/app-settings.tsx
+import { defineSettingsFrontComponent } from 'twenty-sdk/define';
+
+const AppSettings = () => {
+ return (
+
+
My app settings
+ {/* render your own configuration UI here */}
+
+ );
+};
+
+export default defineSettingsFrontComponent({
+ universalIdentifier: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+ name: 'app-settings',
+ description: "Custom UI for the app's Settings tab",
+ component: AppSettings,
+});
+```
+
+يُسمَح بمكوّن واجهة إعدادات واحد فقط لكل تطبيق؛ إعلان أكثر من واحد يؤدي إلى فشل عملية الإنشاء. عند وجوده، تعرض علامة تبويب **الإعدادات** الخاصة بالتطبيق هذا المكوّن بدلًا من واجهة مستخدم تكوين المتغيّرات الافتراضية.
+
## عديم الرأس مقابل غير عديم الرأس
تأتي مكوّنات الواجهة الأمامية بوضعَي عرض يتحكّم بهما الخيار `isHeadless`:
diff --git a/packages/twenty-docs/l/ar/developers/extend/apps/layout/overview.mdx b/packages/twenty-docs/l/ar/developers/extend/apps/layout/overview.mdx
index dff8c971f8..38ab1e973d 100644
--- a/packages/twenty-docs/l/ar/developers/extend/apps/layout/overview.mdx
+++ b/packages/twenty-docs/l/ar/developers/extend/apps/layout/overview.mdx
@@ -45,12 +45,13 @@ icon: table-columns
## أين يظهر التطبيق
-| موضع الظهور | ما الذي يتحكّم فيه | كيان |
-| ------------------------- | ------------------------------------------------------------------------- | ----------------------------------------- |
-| **الشريط الجانبي** | إدخال مخصّص يربط بعرض محفوظ أو عنوان URL خارجي | `defineNavigationMenuItem` |
-| **قائمة السجلات** | تكوين محفوظ لكائن — الأعمدة الظاهرة، والترتيب، وعوامل التصفية، والمجموعات | `defineView` |
-| **صفحة تفاصيل السجل** | علامات التبويب والويدجتات في صفحة السجل (لكائنك الخاص أو لكائن قياسي) | `definePageLayout`, `definePageLayoutTab` |
-| **داخل أي مما سبق** | ويدجت React مخصّص — أزرار، نماذج، لوحات بيانات، تكاملات | `defineFrontComponent` |
-| **قائمة الأوامر (Cmd+K)** | إجراء سريع مُثبّت أو أمر مخفي | `defineCommandMenuItem` |
+| موضع الظهور | ما الذي يتحكّم فيه | كيان |
+| ------------------------- | -------------------------------------------------------------------------------------------------- | ----------------------------------------- |
+| **الشريط الجانبي** | إدخال مخصّص يربط بعرض محفوظ أو عنوان URL خارجي | `defineNavigationMenuItem` |
+| **قائمة السجلات** | تكوين محفوظ لكائن — الأعمدة الظاهرة، والترتيب، وعوامل التصفية، والمجموعات | `defineView` |
+| **صفحة تفاصيل السجل** | علامات التبويب والويدجتات في صفحة السجل (لكائنك الخاص أو لكائن قياسي) | `definePageLayout`, `definePageLayoutTab` |
+| **داخل أي مما سبق** | ويدجت React مخصّص — أزرار، نماذج، لوحات بيانات، تكاملات | `defineFrontComponent` |
+| **إعدادات التطبيق** | قسم تهيئة مخصص داخل علامة تبويب الإعدادات في التطبيق، بدلاً من واجهة المستخدم الافتراضية للمتغيرات | `defineSettingsFrontComponent` |
+| **قائمة الأوامر (Cmd+K)** | إجراء سريع مُثبّت أو أمر مخفي | `defineCommandMenuItem` |
تعمل مكوّنات الواجهة الأمامية داخل Web Worker معزول باستخدام Remote DOM — يتم عرضها بشكل أصيل داخل الصفحة (وليس داخل iframe)، لكنها لا تستطيع الوصول مباشرةً إلى صفحة المضيف أو إلى DOM. يحدث التواصل مع Twenty من خلال واجهة API للمضيف تعتمد تمرير الرسائل.
diff --git a/packages/twenty-docs/l/cs/developers/extend/apps/config/application.mdx b/packages/twenty-docs/l/cs/developers/extend/apps/config/application.mdx
index cde082da77..a78dd3274a 100644
--- a/packages/twenty-docs/l/cs/developers/extend/apps/config/application.mdx
+++ b/packages/twenty-docs/l/cs/developers/extend/apps/config/application.mdx
@@ -37,6 +37,7 @@ Poznámky:
* Předinstalační, postinstalační a odinstalační funkce jsou při sestavení manifestu detekovány automaticky — není třeba na ně odkazovat v `defineApplication()`.
* Předávání `defaultRoleUniversalIdentifier` explicitně je stále podporováno kvůli zpětné kompatibilitě, ale je zastaralé ve prospěch `defineApplicationRole()`.
* `serverVariables` představují konfiguraci a tajné údaje vázané na instanci (např. klíče API). Na rozdíl od `applicationVariables` neuvádějí v manifestu žádnou hodnotu — operátor pracovního prostoru je vyplní v nastavení aplikace a do logických funkcí jsou injektovány až poté, co jsou nastaveny.
+* Chcete-li vykreslit vlastní konfigurační uživatelské rozhraní na kartě **Settings** aplikace (namísto výchozí sekce pro konfiguraci proměnných), deklarujte frontovou komponentu pomocí [`defineSettingsFrontComponent()`](/l/cs/developers/extend/apps/layout/front-components#custom-settings-component) v jejím vlastním souboru. Na jednu aplikaci je povolena pouze jedna instance. Sekce spravované systémem (automatická aktualizace, App URL, připojení) zůstávají vždy viditelné.
## Typy proměnných
diff --git a/packages/twenty-docs/l/cs/developers/extend/apps/layout/front-components.mdx b/packages/twenty-docs/l/cs/developers/extend/apps/layout/front-components.mdx
index 0c7dfdc9b1..5b696195a7 100644
--- a/packages/twenty-docs/l/cs/developers/extend/apps/layout/front-components.mdx
+++ b/packages/twenty-docs/l/cs/developers/extend/apps/layout/front-components.mdx
@@ -8,15 +8,17 @@ Frontendové komponenty jsou React komponenty, které se vykreslují přímo v u
## Kde lze použít frontendové komponenty
-Frontendové komponenty se mohou vykreslovat na dvou místech v rámci Twenty:
+Frontendové komponenty se mohou vykreslovat na třech místech v rámci Twenty:
* **Postranní panel** — Frontendové komponenty, které nejsou headless, se otevírají v pravém postranním panelu. Toto je výchozí chování, když je frontendová komponenta vyvolána z příkazového menu.
* **Widgety (nástěnky a stránky záznamů)** — front komponenty lze vkládat jako widgety do [rozložení stránky](/l/cs/developers/extend/apps/layout/page-layouts). Při konfiguraci nástěnky nebo rozložení stránky záznamu mohou uživatelé přidat widget frontendové komponenty.
+* **Nastavení aplikace** — Definovaná pomocí [`defineSettingsFrontComponent()`](#custom-settings-component), frontendová komponenta se vykreslí jako sekce na kartě **Settings** (Nastavení) aplikace, místo výchozího uživatelského rozhraní pro konfiguraci proměnných.
-Samotná frontendová komponenta není z uživatelského rozhraní dostupná — je potřeba ji zpřístupnit. Dva způsoby, jak to udělat, jsou:
+Samotná frontendová komponenta není z uživatelského rozhraní dostupná — je potřeba ji zpřístupnit. Tři způsoby, jak to udělat, jsou:
* **Spárujte ji s [položkou příkazové nabídky](/l/cs/developers/extend/apps/layout/command-menu-items)** — zaregistruje ji v příkazové nabídce (Cmd+K) a volitelně také jako připnutou rychlou akci.
* **Vložte ji jako widget do [rozložení stránky](/l/cs/developers/extend/apps/layout/page-layouts)** — umístí ji na detailní stránku záznamu nebo na nástěnku.
+* **Definujte ji pomocí [`defineSettingsFrontComponent()`](#custom-settings-component)** — vykreslí ji jako sekci na kartě **Settings** (Nastavení) aplikace, místo výchozího uživatelského rozhraní pro konfiguraci proměnných.
## Základní příklad
@@ -77,6 +79,34 @@ Kliknutím na něj vykreslíte komponentu přímo ve stránce.
Mimo příkazy můžete frontendovou komponentu vložit přímo na stránku záznamu přidáním jako widget v **rozvržení stránky**. Podrobnosti viz [Rozložení stránek](/l/cs/developers/extend/apps/layout/page-layouts).
+## Vlastní komponenta nastavení
+
+Chcete-li nahradit automaticky generované uživatelské rozhraní pro konfiguraci proměnných na kartě **Settings** (Nastavení) vaší aplikace vlastní komponentou, definujte ji pomocí `defineSettingsFrontComponent` místo `defineFrontComponent`. Používá stejná [konfigurační pole](#configuration-fields) (kromě `isHeadless`, který není podporován, protože komponenta nastavení vždy vykresluje viditelné uživatelské rozhraní) a zároveň označuje komponentu jako uživatelské rozhraní nastavení aplikace.
+
+Komponenta se vykreslí jako sekce **uvnitř** karty Settings, nikoli jako náhrada celé karty. Systémem spravované sekce Twenty — automatická aktualizace, App URL a připojení — se vždy zobrazují nad ní a aplikace je nemůže přebít.
+
+```tsx src/front-components/app-settings.tsx
+import { defineSettingsFrontComponent } from 'twenty-sdk/define';
+
+const AppSettings = () => {
+ return (
+
+
My app settings
+ {/* render your own configuration UI here */}
+
+ );
+};
+
+export default defineSettingsFrontComponent({
+ universalIdentifier: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+ name: 'app-settings',
+ description: "Custom UI for the app's Settings tab",
+ component: AppSettings,
+});
+```
+
+Na jednu aplikaci je povolena pouze jedna frontová komponenta nastavení; deklarace více než jedné způsobí selhání sestavení. Je-li přítomna, karta **Settings** aplikace vykreslí tuto komponentu místo výchozího uživatelského rozhraní pro konfiguraci proměnných.
+
## Headless vs. ne-headless
Front-endové komponenty existují ve dvou režimech vykreslování řízených volbou `isHeadless`:
diff --git a/packages/twenty-docs/l/cs/developers/extend/apps/layout/overview.mdx b/packages/twenty-docs/l/cs/developers/extend/apps/layout/overview.mdx
index 3070c3f96f..8b2af65978 100644
--- a/packages/twenty-docs/l/cs/developers/extend/apps/layout/overview.mdx
+++ b/packages/twenty-docs/l/cs/developers/extend/apps/layout/overview.mdx
@@ -45,12 +45,13 @@ icon: table-columns
## Kde se aplikace zobrazuje
-| Umístění | Co řídí | Entita |
-| --------------------------------------- | ------------------------------------------------------------------------------- | ----------------------------------------- |
-| **Postranní panel** | Vlastní položka odkazující na uložené zobrazení nebo externí adresu URL | `defineNavigationMenuItem` |
-| **Seznam záznamů** | Uložené nastavení pro objekt — viditelné sloupce, pořadí, filtry, skupiny | `defineView` |
-| **Stránka s podrobnostmi záznamu** | Karty a widgety na stránce záznamu (vašeho vlastního objektu nebo standardního) | `definePageLayout`, `definePageLayoutTab` |
-| **Uvnitř kteréhokoli z výše uvedených** | Vlastní widget Reactu — tlačítka, formuláře, přehledové panely, integrace | `defineFrontComponent` |
-| **Příkazová nabídka (Cmd+K)** | Připnutá rychlá akce nebo skrytý příkaz | `defineCommandMenuItem` |
+| Umístění | Co řídí | Entita |
+| --------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
+| **Postranní panel** | Vlastní položka odkazující na uložené zobrazení nebo externí adresu URL | `defineNavigationMenuItem` |
+| **Seznam záznamů** | Uložené nastavení pro objekt — viditelné sloupce, pořadí, filtry, skupiny | `defineView` |
+| **Stránka s podrobnostmi záznamu** | Karty a widgety na stránce záznamu (vašeho vlastního objektu nebo standardního) | `definePageLayout`, `definePageLayoutTab` |
+| **Uvnitř kteréhokoli z výše uvedených** | Vlastní widget Reactu — tlačítka, formuláře, přehledové panely, integrace | `defineFrontComponent` |
+| **Nastavení aplikace** | Vlastní konfigurační sekce na kartě Nastavení aplikace, která nahrazuje výchozí uživatelské rozhraní proměnných | `defineSettingsFrontComponent` |
+| **Příkazová nabídka (Cmd+K)** | Připnutá rychlá akce nebo skrytý příkaz | `defineCommandMenuItem` |
Frontendové komponenty běží uvnitř izolovaného Web Workeru pomocí Remote DOM — vykreslují se na stránce nativně (ne uvnitř iframe), ale nemají přímý přístup k hostitelské stránce ani DOM. Komunikace s Twenty probíhá prostřednictvím hostitelského API pro předávání zpráv.
diff --git a/packages/twenty-docs/l/de/developers/extend/apps/config/application.mdx b/packages/twenty-docs/l/de/developers/extend/apps/config/application.mdx
index d22b305924..d24387d02c 100644
--- a/packages/twenty-docs/l/de/developers/extend/apps/config/application.mdx
+++ b/packages/twenty-docs/l/de/developers/extend/apps/config/application.mdx
@@ -37,6 +37,7 @@ Notizen:
* Pre-Installations-, Post-Installations- und Deinstallationsfunktionen werden während des Manifest-Builds automatisch erkannt — Sie müssen sie in `defineApplication()` nicht referenzieren.
* Die explizite Übergabe von `defaultRoleUniversalIdentifier` wird für die Abwärtskompatibilität weiterhin unterstützt, ist jedoch zugunsten von `defineApplicationRole()` veraltet.
* `serverVariables` sind instanzbezogene Konfigurationen und Geheimnisse (z. B. API-Schlüssel). Im Gegensatz zu `applicationVariables` haben sie im Manifest keinen Wert definiert – die Workspace-Operatorin bzw. der Workspace-Operator trägt sie in den App-Einstellungen ein, und sie werden erst dann in Logikfunktionen eingespeist, wenn sie gesetzt sind.
+* Um eine benutzerdefinierte Konfigurationsoberfläche im Tab **Settings** der App anzuzeigen (anstelle des standardmäßigen Variablenkonfigurationsbereichs), deklarieren Sie eine Front-Komponente mit [`defineSettingsFrontComponent()`](/l/de/developers/extend/apps/layout/front-components#custom-settings-component) in einer eigenen Datei. Pro App ist nur eine zulässig. Systemverwaltete Bereiche (Auto-Upgrade, App-URL, Verbindungen) bleiben immer sichtbar.
## Variablentypen
diff --git a/packages/twenty-docs/l/de/developers/extend/apps/layout/front-components.mdx b/packages/twenty-docs/l/de/developers/extend/apps/layout/front-components.mdx
index cd5c6a8d0d..3874a6d592 100644
--- a/packages/twenty-docs/l/de/developers/extend/apps/layout/front-components.mdx
+++ b/packages/twenty-docs/l/de/developers/extend/apps/layout/front-components.mdx
@@ -8,15 +8,17 @@ Front-Komponenten sind React-Komponenten, die direkt innerhalb der Twenty-UI ger
## Wo Front-Komponenten verwendet werden können
-Front-Komponenten können an zwei Stellen innerhalb von Twenty gerendert werden:
+Front-Komponenten können an drei Stellen innerhalb von Twenty gerendert werden:
* **Seitenpanel** — Nicht-Headless-Front-Komponenten werden im rechten Seitenpanel geöffnet. Dies ist das Standardverhalten, wenn eine Front-Komponente über das Befehlsmenü ausgelöst wird.
* **Widgets (Dashboards und Datensatzseiten)** — Front-Komponenten können als Widgets in [Seitenlayouts](/l/de/developers/extend/apps/layout/page-layouts) eingebettet werden. Beim Konfigurieren eines Dashboards oder eines Datensatzseiten-Layouts können Benutzer ein Front-Komponenten-Widget hinzufügen.
+* **App settings** — Definiert mit [`defineSettingsFrontComponent()`](#custom-settings-component), wird die Front-Komponente als Abschnitt im **Settings**-Tab der App gerendert und ersetzt dabei die standardmäßige Variablenkonfigurationsoberfläche.
-Eine Front-Komponente allein ist über die Benutzeroberfläche nicht erreichbar – Sie müssen sie *sichtbar machen*. Die beiden Möglichkeiten dafür sind:
+Eine Front-Komponente allein ist über die Benutzeroberfläche nicht erreichbar – Sie müssen sie *sichtbar machen*. Die drei Möglichkeiten dafür sind:
* **Mit einem [Befehlsmenüeintrag](/l/de/developers/extend/apps/layout/command-menu-items) verknüpfen** — registriert sie im Befehlsmenü (Cmd+K) und optional als angeheftete Schnellaktion.
* **Als Widget in ein [Seitenlayout](/l/de/developers/extend/apps/layout/page-layouts) einbetten** — platziert es auf der Detailseite eines Datensatzes oder in einem Dashboard.
+* **Definiere sie mit [`defineSettingsFrontComponent()`](#custom-settings-component)** — rendert sie als Abschnitt im **Settings**-Tab der App und ersetzt dabei die standardmäßige Variablenkonfigurationsoberfläche.
## Einfaches Beispiel
@@ -77,6 +79,34 @@ Klicken Sie darauf, um die Komponente inline zu rendern.
Über Befehle hinaus können Sie eine Front-Komponente direkt in eine Datensatzseite einbetten, indem Sie sie als Widget in einem **Seitenlayout** hinzufügen. Details finden Sie unter [Seitenlayouts](/l/de/developers/extend/apps/layout/page-layouts).
+## Benutzerdefinierte Einstellungen-Komponente
+
+Um die automatisch generierte Variablenkonfigurationsoberfläche im **Settings**-Tab deiner App durch deine eigene Komponente zu ersetzen, definiere sie mit `defineSettingsFrontComponent` statt mit `defineFrontComponent`. Es verwendet dieselben [Konfigurationsfelder](#configuration-fields) (mit Ausnahme von `isHeadless`, das nicht akzeptiert wird, da eine Einstellungskomponente immer eine sichtbare Benutzeroberfläche rendert) und kennzeichnet die Komponente zusätzlich als Einstellungen-UI der App.
+
+Die Komponente wird als Abschnitt innerhalb des **Settings**-Tabs gerendert, nicht als Ersatz für den gesamten Tab. Die von Twenty verwalteten Systembereiche – Auto-Upgrade, App-URL und Verbindungen – werden immer darüber gerendert und können von der App nicht überschrieben werden.
+
+```tsx src/front-components/app-settings.tsx
+import { defineSettingsFrontComponent } from 'twenty-sdk/define';
+
+const AppSettings = () => {
+ return (
+
+
My app settings
+ {/* render your own configuration UI here */}
+
+ );
+};
+
+export default defineSettingsFrontComponent({
+ universalIdentifier: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+ name: 'app-settings',
+ description: "Custom UI for the app's Settings tab",
+ component: AppSettings,
+});
+```
+
+Pro App ist nur eine Einstellungs-Frontkomponente zulässig; wenn mehr als eine deklariert wird, schlägt der Build fehl. Wenn vorhanden, rendert der **Settings**-Tab der App diese Komponente anstelle der standardmäßigen Konfigurationsoberfläche für Variablen.
+
## Headless vs. Nicht-Headless
Front-Komponenten gibt es in zwei Rendering-Modi, die durch die Option `isHeadless` gesteuert werden:
diff --git a/packages/twenty-docs/l/de/developers/extend/apps/layout/overview.mdx b/packages/twenty-docs/l/de/developers/extend/apps/layout/overview.mdx
index 9cfece2f7f..05be28f0a6 100644
--- a/packages/twenty-docs/l/de/developers/extend/apps/layout/overview.mdx
+++ b/packages/twenty-docs/l/de/developers/extend/apps/layout/overview.mdx
@@ -45,12 +45,13 @@ Die **Layout-Ebene** einer Twenty-App umfasst alles, was der Benutzer sieht: wo
## Wo die App erscheint
-| Oberfläche | Was es steuert | Entität |
-| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
-| **Seitenleiste** | Ein benutzerdefinierter Eintrag, der auf eine gespeicherte Ansicht oder eine externe URL verweist | `defineNavigationMenuItem` |
-| **Datensatzliste** | Eine gespeicherte Konfiguration für ein Objekt – sichtbare Spalten, Reihenfolge, Filter, Gruppen | `defineView` |
-| **Detailseite des Datensatzes** | Die Registerkarten und Widgets auf einer Datensatzseite (für Ihr eigenes Objekt oder ein Standardobjekt) | `definePageLayout`, `definePageLayoutTab` |
-| **Innerhalb eines der oben genannten Bereiche** | Ein benutzerdefiniertes React-Widget – Schaltflächen, Formulare, Dashboards, Integrationen | `defineFrontComponent` |
-| **Befehlsmenü (Cmd+K)** | Eine angeheftete Schnellaktion oder ein versteckter Befehl | `defineCommandMenuItem` |
+| Oberfläche | Was es steuert | Entität |
+| ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
+| **Seitenleiste** | Ein benutzerdefinierter Eintrag, der auf eine gespeicherte Ansicht oder eine externe URL verweist | `defineNavigationMenuItem` |
+| **Datensatzliste** | Eine gespeicherte Konfiguration für ein Objekt – sichtbare Spalten, Reihenfolge, Filter, Gruppen | `defineView` |
+| **Detailseite des Datensatzes** | Die Registerkarten und Widgets auf einer Datensatzseite (für Ihr eigenes Objekt oder ein Standardobjekt) | `definePageLayout`, `definePageLayoutTab` |
+| **Innerhalb eines der oben genannten Bereiche** | Ein benutzerdefiniertes React-Widget – Schaltflächen, Formulare, Dashboards, Integrationen | `defineFrontComponent` |
+| **App-Einstellungen** | Ein benutzerdefinierter Konfigurationsabschnitt im Tab "Einstellungen" der App, anstelle der standardmäßigen Variablen-Benutzeroberfläche | `defineSettingsFrontComponent` |
+| **Befehlsmenü (Cmd+K)** | Eine angeheftete Schnellaktion oder ein versteckter Befehl | `defineCommandMenuItem` |
Frontend-Komponenten laufen in einem isolierten Web Worker unter Verwendung von Remote DOM – sie werden nativ auf der Seite gerendert (nicht in einem iframe), können aber die Hostseite oder das DOM nicht direkt erreichen. Die Kommunikation mit Twenty erfolgt über eine Message-Passing-Host-API.
diff --git a/packages/twenty-docs/l/es/developers/extend/apps/config/application.mdx b/packages/twenty-docs/l/es/developers/extend/apps/config/application.mdx
index 579a2bef9d..1bc2047670 100644
--- a/packages/twenty-docs/l/es/developers/extend/apps/config/application.mdx
+++ b/packages/twenty-docs/l/es/developers/extend/apps/config/application.mdx
@@ -37,6 +37,7 @@ Notas:
* Las funciones de preinstalación, posinstalación y desinstalación se detectan automáticamente durante la compilación del manifiesto; no necesitas referenciarlas en `defineApplication()`.
* Pasar `defaultRoleUniversalIdentifier` explícitamente sigue siendo compatible por motivos de retrocompatibilidad, pero está en desuso en favor de `defineApplicationRole()`.
* `serverVariables` son configuraciones y secretos con ámbito de instancia (por ejemplo, claves de API). A diferencia de `applicationVariables`, no declaran ningún valor en el manifiesto: el operador del espacio de trabajo los completa desde la configuración de la aplicación, y se inyectan en las funciones lógicas solo una vez que se han establecido.
+* Para mostrar una interfaz de configuración personalizada dentro de la pestaña **Settings** de la aplicación (en lugar de la sección predeterminada de configuración de variables), declara un componente de frontend con [`defineSettingsFrontComponent()`](/l/es/developers/extend/apps/layout/front-components#custom-settings-component) en su propio archivo. Solo se permite uno por aplicación. Las secciones gestionadas por el sistema (actualización automática, App URL, conexiones) siempre permanecen visibles.
## Tipos de variables
diff --git a/packages/twenty-docs/l/es/developers/extend/apps/layout/front-components.mdx b/packages/twenty-docs/l/es/developers/extend/apps/layout/front-components.mdx
index 3e319a4000..4dcbb997d4 100644
--- a/packages/twenty-docs/l/es/developers/extend/apps/layout/front-components.mdx
+++ b/packages/twenty-docs/l/es/developers/extend/apps/layout/front-components.mdx
@@ -8,15 +8,17 @@ Los componentes de frontend son componentes de React que se renderizan directame
## Dónde se pueden usar los componentes de front
-Los componentes de front pueden renderizarse en dos ubicaciones dentro de Twenty:
+Los componentes de front pueden renderizarse en tres ubicaciones dentro de Twenty:
* **Panel lateral** — Los componentes de front no headless se abren en el panel lateral derecho. Este es el comportamiento predeterminado cuando un componente de front se activa desde el menú de comandos.
* **Widgets (tableros y páginas de registros)** — Los componentes de front pueden incrustarse como widgets dentro de los [diseños de página](/l/es/developers/extend/apps/layout/page-layouts). Al configurar un tablero o el diseño de una página de registro, los usuarios pueden agregar un widget de componente de front.
+* **Configuración de la app** — Definido con [`defineSettingsFrontComponent()`](#custom-settings-component), el componente de front se renderiza como una sección dentro de la pestaña **Settings** de la app, en lugar de la interfaz de configuración de variables predeterminada.
-Un componente de front por sí solo no es accesible desde la interfaz de usuario; necesitas *exponerlo*. Las dos formas de hacerlo son:
+Un componente de front por sí solo no es accesible desde la interfaz de usuario; necesitas *exponerlo*. Las tres formas de hacerlo son:
* **Emparejarlo con un [elemento del menú de comandos](/l/es/developers/extend/apps/layout/command-menu-items)**: lo registra en el menú de comandos (Cmd+K) y, de forma opcional, como una acción rápida fijada.
* **Incrustarlo como widget en un [diseño de página](/l/es/developers/extend/apps/layout/page-layouts)**: lo coloca en la página de detalles de un registro o en un tablero.
+* **Definirlo con [`defineSettingsFrontComponent()`](#custom-settings-component)** — lo renderiza como una sección dentro de la pestaña **Settings** de la app, en lugar de la interfaz de configuración de variables predeterminada.
## Ejemplo básico
@@ -77,6 +79,34 @@ Haz clic para renderizar el componente en línea.
Más allá de los comandos, puedes incrustar un componente de frontend directamente en una página de registro agregándolo como un widget en un **diseño de página**. Consulta [Diseños de página](/l/es/developers/extend/apps/layout/page-layouts) para más detalles.
+## Componente de configuración personalizada
+
+Para reemplazar la interfaz de configuración de variables autogenerada en la pestaña **Settings** de tu app con tu propio componente, defínelo con `defineSettingsFrontComponent` en lugar de `defineFrontComponent`. Toma los mismos [campos de configuración](#configuration-fields) (excepto `isHeadless`, que no se acepta ya que un componente de configuración siempre renderiza una interfaz de usuario visible) y, además, marca el componente como la interfaz de configuración de la aplicación.
+
+El componente se renderiza como una sección **dentro** de la pestaña Settings, no como un reemplazo de toda la pestaña. Las secciones gestionadas por el sistema de Twenty — actualización automática, App URL y conexiones — siempre se renderizan por encima de ella y no pueden ser sobrescritas por la aplicación.
+
+```tsx src/front-components/app-settings.tsx
+import { defineSettingsFrontComponent } from 'twenty-sdk/define';
+
+const AppSettings = () => {
+ return (
+
+
My app settings
+ {/* render your own configuration UI here */}
+
+ );
+};
+
+export default defineSettingsFrontComponent({
+ universalIdentifier: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+ name: 'app-settings',
+ description: "Custom UI for the app's Settings tab",
+ component: AppSettings,
+});
+```
+
+Solo se permite un componente de front de configuración por aplicación; declarar más de uno hace que la compilación falle. Cuando está presente, la pestaña **Settings** de la aplicación renderiza este componente en lugar de la interfaz de usuario de configuración de variables predeterminada.
+
## Headless vs no headless
Los componentes de front vienen en dos modos de renderizado controlados por la opción `isHeadless`:
diff --git a/packages/twenty-docs/l/es/developers/extend/apps/layout/overview.mdx b/packages/twenty-docs/l/es/developers/extend/apps/layout/overview.mdx
index 1297743710..5d64097e7b 100644
--- a/packages/twenty-docs/l/es/developers/extend/apps/layout/overview.mdx
+++ b/packages/twenty-docs/l/es/developers/extend/apps/layout/overview.mdx
@@ -45,12 +45,13 @@ La **capa de diseño** de una aplicación de Twenty es todo lo que el usuario ve
## Dónde aparece la aplicación
-| Ubicación | Qué controla | Entidad |
-| ------------------------------------------ | ---------------------------------------------------------------------------------------- | ----------------------------------------- |
-| **Barra lateral** | Una entrada personalizada que enlaza a una vista guardada o a una URL externa | `defineNavigationMenuItem` |
-| **Lista de registros** | Una configuración guardada para un objeto — columnas visibles, orden, filtros, grupos | `defineView` |
-| **Página de detalles del registro** | Las pestañas y widgets en una página de registro (de tu propio objeto o de uno estándar) | `definePageLayout`, `definePageLayoutTab` |
-| **Dentro de cualquiera de las anteriores** | Un widget React personalizado — botones, formularios, paneles, integraciones | `defineFrontComponent` |
-| **Menú de comandos (Cmd+K)** | Una acción rápida fijada o un comando oculto | `defineCommandMenuItem` |
+| Ubicación | Qué controla | Entidad |
+| ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
+| **Barra lateral** | Una entrada personalizada que enlaza a una vista guardada o a una URL externa | `defineNavigationMenuItem` |
+| **Lista de registros** | Una configuración guardada para un objeto — columnas visibles, orden, filtros, grupos | `defineView` |
+| **Página de detalles del registro** | Las pestañas y widgets en una página de registro (de tu propio objeto o de uno estándar) | `definePageLayout`, `definePageLayoutTab` |
+| **Dentro de cualquiera de las anteriores** | Un widget React personalizado — botones, formularios, paneles, integraciones | `defineFrontComponent` |
+| **Configuración de la app** | Una sección de configuración personalizada dentro de la pestaña Configuración de la app, en lugar de la interfaz predeterminada de variables. | `defineSettingsFrontComponent` |
+| **Menú de comandos (Cmd+K)** | Una acción rápida fijada o un comando oculto | `defineCommandMenuItem` |
Los componentes de frontend se ejecutan dentro de un Web Worker aislado usando Remote DOM — se renderizan de forma nativa en la página (no dentro de un iframe), pero no pueden acceder directamente a la página o al DOM del host. La comunicación con Twenty ocurre a través de una API de host de paso de mensajes.
diff --git a/packages/twenty-docs/l/fr/developers/extend/apps/config/application.mdx b/packages/twenty-docs/l/fr/developers/extend/apps/config/application.mdx
index 11e6f8c607..a9f37e4eec 100644
--- a/packages/twenty-docs/l/fr/developers/extend/apps/config/application.mdx
+++ b/packages/twenty-docs/l/fr/developers/extend/apps/config/application.mdx
@@ -37,6 +37,7 @@ Notes :
* Les fonctions de pré-installation, de post-installation et de désinstallation sont détectées automatiquement lors de la construction du manifeste — vous n'avez pas besoin de les référencer dans `defineApplication()`.
* Le passage explicite de `defaultRoleUniversalIdentifier` est toujours pris en charge pour des raisons de rétrocompatibilité, mais il est obsolète au profit de `defineApplicationRole()`.
* `serverVariables` sont des configurations et des secrets au niveau de l’instance (par exemple des clés d’API). Contrairement à `applicationVariables`, ils ne déclarent aucune valeur dans le manifeste — l’opérateur de l’espace de travail les renseigne dans les paramètres de l’application, et ils sont injectés dans les fonctions logiques uniquement une fois définis.
+* Pour afficher une interface utilisateur de configuration personnalisée dans l’onglet **Settings** de l’application (à la place de la section de configuration des variables par défaut), déclarez un composant frontal avec [`defineSettingsFrontComponent()`](/l/fr/developers/extend/apps/layout/front-components#custom-settings-component) dans son propre fichier. Un seul est autorisé par application. Les sections gérées par le système (mise à niveau automatique, App URL, connexions) restent toujours visibles.
## Types de variables
diff --git a/packages/twenty-docs/l/fr/developers/extend/apps/layout/front-components.mdx b/packages/twenty-docs/l/fr/developers/extend/apps/layout/front-components.mdx
index 8dff90d0f9..b3a3fa79f2 100644
--- a/packages/twenty-docs/l/fr/developers/extend/apps/layout/front-components.mdx
+++ b/packages/twenty-docs/l/fr/developers/extend/apps/layout/front-components.mdx
@@ -8,15 +8,17 @@ Les composants frontaux sont des composants React qui s'affichent directement da
## Où les composants frontaux peuvent être utilisés
-Les composants frontaux peuvent s'afficher à deux emplacements au sein de Twenty :
+Les composants frontaux peuvent s'afficher à trois emplacements au sein de Twenty :
* **Panneau latéral** — Les composants frontaux non-headless s'ouvrent dans le panneau latéral droit. Il s'agit du comportement par défaut lorsqu'un composant frontal est déclenché depuis le menu de commande.
* **Widgets (tableaux de bord et pages d'enregistrement)** — Les composants frontaux peuvent être intégrés comme widgets dans les [mises en page](/l/fr/developers/extend/apps/layout/page-layouts). Lors de la configuration d'un tableau de bord ou d'une page d'enregistrement, les utilisateurs peuvent ajouter un widget de composant frontal.
+* **Paramètres de l'application** — Défini avec [`defineSettingsFrontComponent()`](#custom-settings-component), le composant frontal s'affiche comme une section dans l'onglet **Settings** de l'application, à la place de l'interface utilisateur par défaut de configuration des variables.
-Un composant frontal seul n'est pas accessible depuis l'interface utilisateur — vous devez l'*exposer*. Les deux façons de le faire sont :
+Un composant frontal seul n'est pas accessible depuis l'interface utilisateur — vous devez l'*exposer*. Les trois façons de le faire sont :
* **L'associer à un [élément de menu de commande](/l/fr/developers/extend/apps/layout/command-menu-items)** — l'enregistre dans le menu de commande (Cmd+K) et, éventuellement, comme action rapide épinglée.
* **L'intégrer comme widget dans une [mise en page](/l/fr/developers/extend/apps/layout/page-layouts)** — le place sur la page de détails d'un enregistrement ou sur un tableau de bord.
+* **Le définir avec [`defineSettingsFrontComponent()`](#custom-settings-component)** — l'affiche comme une section dans l'onglet **Settings** de l'application, à la place de l'interface utilisateur par défaut de configuration des variables.
## Exemple de base
@@ -77,6 +79,34 @@ Cliquez dessus pour afficher le composant en ligne.
Au-delà des commandes, vous pouvez intégrer un composant frontal directement dans une page d'enregistrement en l'ajoutant comme widget dans une **mise en page**. Voir [mises en page](/l/fr/developers/extend/apps/layout/page-layouts) pour plus de détails.
+## Composant de paramètres personnalisé
+
+Pour remplacer l'interface utilisateur générée automatiquement pour la configuration des variables dans l'onglet **Settings** de votre application par votre propre composant, définissez-le avec `defineSettingsFrontComponent` au lieu de `defineFrontComponent`. Il utilise les mêmes [champs de configuration](#configuration-fields) (sauf `isHeadless`, qui n’est pas accepté puisqu’un composant de paramètres affiche toujours une interface utilisateur visible) et marque en plus le composant comme interface de paramètres de l’application.
+
+Le composant est affiché comme une section **à l’intérieur** de l’onglet Settings, et non comme un remplacement de l’onglet entier. Les sections gérées par le système de Twenty — mise à niveau automatique, App URL et connexions — sont toujours affichées au-dessus et ne peuvent pas être remplacées par l’application.
+
+```tsx src/front-components/app-settings.tsx
+import { defineSettingsFrontComponent } from 'twenty-sdk/define';
+
+const AppSettings = () => {
+ return (
+
+
My app settings
+ {/* render your own configuration UI here */}
+
+ );
+};
+
+export default defineSettingsFrontComponent({
+ universalIdentifier: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+ name: 'app-settings',
+ description: "Custom UI for the app's Settings tab",
+ component: AppSettings,
+});
+```
+
+Un seul composant frontal de paramètres est autorisé par application ; en déclarer plus d’un provoque l’échec de la compilation. Lorsqu’il est présent, l’onglet **Settings** de l’application affiche ce composant à la place de l’interface utilisateur de configuration des variables par défaut.
+
## Headless vs non-headless
Les composants frontaux existent en deux modes de rendu contrôlés par l’option `isHeadless` :
diff --git a/packages/twenty-docs/l/fr/developers/extend/apps/layout/overview.mdx b/packages/twenty-docs/l/fr/developers/extend/apps/layout/overview.mdx
index 7a1cfaf281..293ae1f6cc 100644
--- a/packages/twenty-docs/l/fr/developers/extend/apps/layout/overview.mdx
+++ b/packages/twenty-docs/l/fr/developers/extend/apps/layout/overview.mdx
@@ -45,12 +45,13 @@ La **couche de mise en page** d’une application Twenty est tout ce que l’uti
## Où l’application apparaît
-| Surface | Ce qu'il contrôle | Entité |
-| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
-| **Barre latérale** | Une entrée personnalisée pointant vers une vue enregistrée ou une URL externe | `defineNavigationMenuItem` |
-| **Liste des enregistrements** | Une configuration enregistrée pour un objet — colonnes visibles, ordre, filtres, groupes | `defineView` |
-| **Page de détails de l’enregistrement** | Les onglets et widgets sur une page d’enregistrement (celle de votre propre objet ou une page standard) | `definePageLayout`, `definePageLayoutTab` |
-| **À l’intérieur de n’importe lequel des éléments ci-dessus** | Un widget React personnalisé — boutons, formulaires, tableaux de bord, intégrations | `defineFrontComponent` |
-| **Menu de commande (Cmd+K)** | Une action rapide épinglée ou une commande masquée | `defineCommandMenuItem` |
+| Surface | Ce qu'il contrôle | Entité |
+| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
+| **Barre latérale** | Une entrée personnalisée pointant vers une vue enregistrée ou une URL externe | `defineNavigationMenuItem` |
+| **Liste des enregistrements** | Une configuration enregistrée pour un objet — colonnes visibles, ordre, filtres, groupes | `defineView` |
+| **Page de détails de l’enregistrement** | Les onglets et widgets sur une page d’enregistrement (celle de votre propre objet ou une page standard) | `definePageLayout`, `definePageLayoutTab` |
+| **À l’intérieur de n’importe lequel des éléments ci-dessus** | Un widget React personnalisé — boutons, formulaires, tableaux de bord, intégrations | `defineFrontComponent` |
+| **Paramètres de l’application** | Une section de configuration personnalisée dans l’onglet Paramètres de l’application, au lieu de l’interface utilisateur par défaut des variables | `defineSettingsFrontComponent` |
+| **Menu de commande (Cmd+K)** | Une action rapide épinglée ou une commande masquée | `defineCommandMenuItem` |
Les composants frontaux s’exécutent à l’intérieur d’un Web Worker isolé en utilisant Remote DOM — ils sont rendus *nativement* dans la page (et non dans une iframe), mais ne peuvent pas accéder directement à la page hôte ou au DOM. La communication avec Twenty se fait via une API hôte de passage de messages.
diff --git a/packages/twenty-docs/l/it/developers/extend/apps/config/application.mdx b/packages/twenty-docs/l/it/developers/extend/apps/config/application.mdx
index 9f043d9d20..ac53fcb3b7 100644
--- a/packages/twenty-docs/l/it/developers/extend/apps/config/application.mdx
+++ b/packages/twenty-docs/l/it/developers/extend/apps/config/application.mdx
@@ -37,6 +37,7 @@ Note:
* Le funzioni di pre-installazione, post-installazione e disinstallazione vengono rilevate automaticamente durante il build del manifest — non è necessario farne riferimento in `defineApplication()`.
* Il passaggio esplicito di `defaultRoleUniversalIdentifier` è ancora supportato per garantire la compatibilità con le versioni precedenti, ma è deprecato a favore di `defineApplicationRole()`.
* `serverVariables` sono configurazioni e segreti con ambito di istanza (ad esempio chiavi API). A differenza di `applicationVariables`, non dichiarano alcun valore nel manifest — l’operatore dello spazio di lavoro li compila dalle impostazioni dell’app e vengono iniettati nelle funzioni di logica solo una volta impostati.
+* Per eseguire il rendering di un'interfaccia di configurazione personalizzata all'interno della scheda **Settings** dell'app (al posto della sezione predefinita di configurazione delle variabili), dichiara un front component con [`defineSettingsFrontComponent()`](/l/it/developers/extend/apps/layout/front-components#custom-settings-component) in un proprio file. Ne è consentito solo uno per app. Le sezioni gestite dal sistema (auto-upgrade, App URL, connessioni) rimangono sempre visibili.
## Tipi di variabili
diff --git a/packages/twenty-docs/l/it/developers/extend/apps/layout/front-components.mdx b/packages/twenty-docs/l/it/developers/extend/apps/layout/front-components.mdx
index dd3c101997..0b25262436 100644
--- a/packages/twenty-docs/l/it/developers/extend/apps/layout/front-components.mdx
+++ b/packages/twenty-docs/l/it/developers/extend/apps/layout/front-components.mdx
@@ -8,15 +8,17 @@ I componenti front-end sono componenti React che vengono renderizzati direttamen
## Dove possono essere utilizzati i componenti front-end
-I componenti front-end possono essere renderizzati in due posizioni all'interno di Twenty:
+I componenti front-end possono essere renderizzati in tre posizioni all'interno di Twenty:
* **Pannello laterale** — I componenti front-end non headless si aprono nel pannello laterale destro. Questo è il comportamento predefinito quando un componente front-end viene avviato dal menu comandi.
* **Widget (dashboard e pagine dei record)** — I componenti front possono essere incorporati come widget all'interno dei [layout di pagina](/l/it/developers/extend/apps/layout/page-layouts). Quando si configura una dashboard o il layout di una pagina record, gli utenti possono aggiungere un widget del componente front-end.
+* **Impostazioni dell'app** — Definito con [`defineSettingsFrontComponent()`](#custom-settings-component), il componente front-end viene renderizzato come una sezione all'interno della scheda **Settings** dell'app, al posto dell'interfaccia utente predefinita per la configurazione delle variabili.
-Un componente front da solo non è raggiungibile dall'interfaccia utente: devi renderlo visibile. I due modi per farlo sono:
+Un componente front da solo non è raggiungibile dall'interfaccia utente: devi renderlo visibile. I tre modi per farlo sono:
* **Associarlo a un [elemento di menu dei comandi](/l/it/developers/extend/apps/layout/command-menu-items)** — lo registra nel menu dei comandi (Cmd+K) e, facoltativamente, come azione rapida fissata.
* **Incorporarlo come widget in un [layout di pagina](/l/it/developers/extend/apps/layout/page-layouts)** — lo posiziona nella pagina dei dettagli di un record o in una dashboard.
+* **Definirlo con [`defineSettingsFrontComponent()`](#custom-settings-component)** — lo renderizza come una sezione all'interno della scheda **Settings** dell'app, al posto dell'interfaccia utente predefinita per la configurazione delle variabili.
## Esempio di base
@@ -77,6 +79,34 @@ Fai clic per renderizzare il componente in linea.
Oltre ai comandi, puoi incorporare un componente front-end direttamente in una pagina record aggiungendolo come widget in un **layout di pagina**. Vedi [Layout di pagina](/l/it/developers/extend/apps/layout/page-layouts) per i dettagli.
+## Componente delle impostazioni personalizzato
+
+Per sostituire l'interfaccia utente di configurazione delle variabili generata automaticamente nella scheda **Settings** della tua app con il tuo componente, definiscilo con `defineSettingsFrontComponent` invece di `defineFrontComponent`. Utilizza gli stessi [campi di configurazione](#configuration-fields) (tranne `isHeadless`, che non è accettato poiché un componente delle impostazioni renderizza sempre un'interfaccia utente visibile) e inoltre contrassegna il componente come l'interfaccia delle impostazioni dell'app.
+
+Il componente viene renderizzato come una sezione **all'interno** della scheda Settings, non come una sostituzione dell'intera scheda. Le sezioni gestite dal sistema di Twenty — aggiornamento automatico, URL dell'app e connessioni — vengono sempre renderizzate sopra di essa e non possono essere sovrascritte dall'app.
+
+```tsx src/front-components/app-settings.tsx
+import { defineSettingsFrontComponent } from 'twenty-sdk/define';
+
+const AppSettings = () => {
+ return (
+
+
My app settings
+ {/* render your own configuration UI here */}
+
+ );
+};
+
+export default defineSettingsFrontComponent({
+ universalIdentifier: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+ name: 'app-settings',
+ description: "Custom UI for the app's Settings tab",
+ component: AppSettings,
+});
+```
+
+È consentito un solo componente di front-end delle impostazioni per app; dichiararne più di uno fa fallire la build. Quando presente, la scheda **Settings** dell'app renderizza questo componente al posto dell'interfaccia utente di configurazione delle variabili predefinita.
+
## Headless vs non headless
I componenti front-end prevedono due modalità di rendering controllate dall'opzione `isHeadless`:
diff --git a/packages/twenty-docs/l/it/developers/extend/apps/layout/overview.mdx b/packages/twenty-docs/l/it/developers/extend/apps/layout/overview.mdx
index e90ff60f2a..40d764085e 100644
--- a/packages/twenty-docs/l/it/developers/extend/apps/layout/overview.mdx
+++ b/packages/twenty-docs/l/it/developers/extend/apps/layout/overview.mdx
@@ -45,12 +45,13 @@ Il **livello di layout** di un'app Twenty è tutto ciò che l'utente vede: dove
## Dove viene visualizzata l'app
-| Superficie | Cosa controlla | Entità |
-| ----------------------------------------------- | ----------------------------------------------------------------------------------------- | ----------------------------------------- |
-| **Barra laterale** | Una voce personalizzata che collega a una vista salvata o a un URL esterno | `defineNavigationMenuItem` |
-| **Elenco record** | Una configurazione salvata per un oggetto — colonne visibili, ordine, filtri, gruppi | `defineView` |
-| **Pagina di dettaglio del record** | Le schede e i widget nella pagina di un record (del tuo oggetto o di un oggetto standard) | `definePageLayout`, `definePageLayoutTab` |
-| **All'interno di uno qualsiasi dei precedenti** | Un widget React personalizzato: pulsanti, moduli, dashboard, integrazioni | `defineFrontComponent` |
-| **Menu comandi (Cmd+K)** | Un'azione rapida fissata o un comando nascosto | `defineCommandMenuItem` |
+| Superficie | Cosa controlla | Entità |
+| ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
+| **Barra laterale** | Una voce personalizzata che collega a una vista salvata o a un URL esterno | `defineNavigationMenuItem` |
+| **Elenco record** | Una configurazione salvata per un oggetto — colonne visibili, ordine, filtri, gruppi | `defineView` |
+| **Pagina di dettaglio del record** | Le schede e i widget nella pagina di un record (del tuo oggetto o di un oggetto standard) | `definePageLayout`, `definePageLayoutTab` |
+| **All'interno di uno qualsiasi dei precedenti** | Un widget React personalizzato: pulsanti, moduli, dashboard, integrazioni | `defineFrontComponent` |
+| **Impostazioni dell'app** | Una sezione di configurazione personalizzata all'interno della scheda Impostazioni dell'app, al posto dell'interfaccia utente predefinita delle variabili | `defineSettingsFrontComponent` |
+| **Menu comandi (Cmd+K)** | Un'azione rapida fissata o un comando nascosto | `defineCommandMenuItem` |
I componenti front-end vengono eseguiti all'interno di un Web Worker isolato usando Remote DOM: vengono renderizzati in modo nativo nella pagina (non all'interno di un iframe), ma non possono accedere direttamente alla pagina host o al DOM. La comunicazione con Twenty avviene tramite un'API host basata sul passaggio di messaggi.
diff --git a/packages/twenty-docs/l/ja/developers/extend/apps/config/application.mdx b/packages/twenty-docs/l/ja/developers/extend/apps/config/application.mdx
index 4792e5a622..aece79ef83 100644
--- a/packages/twenty-docs/l/ja/developers/extend/apps/config/application.mdx
+++ b/packages/twenty-docs/l/ja/developers/extend/apps/config/application.mdx
@@ -37,6 +37,7 @@ export default defineApplication({
* プレインストール関数、ポストインストール関数、およびアンインストール関数は、マニフェストのビルド中に自動的に検出されるため、`defineApplication()` で参照する必要はありません。
* 後方互換性のために `defaultRoleUniversalIdentifier` を明示的に渡すことも依然としてサポートされていますが、`defineApplicationRole()` が推奨されるため、非推奨となっています。
* `serverVariables` はインスタンス単位の構成およびシークレット（例: API キー）です。 `applicationVariables` と異なり、マニフェスト内で値は宣言されません。ワークスペースのオペレーターがアプリの設定からそれらを入力し、設定された時点でのみロジック関数に注入されます。
+* アプリの **Settings** タブ内で（デフォルトの変数設定セクションの代わりに）カスタム設定 UI をレンダーするには、専用のファイル内で [`defineSettingsFrontComponent()`](/l/ja/developers/extend/apps/layout/front-components#custom-settings-component) を使用してフロントコンポーネントを宣言します。 アプリごとに 1 つのみ許可されています。 システム管理のセクション（自動アップグレード、App URL、接続）は常に表示されます。
## 変数の型
diff --git a/packages/twenty-docs/l/ja/developers/extend/apps/layout/front-components.mdx b/packages/twenty-docs/l/ja/developers/extend/apps/layout/front-components.mdx
index 09da4164a0..006f325766 100644
--- a/packages/twenty-docs/l/ja/developers/extend/apps/layout/front-components.mdx
+++ b/packages/twenty-docs/l/ja/developers/extend/apps/layout/front-components.mdx
@@ -8,15 +8,17 @@ icon: window-maximize
## フロントコンポーネントを使用できる場所
-フロントコンポーネントは、Twenty 内の2つの場所でレンダリングできます:
+フロントコンポーネントは、Twenty 内の3つの場所でレンダリングできます:
* **サイドパネル** — ヘッドレスでないフロントコンポーネントは、右側のサイドパネルで開きます。 フロントコンポーネントがコマンドメニューからトリガーされた場合のデフォルトの動作です。
* **ウィジェット（ダッシュボードとレコードページ）** — フロントコンポーネントは、[ページレイアウト](/l/ja/developers/extend/apps/layout/page-layouts)内にウィジェットとして埋め込めます。 ダッシュボードやレコードページのレイアウトを設定する際、ユーザーはフロントコンポーネントのウィジェットを追加できます。
+* **App settings** — [`defineSettingsFrontComponent()`](#custom-settings-component) で定義されたフロントコンポーネントは、アプリの **Settings** タブ内のセクションとして、デフォルトの変数設定 UI の代わりにレンダリングされます。
-フロントコンポーネント単体では UI から直接アクセスできないため、それを*表示*する必要があります。 それを行う方法は次の 2 つです。
+フロントコンポーネント単体では UI から直接アクセスできないため、それを*表示*する必要があります。 それを行う方法は次の3つです。
* **[コマンドメニュー項目](/l/ja/developers/extend/apps/layout/command-menu-items)とペアにする** — コマンドメニュー（Cmd+K）に登録し、必要に応じてピン留めされたクイックアクションとして登録します。
* **[ページレイアウト](/l/ja/developers/extend/apps/layout/page-layouts)内のウィジェットとして埋め込む** — レコードの詳細ページまたはダッシュボード上に配置します。
+* **[`defineSettingsFrontComponent()`](#custom-settings-component) で定義する** — アプリの **Settings** タブ内のセクションとして、デフォルトの変数設定 UI の代わりにレンダリングされます。
## 基本的な例
@@ -77,6 +79,34 @@ export default defineCommandMenuItem({
コマンド以外にも、**ページレイアウト**でウィジェットとして追加することで、フロントコンポーネントをレコードページに直接埋め込めます。 詳しくは[ページレイアウト](/l/ja/developers/extend/apps/layout/page-layouts)を参照してください。
+## カスタム設定コンポーネント
+
+アプリの **Settings** タブ内の自動生成された変数設定 UI を独自のコンポーネントに置き換えるには、`defineFrontComponent` ではなく `defineSettingsFrontComponent` で定義します。 このコンポーネントは、同じ[configuration fields](#configuration-fields)（ただし、設定コンポーネントは常に可視の UI をレンダーするため、受け付けられない `isHeadless` を除く）を受け取り、さらにこのコンポーネントをアプリの設定 UI としてマークします。
+
+このコンポーネントは、Settings タブ全体を置き換えるのではなく、そのタブの内部のセクションとしてレンダリングされます。 Twenty のシステム管理セクション（自動アップグレード、App URL、接続）は常にその上にレンダーされ、アプリ側で上書きすることはできません。
+
+```tsx src/front-components/app-settings.tsx
+import { defineSettingsFrontComponent } from 'twenty-sdk/define';
+
+const AppSettings = () => {
+ return (
+
+
My app settings
+ {/* render your own configuration UI here */}
+
+ );
+};
+
+export default defineSettingsFrontComponent({
+ universalIdentifier: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+ name: 'app-settings',
+ description: "Custom UI for the app's Settings tab",
+ component: AppSettings,
+});
+```
+
+1 つのアプリにつき許可される settings front コンポーネントは 1 つだけであり、2 つ以上を宣言するとビルドは失敗します。 存在する場合、アプリの **Settings** タブはデフォルトの変数設定 UI の代わりにこのコンポーネントをレンダーします。
+
## ヘッドレスと非ヘッドレス
フロントコンポーネントには、`isHeadless` オプションで制御される2つのレンダリングモードがあります:
diff --git a/packages/twenty-docs/l/ja/developers/extend/apps/layout/overview.mdx b/packages/twenty-docs/l/ja/developers/extend/apps/layout/overview.mdx
index 8ba07f5a7b..ce128ae7c8 100644
--- a/packages/twenty-docs/l/ja/developers/extend/apps/layout/overview.mdx
+++ b/packages/twenty-docs/l/ja/developers/extend/apps/layout/overview.mdx
@@ -51,6 +51,7 @@ Twenty アプリの **レイアウトレイヤー** とは、ユーザーに見
| **レコードリスト** | オブジェクト向けの保存済み構成 — 表示カラム、順序、フィルター、グループ | `defineView` |
| **レコード詳細ページ** | レコードページ上のタブおよびウィジェット（独自オブジェクトのもの、または標準オブジェクトのもの） | `definePageLayout`, `definePageLayoutTab` |
| **上記いずれかの内部** | カスタム React ウィジェット — ボタン、フォーム、ダッシュボード、連携機能 | `defineFrontComponent` |
+| **アプリ設定** | アプリの「設定」タブ内にある、デフォルトの変数 UI に代わるカスタム設定セクション | `defineSettingsFrontComponent` |
| **コマンドメニュー (Cmd+K)** | ピン留めされたクイックアクションまたは非表示コマンド | `defineCommandMenuItem` |
フロントコンポーネントは Remote DOM を使用して、分離された Web Worker 内で実行されます。ページ内に *ネイティブに*（iframe 内ではなく）レンダリングされますが、ホストページや DOM へ直接アクセスすることはできません。 Twenty との通信は、メッセージパッシング型のホスト API を通じて行われます。
diff --git a/packages/twenty-docs/l/ko/developers/extend/apps/config/application.mdx b/packages/twenty-docs/l/ko/developers/extend/apps/config/application.mdx
index fbf3a2fe4d..bec6b4c19b 100644
--- a/packages/twenty-docs/l/ko/developers/extend/apps/config/application.mdx
+++ b/packages/twenty-docs/l/ko/developers/extend/apps/config/application.mdx
@@ -37,6 +37,7 @@ export default defineApplication({
* 설치 전, 설치 후, 제거 함수는 매니페스트 빌드 중 자동으로 감지됩니다 — `defineApplication()`에서 별도로 참조할 필요가 없습니다.
* 하위 호환성을 위해 `defaultRoleUniversalIdentifier`를 명시적으로 전달하는 방식도 계속 지원되지만, 이제는 `defineApplicationRole()` 사용을 권장하며 이전 방식은 더 이상 권장되지 않습니다.
* `serverVariables`는 인스턴스 범위의 구성 및 비밀(예: API 키)입니다. `applicationVariables`와 달리, 매니페스트에는 값을 선언하지 않으며, 워크스페이스 운영자가 앱 설정에서 값을 채워 넣으면 설정된 이후에만 로직 함수에 주입됩니다.
+* 앱의 **Settings** 탭에서 기본 변수 구성 섹션 대신 사용자 지정 구성 UI를 렌더링하려면, 별도의 파일에서 [`defineSettingsFrontComponent()`](/l/ko/developers/extend/apps/layout/front-components#custom-settings-component)를 사용하여 프론트 컴포넌트를 선언하세요. 앱당 하나만 허용됩니다. 시스템에서 관리하는 섹션(auto-upgrade, App URL, connections)은 항상 표시된 상태로 유지됩니다.
## 변수 유형
diff --git a/packages/twenty-docs/l/ko/developers/extend/apps/layout/front-components.mdx b/packages/twenty-docs/l/ko/developers/extend/apps/layout/front-components.mdx
index 9d8423b2af..5887c8068f 100644
--- a/packages/twenty-docs/l/ko/developers/extend/apps/layout/front-components.mdx
+++ b/packages/twenty-docs/l/ko/developers/extend/apps/layout/front-components.mdx
@@ -8,15 +8,17 @@ icon: window-maximize
## 프런트 컴포넌트를 사용할 수 있는 위치
-프런트 컴포넌트는 Twenty 내에서 두 위치에 렌더링될 수 있습니다:
+프런트 컴포넌트는 Twenty 내에서 세 위치에 렌더링될 수 있습니다:
* **사이드 패널** — 비헤드리스 프런트 컴포넌트는 오른쪽 사이드 패널에서 열립니다. 이는 명령 메뉴에서 프런트 컴포넌트를 트리거할 때의 기본 동작입니다.
* **위젯(대시보드 및 레코드 페이지)** — 프런트 컴포넌트를 [페이지 레이아웃](/l/ko/developers/extend/apps/layout/page-layouts) 내 위젯으로 삽입할 수 있습니다. 대시보드 또는 레코드 페이지 레이아웃을 구성할 때 사용자는 프런트 컴포넌트 위젯을 추가할 수 있습니다.
+* **App settings** — [`defineSettingsFrontComponent()`](#custom-settings-component)으로 정의되며, 이 프런트 컴포넌트는 기본 변수 구성 UI 대신 앱의 **Settings** 탭 내부 섹션으로 렌더링됩니다.
-프런트 컴포넌트만으로는 UI에서 직접 접근할 수 없으므로 *표시*해야 합니다. 이를 수행하는 두 가지 방법은 다음과 같습니다.
+프런트 컴포넌트만으로는 UI에서 직접 접근할 수 없으므로 *표시*해야 합니다. 이를 수행하는 세 가지 방법은 다음과 같습니다.
* **[명령 메뉴 항목](/l/ko/developers/extend/apps/layout/command-menu-items)과 연결** — 명령 메뉴(Cmd+K)에 등록하고, 선택적으로 고정된 빠른 작업으로 등록합니다.
* **[페이지 레이아웃](/l/ko/developers/extend/apps/layout/page-layouts)에 위젯으로 포함** — 레코드 상세 페이지 또는 대시보드에 배치합니다.
+* **[`defineSettingsFrontComponent()`](#custom-settings-component)로 정의** — 기본 변수 구성 UI 대신 앱의 **Settings** 탭 내부 섹션으로 렌더링합니다.
## 기본 예제
@@ -77,6 +79,34 @@ export default defineCommandMenuItem({
명령 외에도, 페이지 레이아웃에 위젯으로 추가하여 레코드 페이지에 프런트 컴포넌트를 직접 임베드할 수 있습니다. 자세한 내용은 [페이지 레이아웃](/l/ko/developers/extend/apps/layout/page-layouts)을 참조하세요.
+## 사용자 정의 설정 컴포넌트
+
+앱의 **Settings** 탭에서 자동 생성되는 변수 구성 UI를 사용자 정의 컴포넌트로 대체하려면, `defineFrontComponent` 대신 `defineSettingsFrontComponent`로 정의하세요. 이 설정 컴포넌트는 항상 눈에 보이는 UI를 렌더링하므로 허용되지 않는 `isHeadless`를 제외하고, 동일한 [구성 필드](#configuration-fields)를 사용하며, 추가로 이 컴포넌트를 앱의 설정 UI로 표시합니다.
+
+이 컴포넌트는 전체 탭을 대체하는 것이 아니라, Settings 탭 내부의 섹션으로 렌더링됩니다. Twenty의 시스템 관리 섹션(자동 업그레이드, App URL, 연결)은 항상 이 컴포넌트 위에 렌더링되며, 앱에서 이를 재정의할 수 없습니다.
+
+```tsx src/front-components/app-settings.tsx
+import { defineSettingsFrontComponent } from 'twenty-sdk/define';
+
+const AppSettings = () => {
+ return (
+
+
My app settings
+ {/* render your own configuration UI here */}
+
+ );
+};
+
+export default defineSettingsFrontComponent({
+ universalIdentifier: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+ name: 'app-settings',
+ description: "Custom UI for the app's Settings tab",
+ component: AppSettings,
+});
+```
+
+앱당 하나의 설정 프런트 컴포넌트만 허용되며, 둘 이상 선언하면 빌드가 실패합니다. 설정 프런트 컴포넌트가 존재하는 경우, 앱의 **Settings** 탭은 기본 변수 구성 UI 대신 이 컴포넌트를 렌더링합니다.
+
## 헤드리스 vs 비헤드리스
프런트 컴포넌트는 `isHeadless` 옵션으로 제어되는 두 가지 렌더링 모드를 제공합니다:
diff --git a/packages/twenty-docs/l/ko/developers/extend/apps/layout/overview.mdx b/packages/twenty-docs/l/ko/developers/extend/apps/layout/overview.mdx
index 7b43441583..5fff411786 100644
--- a/packages/twenty-docs/l/ko/developers/extend/apps/layout/overview.mdx
+++ b/packages/twenty-docs/l/ko/developers/extend/apps/layout/overview.mdx
@@ -45,12 +45,13 @@ Twenty 앱의 **레이아웃 레이어**는 사용자가 보는 모든 것을
## 앱이 노출되는 위치
-| 표시 위치 | 제어하는 항목 | 엔터티 |
-| ----------------- | --------------------------------------- | ----------------------------------------- |
-| **사이드바** | 저장된 보기 또는 외부 URL에 연결되는 커스텀 항목 | `defineNavigationMenuItem` |
-| **레코드 목록** | 오브젝트에 대한 저장된 구성 — 표시되는 열, 정렬 순서, 필터, 그룹 | `defineView` |
-| **레코드 상세 페이지** | 레코드 페이지(사용자 정의 오브젝트 또는 표준 오브젝트)의 탭과 위젯 | `definePageLayout`, `definePageLayoutTab` |
-| **위의 어느 위치 내부** | 커스텀 React 위젯 — 버튼, 폼, 대시보드, 통합 기능 | `defineFrontComponent` |
-| **명령 메뉴 (Cmd+K)** | 고정된 빠른 작업 또는 숨겨진 명령 | `defineCommandMenuItem` |
+| 표시 위치 | 제어하는 항목 | 엔터티 |
+| ----------------- | ---------------------------------------- | ----------------------------------------- |
+| **사이드바** | 저장된 보기 또는 외부 URL에 연결되는 커스텀 항목 | `defineNavigationMenuItem` |
+| **레코드 목록** | 오브젝트에 대한 저장된 구성 — 표시되는 열, 정렬 순서, 필터, 그룹 | `defineView` |
+| **레코드 상세 페이지** | 레코드 페이지(사용자 정의 오브젝트 또는 표준 오브젝트)의 탭과 위젯 | `definePageLayout`, `definePageLayoutTab` |
+| **위의 어느 위치 내부** | 커스텀 React 위젯 — 버튼, 폼, 대시보드, 통합 기능 | `defineFrontComponent` |
+| **앱 설정** | 기본 변수 UI 대신 앱의 설정 탭 안에 포함되는 사용자 지정 구성 섹션 | `defineSettingsFrontComponent` |
+| **명령 메뉴 (Cmd+K)** | 고정된 빠른 작업 또는 숨겨진 명령 | `defineCommandMenuItem` |
프런트 컴포넌트는 Remote DOM을 사용하는 격리된 Web Worker 내부에서 실행됩니다. 이들은 페이지 안에서 네이티브하게 렌더링되지만(iframe 내부가 아님), 호스트 페이지나 DOM에 직접 접근할 수는 없습니다. Twenty와의 통신은 메시지 전달 호스트 API를 통해 이루어집니다.
diff --git a/packages/twenty-docs/l/pt/developers/extend/apps/config/application.mdx b/packages/twenty-docs/l/pt/developers/extend/apps/config/application.mdx
index 00207ac5d4..5d0641cecf 100644
--- a/packages/twenty-docs/l/pt/developers/extend/apps/config/application.mdx
+++ b/packages/twenty-docs/l/pt/developers/extend/apps/config/application.mdx
@@ -37,6 +37,7 @@ Notas:
* As funções de pré-instalação, pós-instalação e desinstalação são detectadas automaticamente durante a construção do manifesto — você não precisa referenciá-las em `defineApplication()`.
* Passar `defaultRoleUniversalIdentifier` explicitamente ainda é compatível para retrocompatibilidade, mas foi preterido em favor de `defineApplicationRole()`.
* `serverVariables` são configurações e segredos com escopo de instância (por exemplo, chaves de API). Ao contrário de `applicationVariables`, eles não declaram nenhum valor no manifesto — o operador do workspace os preenche nas configurações do app, e eles são injetados nas funções de lógica somente depois de definidos.
+* Para renderizar uma interface de configuração personalizada na guia **Configurações** do app (no lugar da seção padrão de configuração de variáveis), declare um componente de front-end com [`defineSettingsFrontComponent()`](/l/pt/developers/extend/apps/layout/front-components#custom-settings-component) em seu próprio arquivo. Só é permitido um por app. Seções gerenciadas pelo sistema (atualização automática, URL do app, conexões) permanecem sempre visíveis.
## Tipos de variáveis
diff --git a/packages/twenty-docs/l/pt/developers/extend/apps/layout/front-components.mdx b/packages/twenty-docs/l/pt/developers/extend/apps/layout/front-components.mdx
index d1c68d5716..3975533076 100644
--- a/packages/twenty-docs/l/pt/developers/extend/apps/layout/front-components.mdx
+++ b/packages/twenty-docs/l/pt/developers/extend/apps/layout/front-components.mdx
@@ -8,15 +8,17 @@ Componentes de front-end são componentes React que renderizam diretamente dentr
## Onde os componentes de front-end podem ser usados
-Os componentes de front-end podem ser renderizados em dois locais dentro do Twenty:
+Os componentes de front-end podem ser renderizados em três locais dentro do Twenty:
* **Painel lateral** — Componentes de front-end não headless abrem no painel lateral direito. Este é o comportamento padrão quando um componente de front-end é acionado pelo menu de comandos.
* **Widgets (painéis e páginas de registro)** — Componentes de front-end podem ser incorporados como widgets dentro de [layouts de página](/l/pt/developers/extend/apps/layout/page-layouts). Ao configurar um painel ou o layout de uma página de registro, os usuários podem adicionar um widget de componente de front-end.
+* **Configurações do aplicativo** — Definido com [`defineSettingsFrontComponent()`](#custom-settings-component), o componente de front-end é renderizado como uma seção dentro da aba **Settings** do aplicativo, no lugar da interface padrão de configuração de variáveis.
-Um componente de front-end por si só não é acessível pela UI — é preciso *exibi-lo*. As duas maneiras de fazer isso são:
+Um componente de front-end por si só não é acessível pela UI — é preciso *exibi-lo*. As três maneiras de fazer isso são:
* **Associe-o a um [item do menu de comandos](/l/pt/developers/extend/apps/layout/command-menu-items)** — registra-o no menu de comandos (Cmd+K) e, opcionalmente, como uma ação rápida fixada.
* **Incorpore-o como um widget em um [layout de página](/l/pt/developers/extend/apps/layout/page-layouts)** — posiciona-o na página de detalhes de um registro ou em um painel.
+* **Definindo-o com [`defineSettingsFrontComponent()`](#custom-settings-component)** — o componente é renderizado como uma seção dentro da aba **Settings** do aplicativo, no lugar da interface padrão de configuração de variáveis.
## Exemplo básico
@@ -77,6 +79,34 @@ Clique nele para renderizar o componente inline.
Além de comandos, você pode incorporar um componente de front-end diretamente em uma página de registro adicionando-o como um widget em um **layout de página**. Veja [Layouts de página](/l/pt/developers/extend/apps/layout/page-layouts) para detalhes.
+## Componente de configurações personalizadas
+
+Para substituir a interface de configuração de variáveis gerada automaticamente na aba **Settings** do seu aplicativo pelo seu próprio componente, defina-o com `defineSettingsFrontComponent` em vez de `defineFrontComponent`. Ele usa os mesmos [campos de configuração](#configuration-fields) (exceto `isHeadless`, que não é aceito, já que um componente de configurações sempre renderiza uma interface visível) e, adicionalmente, marca o componente como a interface de configurações do app.
+
+O componente é renderizado como uma seção **dentro** da aba Settings, e não como uma substituição de toda a aba. As seções gerenciadas pelo sistema do Twenty — atualização automática, App URL e conexões — são sempre renderizadas acima dela e não podem ser substituídas pelo app.
+
+```tsx src/front-components/app-settings.tsx
+import { defineSettingsFrontComponent } from 'twenty-sdk/define';
+
+const AppSettings = () => {
+ return (
+
+
My app settings
+ {/* render your own configuration UI here */}
+
+ );
+};
+
+export default defineSettingsFrontComponent({
+ universalIdentifier: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+ name: 'app-settings',
+ description: "Custom UI for the app's Settings tab",
+ component: AppSettings,
+});
+```
+
+Apenas um componente de configurações de front-end é permitido por app; declarar mais de um faz com que a build falhe. Quando presente, a aba **Settings** do app renderiza este componente no lugar da interface padrão de configuração de variáveis.
+
## Headless vs não headless
Os componentes de front-end têm dois modos de renderização controlados pela opção `isHeadless`:
diff --git a/packages/twenty-docs/l/pt/developers/extend/apps/layout/overview.mdx b/packages/twenty-docs/l/pt/developers/extend/apps/layout/overview.mdx
index 97cf20cc77..e306d9063d 100644
--- a/packages/twenty-docs/l/pt/developers/extend/apps/layout/overview.mdx
+++ b/packages/twenty-docs/l/pt/developers/extend/apps/layout/overview.mdx
@@ -45,12 +45,13 @@ A **camada de layout** de um app do Twenty é tudo o que o usuário vê: onde o
## Onde o app aparece
-| Superfície | O que controla | Entidade |
-| ------------------------------------------- | ------------------------------------------------------------------------------------------ | ----------------------------------------- |
-| **Barra lateral** | Uma entrada personalizada que aponta para uma visualização salva ou URL externa | `defineNavigationMenuItem` |
-| **Lista de registros** | Uma configuração salva para um objeto — colunas visíveis, ordem, filtros, grupos | `defineView` |
-| **Página de detalhes do registro** | As abas e widgets em uma página de registro (do seu próprio objeto ou de um objeto padrão) | `definePageLayout`, `definePageLayoutTab` |
-| **Dentro de qualquer uma das opções acima** | Um widget React personalizado — botões, formulários, dashboards, integrações | `defineFrontComponent` |
-| **Menu de comandos (Cmd+K)** | Uma ação rápida fixada ou comando oculto | `defineCommandMenuItem` |
+| Superfície | O que controla | Entidade |
+| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
+| **Barra lateral** | Uma entrada personalizada que aponta para uma visualização salva ou URL externa | `defineNavigationMenuItem` |
+| **Lista de registros** | Uma configuração salva para um objeto — colunas visíveis, ordem, filtros, grupos | `defineView` |
+| **Página de detalhes do registro** | As abas e widgets em uma página de registro (do seu próprio objeto ou de um objeto padrão) | `definePageLayout`, `definePageLayoutTab` |
+| **Dentro de qualquer uma das opções acima** | Um widget React personalizado — botões, formulários, dashboards, integrações | `defineFrontComponent` |
+| **Configurações do app** | Uma seção de configuração personalizada dentro da aba Configurações do app, em vez da interface padrão de variáveis | `defineSettingsFrontComponent` |
+| **Menu de comandos (Cmd+K)** | Uma ação rápida fixada ou comando oculto | `defineCommandMenuItem` |
Os componentes de front-end são executados dentro de um Web Worker isolado usando Remote DOM — eles são renderizados *nativamente* na página (não dentro de um iframe), mas não podem acessar diretamente a página host ou o DOM. A comunicação com o Twenty acontece por meio de uma API de host com passagem de mensagens.
diff --git a/packages/twenty-docs/l/ro/developers/extend/apps/config/application.mdx b/packages/twenty-docs/l/ro/developers/extend/apps/config/application.mdx
index f6fd07c242..a0705592d2 100644
--- a/packages/twenty-docs/l/ro/developers/extend/apps/config/application.mdx
+++ b/packages/twenty-docs/l/ro/developers/extend/apps/config/application.mdx
@@ -37,6 +37,7 @@ Notițe:
* Funcțiile de pre-instalare, post-instalare și dezinstalare sunt detectate automat în timpul construirii manifestului — nu este nevoie să faceți referire la ele în `defineApplication()`.
* Transmiterea explicită a `defaultRoleUniversalIdentifier` este în continuare acceptată pentru compatibilitate retroactivă, dar este considerată învechită în favoarea `defineApplicationRole()`.
* `serverVariables` sunt configurări și secrete la nivel de instanță (de ex. chei API). Spre deosebire de `applicationVariables`, ele nu declară nicio valoare în manifest — operatorul spațiului de lucru le completează din setările aplicației și sunt injectate în funcțiile de logică doar după ce au fost setate.
+* Pentru a afișa o interfață de configurare personalizată în fila **Settings** a aplicației (în locul secțiunii implicite de configurare a variabilelor), declară un front component cu [`defineSettingsFrontComponent()`](/l/ro/developers/extend/apps/layout/front-components#custom-settings-component) într-un fișier separat. Este permis doar unul per aplicație. Secțiunile gestionate de sistem (auto-upgrade, App URL, connections) rămân întotdeauna vizibile.
## Tipuri de variabile
diff --git a/packages/twenty-docs/l/ro/developers/extend/apps/layout/front-components.mdx b/packages/twenty-docs/l/ro/developers/extend/apps/layout/front-components.mdx
index 437efad9a7..d5ee8f2628 100644
--- a/packages/twenty-docs/l/ro/developers/extend/apps/layout/front-components.mdx
+++ b/packages/twenty-docs/l/ro/developers/extend/apps/layout/front-components.mdx
@@ -8,15 +8,17 @@ Componentele front-end sunt componente React care se afișează direct în inter
## Unde pot fi utilizate componentele front-end
-Componentele front-end pot fi afișate în două locații în cadrul Twenty:
+Componentele front-end pot fi afișate în trei locații în cadrul Twenty:
* **Panou lateral** — Componentele front-end care nu sunt headless se deschid în panoul lateral din dreapta. Acesta este comportamentul implicit atunci când o componentă front-end este declanșată din meniul de comenzi.
* **Widgeturi (tablouri de bord și pagini de înregistrare)** — Componentele frontale pot fi încorporate ca widgeturi în [machetele de pagină](/l/ro/developers/extend/apps/layout/page-layouts). La configurarea unui tablou de bord sau a machetei unei pagini de înregistrare, utilizatorii pot adăuga un widget de componentă front-end.
+* **Setările aplicației** — Definită cu [`defineSettingsFrontComponent()`](#custom-settings-component), componenta front-end este afișată ca o secțiune în interiorul filei **Settings** a aplicației, în locul interfeței UI implicite de configurare a variabilelor.
-O componentă frontală, de una singură, nu este accesibilă din interfața utilizatorului — trebuie să o *expui*. Cele două moduri de a face asta sunt:
+O componentă frontală, de una singură, nu este accesibilă din interfața utilizatorului — trebuie să o *expui*. Cele trei moduri de a face asta sunt:
* **Asociază-l cu un [element de meniu de comenzi](/l/ro/developers/extend/apps/layout/command-menu-items)** — îl înregistrează în meniul de comenzi (Cmd+K) și, opțional, ca acțiune rapidă fixată.
* **Încorporează-l ca widget într-o [machetă de pagină](/l/ro/developers/extend/apps/layout/page-layouts)** — îl plasează pe pagina de detalii a unei înregistrări sau pe un tablou de bord.
+* **Definește-o cu [`defineSettingsFrontComponent()`](#custom-settings-component)** — o afișează ca o secțiune în interiorul filei **Settings** a aplicației, în locul interfeței UI implicite de configurare a variabilelor.
## Exemplu de bază
@@ -77,6 +79,34 @@ Faceți clic pe el pentru a afișa componenta inline.
Dincolo de comenzi, puteți încorpora o componentă front-end direct într-o pagină de înregistrare adăugând-o ca widget într-un **layout de pagină**. Vezi [Machete de pagină](/l/ro/developers/extend/apps/layout/page-layouts) pentru detalii.
+## Componentă de setări personalizată
+
+Pentru a înlocui interfața UI de configurare a variabilelor generată automat din fila **Settings** a aplicației cu propria ta componentă, definește-o cu `defineSettingsFrontComponent` în loc de `defineFrontComponent`. Acesta folosește aceleași [câmpuri de configurare](#configuration-fields) (cu excepția lui `isHeadless`, care nu este acceptat deoarece o componentă de setări afișează întotdeauna o interfață vizibilă) și, în plus, marchează componenta ca interfața de setări a aplicației.
+
+Componenta este afișată ca o secțiune în interiorul filei Settings, nu ca un înlocuitor pentru întreaga filă. Secțiunile gestionate de sistem ale Twenty — actualizare automată, URL aplicație și conexiuni — sunt întotdeauna afișate deasupra și nu pot fi suprascrise de aplicație.
+
+```tsx src/front-components/app-settings.tsx
+import { defineSettingsFrontComponent } from 'twenty-sdk/define';
+
+const AppSettings = () => {
+ return (
+
+
My app settings
+ {/* render your own configuration UI here */}
+
+ );
+};
+
+export default defineSettingsFrontComponent({
+ universalIdentifier: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+ name: 'app-settings',
+ description: "Custom UI for the app's Settings tab",
+ component: AppSettings,
+});
+```
+
+Este permisă o singură componentă front de setări pentru fiecare aplicație; declararea a mai mult de una duce la eșecul build-ului. Atunci când este prezentă, fila **Settings** a aplicației afișează această componentă în locul interfeței implicite de configurare a variabilelor.
+
## Headless vs non-headless
Componentele front-end au două moduri de randare controlate de opțiunea `isHeadless`:
diff --git a/packages/twenty-docs/l/ro/developers/extend/apps/layout/overview.mdx b/packages/twenty-docs/l/ro/developers/extend/apps/layout/overview.mdx
index 53f5eb824d..d395ab3e7a 100644
--- a/packages/twenty-docs/l/ro/developers/extend/apps/layout/overview.mdx
+++ b/packages/twenty-docs/l/ro/developers/extend/apps/layout/overview.mdx
@@ -45,12 +45,13 @@ icon: table-columns
## Unde este afișată aplicația
-| Suprafață | Ce controlează | Entitate |
-| -------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
-| **Bară laterală** | O intrare personalizată care face legătura către o vizualizare salvată sau un URL extern | `defineNavigationMenuItem` |
-| **Listă de înregistrări** | O configurație salvată pentru un obiect — coloane vizibile, ordine, filtre, grupuri | `defineView` |
-| **Pagină de detalii a unei înregistrări** | Filele și widgeturile de pe o pagină de înregistrare (ale propriului tău obiect sau ale unuia standard) | `definePageLayout`, `definePageLayoutTab` |
-| **În interiorul oricăreia dintre cele de mai sus** | Un widget React personalizat — butoane, formulare, dashboarduri, integrări | `defineFrontComponent` |
-| **Meniul de comenzi (Cmd+K)** | O acțiune rapidă fixată sau o comandă ascunsă | `defineCommandMenuItem` |
+| Suprafață | Ce controlează | Entitate |
+| -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
+| **Bară laterală** | O intrare personalizată care face legătura către o vizualizare salvată sau un URL extern | `defineNavigationMenuItem` |
+| **Listă de înregistrări** | O configurație salvată pentru un obiect — coloane vizibile, ordine, filtre, grupuri | `defineView` |
+| **Pagină de detalii a unei înregistrări** | Filele și widgeturile de pe o pagină de înregistrare (ale propriului tău obiect sau ale unuia standard) | `definePageLayout`, `definePageLayoutTab` |
+| **În interiorul oricăreia dintre cele de mai sus** | Un widget React personalizat — butoane, formulare, dashboarduri, integrări | `defineFrontComponent` |
+| **Setări ale aplicației** | O secțiune de configurare personalizată din fila Setări a aplicației, în locul interfeței implicite pentru variabile | `defineSettingsFrontComponent` |
+| **Meniul de comenzi (Cmd+K)** | O acțiune rapidă fixată sau o comandă ascunsă | `defineCommandMenuItem` |
Componentele front rulează în interiorul unui Web Worker izolat folosind Remote DOM — acestea sunt redate *nativ* în pagină (nu într-un iframe), dar nu pot accesa direct pagina gazdă sau DOM-ul. Comunicarea cu Twenty se face printr-un API al gazdei bazat pe transmiterea de mesaje.
diff --git a/packages/twenty-docs/l/tr/developers/extend/apps/config/application.mdx b/packages/twenty-docs/l/tr/developers/extend/apps/config/application.mdx
index e09e85ad7a..1bcd6a2fbb 100644
--- a/packages/twenty-docs/l/tr/developers/extend/apps/config/application.mdx
+++ b/packages/twenty-docs/l/tr/developers/extend/apps/config/application.mdx
@@ -37,6 +37,7 @@ Notlar:
* Kurulum öncesi, kurulum sonrası ve kaldırma fonksiyonları manifest derlemesi sırasında otomatik olarak algılanır — bunlara `defineApplication()` içinde referans vermeniz gerekmez.
* Geriye dönük uyumluluk için `defaultRoleUniversalIdentifier` değerini açıkça geçmek hâlâ desteklenmektedir, ancak `defineApplicationRole()` lehine kullanımdan kaldırılmıştır.
* `serverVariables`, API anahtarları gibi örnek düzeyindeki yapılandırmalar ve gizli bilgilerdir. `applicationVariables`'ın aksine, manifest içinde herhangi bir değer belirtmezler — çalışma alanı operatörü bunları uygulamanın ayarlarından doldurur ve yalnızca ayarlandıklarında mantık fonksiyonlarına enjekte edilirler.
+* Uygulamanın **Ayarlar** sekmesinde (varsayılan değişken yapılandırma bölümünün yerine) özel bir yapılandırma arayüzü oluşturmak için, kendi dosyasında [`defineSettingsFrontComponent()`](/l/tr/developers/extend/apps/layout/front-components#custom-settings-component) ile bir ön bileşen tanımlayın. Her uygulama için yalnızca bir tane olabilir. Sistem tarafından yönetilen bölümler (otomatik yükseltme, App URL, bağlantılar) her zaman görünür durumda kalır.
## Değişken türleri
diff --git a/packages/twenty-docs/l/tr/developers/extend/apps/layout/front-components.mdx b/packages/twenty-docs/l/tr/developers/extend/apps/layout/front-components.mdx
index 4baa83637f..f07fe2f33d 100644
--- a/packages/twenty-docs/l/tr/developers/extend/apps/layout/front-components.mdx
+++ b/packages/twenty-docs/l/tr/developers/extend/apps/layout/front-components.mdx
@@ -8,15 +8,17 @@ icon: window-maximize
## Ön uç bileşenlerinin kullanılabileceği yerler
-Ön uç bileşenler, Twenty içinde iki konumda işlenebilir:
+Ön uç bileşenler, Twenty içinde üç konumda işlenebilir:
* **Yan panel** — Headless olmayan ön uç bileşenler, sağ taraftaki yan panelde açılır. Bir ön uç bileşeni komut menüsünden tetiklendiğinde varsayılan davranış budur.
* **Widget'lar (panolar ve kayıt sayfaları)** — Ön uç bileşenler, [sayfa düzenleri](/l/tr/developers/extend/apps/layout/page-layouts) içinde widget olarak gömülebilir. Bir pano veya kayıt sayfası düzeni yapılandırılırken kullanıcılar bir ön uç bileşen widget'ı ekleyebilir.
+* **Uygulama ayarları** — [`defineSettingsFrontComponent()`](#custom-settings-component) ile tanımlandığında, ön uç bileşeni, varsayılan değişken yapılandırma kullanıcı arayüzü yerine uygulamanın **Settings** sekmesi içinde bir bölüm olarak görüntülenir.
-Tek başına bir ön uç bileşenine kullanıcı arayüzünden erişilemez — onu görünür hâle getirmeniz gerekir. Bunu yapmanın iki yolu vardır:
+Tek başına bir ön uç bileşenine kullanıcı arayüzünden erişilemez — onu görünür hâle getirmeniz gerekir. Bunu yapmanın üç yolu vardır:
* **Onu bir [komut menüsü öğesi](/l/tr/developers/extend/apps/layout/command-menu-items) ile eşleştirin** — komut menüsüne (Cmd+K) ve isteğe bağlı olarak sabitlenmiş hızlı işlem olarak kaydeder.
* **Onu bir [sayfa düzeni](/l/tr/developers/extend/apps/layout/page-layouts) içinde widget olarak gömün** — bir kaydın ayrıntı sayfasına veya panosuna yerleştirir.
+* **Bunu [`defineSettingsFrontComponent()`](#custom-settings-component) ile tanımlayın** — varsayılan değişken yapılandırma kullanıcı arayüzü yerine uygulamanın **Settings** sekmesi içinde bir bölüm olarak görüntülenir.
## Basit örnek
@@ -77,6 +79,34 @@ Bileşeni satır içi işlemek için üzerine tıklayın.
Komutların ötesinde, bir ön uç bileşenini bir **sayfa düzeninde** widget olarak ekleyerek doğrudan bir kayıt sayfasına gömebilirsiniz. Ayrıntılar için [Sayfa Düzenleri](/l/tr/developers/extend/apps/layout/page-layouts) bölümüne bakın.
+## Özel ayarlar bileşeni
+
+Uygulamanızın **Settings** sekmesindeki otomatik oluşturulan değişken yapılandırma kullanıcı arayüzünü kendi bileşeninizle değiştirmek için, `defineFrontComponent` yerine `defineSettingsFrontComponent` ile tanımlayın. Ayarlar bileşeni her zaman görünür bir kullanıcı arayüzü oluşturduğundan, kabul edilmeyen `isHeadless` dışında, aynı [yapılandırma alanlarını](#configuration-fields) alır ve ek olarak bileşeni uygulamanın ayarlar arayüzü olarak işaretler.
+
+Bileşen, tüm sekmenin yerine geçmek yerine, Settings sekmesi içinde bir bölüm olarak görüntülenir. Twenty'nin sistem tarafından yönetilen bölümleri — otomatik yükseltme, App URL ve bağlantılar — her zaman bunun üstünde görüntülenir ve uygulama tarafından geçersiz kılınamaz.
+
+```tsx src/front-components/app-settings.tsx
+import { defineSettingsFrontComponent } from 'twenty-sdk/define';
+
+const AppSettings = () => {
+ return (
+
+
My app settings
+ {/* render your own configuration UI here */}
+
+ );
+};
+
+export default defineSettingsFrontComponent({
+ universalIdentifier: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+ name: 'app-settings',
+ description: "Custom UI for the app's Settings tab",
+ component: AppSettings,
+});
+```
+
+Uygulama başına yalnızca bir ayarlar ön uç bileşenine izin verilir; birden fazla tanımlanması derlemenin başarısız olmasına neden olur. Mevcut olduğunda, uygulamanın **Settings** sekmesi, varsayılan değişken yapılandırma kullanıcı arayüzü yerine bu bileşeni görüntüler.
+
## Headless ve headless olmayan
Ön uç bileşenler, `isHeadless` seçeneğiyle kontrol edilen iki işleme kipiyle gelir:
diff --git a/packages/twenty-docs/l/tr/developers/extend/apps/layout/overview.mdx b/packages/twenty-docs/l/tr/developers/extend/apps/layout/overview.mdx
index e8277af891..43d17e1cd7 100644
--- a/packages/twenty-docs/l/tr/developers/extend/apps/layout/overview.mdx
+++ b/packages/twenty-docs/l/tr/developers/extend/apps/layout/overview.mdx
@@ -45,12 +45,13 @@ Bir Twenty uygulamasının **düzen katmanı**, kullanıcının gördüğü her
## Uygulamanın göründüğü yerler
-| Görünüm alanı | Neyi kontrol eder | Varlık |
-| ------------------------------------------- | ------------------------------------------------------------------------------------------------- | ----------------------------------------- |
-| **Kenar çubuğu** | Kaydedilmiş bir görünüme veya harici bir URL'ye bağlanan özel bir giriş | `defineNavigationMenuItem` |
-| **Kayıt listesi** | Bir nesne için kaydedilmiş yapılandırma — görünür sütunlar, sıralama, filtreler, gruplar | `defineView` |
-| **Kayıt detay sayfası** | Bir kayıt sayfasındaki sekmeler ve bileşenler (kendi nesnenize ait veya standart bir nesneye ait) | `definePageLayout`, `definePageLayoutTab` |
-| **Yukarıdakilerin herhangi birinin içinde** | Özel bir React bileşeni — butonlar, formlar, panolar, entegrasyonlar | `defineFrontComponent` |
-| **Komut menüsü (Cmd+K)** | Sabitlenmiş bir hızlı eylem veya gizli komut | `defineCommandMenuItem` |
+| Görünüm alanı | Neyi kontrol eder | Varlık |
+| ------------------------------------------- | -------------------------------------------------------------------------------------------------- | ----------------------------------------- |
+| **Kenar çubuğu** | Kaydedilmiş bir görünüme veya harici bir URL'ye bağlanan özel bir giriş | `defineNavigationMenuItem` |
+| **Kayıt listesi** | Bir nesne için kaydedilmiş yapılandırma — görünür sütunlar, sıralama, filtreler, gruplar | `defineView` |
+| **Kayıt detay sayfası** | Bir kayıt sayfasındaki sekmeler ve bileşenler (kendi nesnenize ait veya standart bir nesneye ait) | `definePageLayout`, `definePageLayoutTab` |
+| **Yukarıdakilerin herhangi birinin içinde** | Özel bir React bileşeni — butonlar, formlar, panolar, entegrasyonlar | `defineFrontComponent` |
+| **Uygulama ayarları** | Varsayılan değişkenler arayüzü yerine, uygulamanın Ayarlar sekmesinde özel bir yapılandırma bölümü | `defineSettingsFrontComponent` |
+| **Komut menüsü (Cmd+K)** | Sabitlenmiş bir hızlı eylem veya gizli komut | `defineCommandMenuItem` |
Ön uç bileşenleri, Remote DOM kullanan yalıtılmış bir Web Worker içinde çalışır — sayfada *yerel* olarak oluşturulurlar (bir iframe içinde değil), ancak ana makine sayfasına veya DOM'a doğrudan erişemezler. Twenty ile iletişim, mesaj iletimi yapan bir ana makine API'si aracılığıyla gerçekleşir.
diff --git a/packages/twenty-docs/l/zh/developers/extend/apps/config/application.mdx b/packages/twenty-docs/l/zh/developers/extend/apps/config/application.mdx
index e07f78fe8e..83a94ca2a5 100644
--- a/packages/twenty-docs/l/zh/developers/extend/apps/config/application.mdx
+++ b/packages/twenty-docs/l/zh/developers/extend/apps/config/application.mdx
@@ -37,6 +37,7 @@ export default defineApplication({
* 在构建清单时会自动检测安装前、安装后和卸载函数——无需在 `defineApplication()` 中引用它们。
* 显式传递 `defaultRoleUniversalIdentifier` 仍然受支持以保持向后兼容性，但已弃用，推荐改用 `defineApplicationRole()`。
* `serverVariables` 是实例级的配置和机密信息（例如 API 密钥）。 与 `applicationVariables` 不同，它们不会在 manifest 中声明具体值——工作区运维人员会在应用设置中填写这些值，并且它们只有在被设置后才会被注入到逻辑函数中。
+* 要在应用的 **Settings** 选项卡中渲染自定义配置界面（替换默认的变量配置部分），请在其独立文件中使用 [`defineSettingsFrontComponent()`](/l/zh/developers/extend/apps/layout/front-components#custom-settings-component) 声明一个前端组件。 每个应用只允许有一个。 系统管理的部分（自动升级、App URL、连接）将始终保持可见。
## 变量类型
diff --git a/packages/twenty-docs/l/zh/developers/extend/apps/layout/front-components.mdx b/packages/twenty-docs/l/zh/developers/extend/apps/layout/front-components.mdx
index 832eff9525..7ad24f61c1 100644
--- a/packages/twenty-docs/l/zh/developers/extend/apps/layout/front-components.mdx
+++ b/packages/twenty-docs/l/zh/developers/extend/apps/layout/front-components.mdx
@@ -8,15 +8,17 @@ icon: window-maximize
## 前端组件可用位置
-在 Twenty 中，前端组件可在两个位置进行渲染：
+在 Twenty 中，前端组件可以在三个位置进行渲染：
* **侧边栏** — 非无头的前端组件会在右侧侧边栏中打开。 当前端组件从命令菜单触发时，这是默认行为。
* **小部件（仪表盘和记录页面）** — 前端组件可以作为小部件嵌入到[页面布局](/l/zh/developers/extend/apps/layout/page-layouts)中。 在配置仪表盘或记录页面布局时，用户可以添加前端组件小部件。
+* **应用设置** — 使用 [`defineSettingsFrontComponent()`](#custom-settings-component) 定义后，该前端组件将作为一个部分渲染在应用的 **Settings** 选项卡中，以替代默认的变量配置界面。
-单独存在的前端组件无法从界面中访问 —— 你需要将它*呈现*出来。 实现这一点有两种方式：
+单独存在的前端组件无法从界面中访问 —— 你需要将它*呈现*出来。 实现这一点有三种方式：
* **将它与[命令菜单项](/l/zh/developers/extend/apps/layout/command-menu-items)配对** —— 将其注册到命令菜单（Cmd+K）中，并可选地将其设为固定快速操作。
* **将它作为小部件嵌入到[页面布局](/l/zh/developers/extend/apps/layout/page-layouts)中** —— 将其放置在记录详情页面或仪表盘上。
+* **使用 [`defineSettingsFrontComponent()`](#custom-settings-component) 定义** — 将其渲染为应用 **Settings** 选项卡中的一个部分，以替代默认的变量配置界面。
## 基础示例
@@ -77,6 +79,34 @@ export default defineCommandMenuItem({
除了命令之外，你还可以在**页面布局**中将其添加为小部件，从而将前端组件直接嵌入记录页面。 详情请参见[页面布局](/l/zh/developers/extend/apps/layout/page-layouts)。
+## 自定义设置组件
+
+要在应用的 **Settings** 选项卡中，用你自己的组件替换自动生成的变量配置界面，请使用 `defineSettingsFrontComponent` 而不是 `defineFrontComponent` 来进行定义。 它使用相同的[配置字段](#configuration-fields)（除了 `isHeadless`，由于设置组件始终会渲染可见的 UI，因此不接受该字段），并另外将该组件标记为应用的设置 UI。
+
+该组件会渲染为设置选项卡内的一个部分，而不是替换整个选项卡。 Twenty 的系统管理部分——自动升级、App URL 和连接——始终渲染在它上方，且无法被应用覆盖。
+
+```tsx src/front-components/app-settings.tsx
+import { defineSettingsFrontComponent } from 'twenty-sdk/define';
+
+const AppSettings = () => {
+ return (
+
+
My app settings
+ {/* render your own configuration UI here */}
+
+ );
+};
+
+export default defineSettingsFrontComponent({
+ universalIdentifier: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+ name: 'app-settings',
+ description: "Custom UI for the app's Settings tab",
+ component: AppSettings,
+});
+```
+
+每个应用仅允许有一个设置前端组件；声明多个会导致构建失败。 如果存在，应用的 **Settings** 选项卡会渲染此组件来替代默认的变量配置 UI。
+
## 无头与非无头
前端组件有两种由 `isHeadless` 选项控制的渲染模式：
diff --git a/packages/twenty-docs/l/zh/developers/extend/apps/layout/overview.mdx b/packages/twenty-docs/l/zh/developers/extend/apps/layout/overview.mdx
index 77cee49a99..048593a04e 100644
--- a/packages/twenty-docs/l/zh/developers/extend/apps/layout/overview.mdx
+++ b/packages/twenty-docs/l/zh/developers/extend/apps/layout/overview.mdx
@@ -45,12 +45,13 @@ Twenty 应用的**布局层**是用户看到的一切：应用在侧边栏中的
## 应用的呈现位置
-| 呈现位置 | 控制内容 | 实体 |
-| --------------- | --------------------------- | ----------------------------------------- |
-| **侧边栏** | 链接到已保存视图或外部 URL 的自定义条目 | `defineNavigationMenuItem` |
-| **记录列表** | 对象的已保存配置——可见列、顺序、筛选器、分组 | `defineView` |
-| **记录详情页** | 记录页面上的选项卡和小部件（你自己的对象或标准对象） | `definePageLayout`, `definePageLayoutTab` |
-| **以上任意位置内部** | 自定义 React 小部件——按钮、表单、仪表盘、集成 | `defineFrontComponent` |
-| **命令菜单（Cmd+K）** | 固定的快速操作或隐藏命令 | `defineCommandMenuItem` |
+| 呈现位置 | 控制内容 | 实体 |
+| --------------- | -------------------------------- | ----------------------------------------- |
+| **侧边栏** | 链接到已保存视图或外部 URL 的自定义条目 | `defineNavigationMenuItem` |
+| **记录列表** | 对象的已保存配置——可见列、顺序、筛选器、分组 | `defineView` |
+| **记录详情页** | 记录页面上的选项卡和小部件（你自己的对象或标准对象） | `definePageLayout`, `definePageLayoutTab` |
+| **以上任意位置内部** | 自定义 React 小部件——按钮、表单、仪表盘、集成 | `defineFrontComponent` |
+| **应用设置** | 位于应用“设置”选项卡中的自定义配置部分，用于替代默认的变量界面 | `defineSettingsFrontComponent` |
+| **命令菜单（Cmd+K）** | 固定的快速操作或隐藏命令 | `defineCommandMenuItem` |
前端组件在使用 Remote DOM 的隔离 Web Worker 内运行——它们在页面中*原生*渲染（而不是在 iframe 中），但无法直接访问宿主页面或 DOM。 与 Twenty 的通信通过消息传递的宿主 API 完成。
