> ## Documentation Index > Fetch the complete documentation index at: https://docs.twenty.com/llms.txt > Use this file to discover all available pages before exploring further. # Rozvržení stránek > Přizpůsobte stránky s detailem záznamu – karty, widgety a místa, kde se vykreslují frontendové komponenty – pomocí `definePageLayout` a `definePageLayoutTab`. **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 theme={null} 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. V `VERTICAL_LIST` záložce se jediný widget vykreslí přes celou šířku a zabere celou záložku; pokud je widgetů více, řadí se pod sebe jako karty. `GRID` záložka vždy rozmístí své widgety jako karty v dvanáctisloupcové mřížce, bez ohledu na jejich počet, takže `VERTICAL_LIST` zvolte tehdy, když chcete, aby jeden widget vyplnil celou stránku. * 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ů. * `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 theme={null} { 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 theme={null} 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 theme={null} 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 theme={null} 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 theme={null} 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í.