snapshot of https://github.com/twentyhq/twenty.git (main, 2026-09-17; blobs > 131072B omitted)

packages/twenty-docs/l/cs/developers/extend/apps/layout/page-layouts.mdx

@@ -0,0 +1,158 @@
+---
+title: Rozvržení stránek
+description: Přizpůsobte stránky s detailem záznamu – karty, widgety a místa, kde se vykreslují frontendové komponenty – pomocí `definePageLayout` a `definePageLayoutTab`.
+icon: table-columns
+---
+
+**Rozvržení stránky** určuje, jak je uspořádána stránka s detailem záznamu: které karty se zobrazí a jaké widgety obsahují. Použijte `definePageLayout()` k deklaraci rozvržení pro objekt, který vlastníte, nebo `definePageLayoutTab()` k přidání jedné karty do rozvržení, které již existuje (vašeho nebo standardního rozvržení Twenty).
+
+| Případ použití                                                                                              | Entita                |
+| ----------------------------------------------------------------------------------------------------------- | --------------------- |
+| Definujte celé rozvržení pro stránku záznamu u objektu, který vlastníte                                     | `definePageLayout`    |
+| Přidejte jednu kartu do existujícího rozvržení (k rozvržení vašeho vlastního objektu nebo ke standardnímu). | `definePageLayoutTab` |
+
+## definePageLayout
+
+Použijte to, když vlastníte celou stránku s detailem záznamu – typicky pro vlastní objekt, který jste si definovali sami.
+
+```ts src/page-layouts/example-record-page-layout.ts
+import { definePageLayout, PageLayoutTabLayoutMode } from 'twenty-sdk/define';
+import { EXAMPLE_OBJECT_UNIVERSAL_IDENTIFIER } from '../objects/example-object';
+import { HELLO_WORLD_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER } from '../front-components/hello-world';
+
+export default definePageLayout({
+  universalIdentifier: '203aeb94-6701-46d6-9af1-be2bbcc9e134',
+  name: 'Example Record Page',
+  type: 'RECORD_PAGE',
+  objectUniversalIdentifier: EXAMPLE_OBJECT_UNIVERSAL_IDENTIFIER,
+  tabs: [
+    {
+      universalIdentifier: '6ed26b60-a51d-4ad7-86dd-1c04c7f3cac5',
+      title: 'Hello World',
+      position: 50,
+      icon: 'IconWorld',
+      layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
+      widgets: [
+        {
+          universalIdentifier: 'aa4234e0-2e5f-4c02-a96a-573449e2351d',
+          title: 'Hello World',
+          type: 'FRONT_COMPONENT',
+          configuration: {
+            configurationType: 'FRONT_COMPONENT',
+            frontComponentUniversalIdentifier:
+              HELLO_WORLD_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER,
+          },
+        },
+      ],
+    },
+  ],
+});
+```
+
+### Hlavní body
+
+* `type` je jedním z `'RECORD_INDEX'`, `'RECORD_PAGE'`, `'DASHBOARD'` nebo `'STANDALONE_PAGE'`. Použijte `'RECORD_PAGE'` k přizpůsobení detailního zobrazení konkrétního objektu.
+* `objectUniversalIdentifier` určuje, na který objekt se toto rozvržení vztahuje.
+* Každá `tab` definuje sekci stránky s `title`, `position` a `layoutMode`: `VERTICAL_LIST` pro stránky záznamů a samostatné stránky, `GRID` pro řídicí panely a `CANVAS` pro jeden widget, který by měl vyplnit zobrazovací oblast karty. Karta `VERTICAL_LIST` řadí widgety svisle. Vestavěné widgety, které spravují vlastní posouvání, jako jsou časové osy, soubory, poznámky, úkoly a pracovní postupy, vyplní jednu zobrazovací oblast; pole, frontové komponenty, grafy a další widgety přizpůsobené obsahu se vykreslí ve výšce obsahu nebo nakonfigurované výšce. Karta `GRID` vždy rozvrhne své widgety jako karty v mřížce s 12 sloupci. Widget `CANVAS` nemá explicitní pozici; pokud karta plátna obsahuje více widgetů, vykreslí se ve výšce svého obsahu místo toho, aby vyplnily oblast zobrazení.
+* Nastavte `layoutMode` explicitně. Pokud jej vynecháte, získáte `VERTICAL_LIST` na `STANDALONE_PAGE` a `GRID` všude jinde, což je na stránce záznamu jen zřídka to, co chcete.
+* Každý `widget` uvnitř karty může vykreslit [front component](/l/cs/developers/extend/apps/layout/front-components), seznam relací nebo jiné vestavěné typy widgetů.
+* Widget `FRONT_COMPONENT` může nastavit `headerCommandMenuItemUniversalIdentifiers` na seřazené pole univerzálních identifikátorů položek nabídky příkazů ze stejné aplikace. Tyto akce se v záhlaví karty widgetu zobrazují jako tlačítka s ikonami a zachovávají svou dostupnost na úrovni příkazů i kontroly oprávnění. Identifikátory musí být jedinečné a při instalaci aplikace musí být vyřešitelné.
+* `position` na kartách určuje jejich pořadí. Použijte vyšší hodnoty (např. 50) pro umístění vlastních karet za vestavěné.
+
+### Widgety polí
+
+Widget `FIELD` vykresluje jedno pole záznamu. U relačních polí může také vložit seznam souvisejících záznamů:
+
+```ts
+{
+  universalIdentifier: 'c1c2c3c4-c5c6-4000-8000-000000000003',
+  title: 'People → Opportunities',
+  type: 'FIELD',
+  configuration: {
+    configurationType: 'FIELD',
+    fieldMetadataId: PEOPLE_FIELD_UNIVERSAL_IDENTIFIER,
+    fieldDisplayMode: 'TABLE',
+    nestedRelationFieldMetadataId: OPPORTUNITIES_FIELD_UNIVERSAL_IDENTIFIER,
+  },
+}
+```
+
+* `fieldMetadataId` přijímá univerzální identifikátor pole na objektu daného rozložení.
+* `fieldDisplayMode` je jednou z hodnot `'FIELD'`, `'CARD'`, `'EDITOR'`, `'VIEW'` nebo `'TABLE'`. `TABLE` vkládá zobrazení, které vypisuje záznamy relačního pole typu 1:N.
+* `nestedRelationFieldMetadataId` je volitelný a přijímá univerzální identifikátor pole relace typu 1:N na cílovém objektu relace, aby bylo možné vypsat záznamy o dva relační skoky dál (např. stránka Společnosti, která vypisuje příležitosti lidí dané společnosti, nebo stránka Osoby, která vypisuje příležitosti společnosti dané osoby). První skok může být relační pole typu 1:N nebo N:1, druhý musí být 1:N (spojovací relace nejsou podporovány) a vyžaduje `fieldDisplayMode: 'TABLE'` — kombinace s jakýmkoli jiným režimem zobrazení je validační chyba, protože vnořený widget se vždy vykresluje jako vložené zobrazení.
+
+## definePageLayoutTab
+
+Použijte to, když chcete do existujícího rozvržení pouze **přidat** kartu – například kartu analytiky na standardní stránce Company nebo kartu se souhrnem AI připojenou k rozvržení vašeho vlastního objektu.
+
+```ts src/page-layouts/example-extra-tab.ts
+import {
+  definePageLayoutTab,
+  PageLayoutTabLayoutMode,
+  STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS,
+} from 'twenty-sdk/define';
+import { HELLO_WORLD_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER } from '../front-components/hello-world';
+
+export default definePageLayoutTab({
+  universalIdentifier: 'b1b2b3b4-b5b6-4000-8000-000000000001',
+  pageLayoutUniversalIdentifier:
+    STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS.companyRecordPage
+      .universalIdentifier,
+  title: 'Hello World',
+  position: 1000,
+  icon: 'IconWorld',
+  layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
+  widgets: [
+    {
+      universalIdentifier: 'b1b2b3b4-b5b6-4000-8000-000000000002',
+      title: 'Hello World',
+      type: 'FRONT_COMPONENT',
+      configuration: {
+        configurationType: 'FRONT_COMPONENT',
+        frontComponentUniversalIdentifier:
+          HELLO_WORLD_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER,
+      },
+    },
+  ],
+});
+```
+
+### Hlavní body
+
+* `pageLayoutUniversalIdentifier` je **povinný** a musí odkazovat na rozvržení stránky, které již existuje v době instalace – buď na standardní rozvržení Twenty, nebo na rozvržení definované vaší vlastní aplikací. Meziaplikační odkazy na rozvržení ve vlastnictví jiné nainstalované aplikace nejsou v současnosti podporovány. Když nadřazené rozvržení chybí, instalace selže s jasnou validační chybou.
+
+* Pro standardní rozvržení Twenty importujte identifikátory z `twenty-sdk/define`:
+
+  ```ts
+  import { STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS } from 'twenty-sdk/define';
+
+  // STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS.companyRecordPage.universalIdentifier
+  // STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS.personRecordPage.universalIdentifier
+  // STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS.taskRecordPage.universalIdentifier
+  // STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS.opportunityRecordPage.universalIdentifier
+  // STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS.noteRecordPage.universalIdentifier
+  // …
+  ```
+
+  Každá položka rozvržení také zpřístupňuje své `tabs` a jejich `widgets`, takže můžete odkazovat na libovolnou úroveň:
+
+  ```ts
+  STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS.taskRecordPage.tabs.home
+    .universalIdentifier;
+  STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS.taskRecordPage.tabs.home.widgets
+    .fields.universalIdentifier;
+  ```
+
+  K dispozici je také krátký alias `STANDARD_PAGE_LAYOUT`:
+
+  ```ts
+  import { STANDARD_PAGE_LAYOUT } from 'twenty-sdk/define';
+
+  STANDARD_PAGE_LAYOUT.companyRecordPage.universalIdentifier;
+  ```
+
+* `widgets` mají rozsah pouze pro tuto kartu – odkazují na [front components](/l/cs/developers/extend/apps/layout/front-components), zobrazení apod. úplně stejně jako widgety definované přímo v `definePageLayout`.
+
+* `position` určuje pořadí vzhledem ke stávajícím kartám v cílovém rozvržení. Zvolte hodnotu, která umístí vaši kartu tam, kde ji chcete mít, relativně k vestavěným kartám.
+
+* Použijte to místo `definePageLayout`, když chcete do existujícího rozvržení pouze přidat. Použijte `definePageLayout`, když vlastníte celé rozvržení.