upstream-twenty/packages/twenty-docs/l/cs/developers/extend/apps/layout/overview.mdx

---
title: Přehled
description: Umístěte svou aplikaci do uživatelského rozhraní Twenty – položky v postranním panelu, uložená zobrazení, karty na stránce záznamu a sandboxované komponenty Reactu.
icon: table-columns
---

**Vrstva rozvržení** aplikace Twenty zahrnuje vše, co uživatel vidí: kde se aplikace zobrazuje v postranním panelu, jaká seznamová zobrazení obsahuje, jak jsou uspořádány její stránky s podrobnostmi záznamů a které vlastní komponenty Reactu se na těchto stránkách vykreslují.

```text
   Sidebar               Record list            Record detail page
   ───────               ───────────            ──────────────────
   [📋 My View]    ────▶ ┌──────────┐          ┌─────────────────────┐
   [📋 Drafts ]          │ Companies│          │ Tabs: [Overview ]   │
   [📋 Inbox  ]          │ ──────── │          │       [Notes    ]   │
        ▲                │  Apple   │          │       [Hello    ]◀──── definePageLayoutTab
        │                │  Acme    │          │                     │   adds a tab...
        └ defineNavi-    │  …       │          │  ┌────────────────┐ │
          gationMenu-    └────▲─────┘          │  │                │ │
          Item points         │                │  │   React UI     │◀── …with a
          to a defineView     │                │  │  (sandboxed in │ │   defineFrontComponent
                              └ defineView     │  │   a Worker)    │ │   widget inside
                                picks columns  │  └────────────────┘ │
                                and filters    └─────────────────────┘
```

## V této části

<CardGroup cols={2}>
  <Card title="Zobrazení" icon="list" href="/l/cs/developers/extend/apps/layout/views">
    `defineView` — uložené konfigurace seznamu: viditelné sloupce, filtry, skupiny.
  </Card>
  <Card title="Položky navigační nabídky" icon="bars" href="/l/cs/developers/extend/apps/layout/navigation-menu-items">
    `defineNavigationMenuItem` — položky v postranním panelu odkazující na zobrazení nebo externí adresy URL.
  </Card>
  <Card title="Rozvržení stránek" icon="table-columns" href="/l/cs/developers/extend/apps/layout/page-layouts">
    `definePageLayout` a `definePageLayoutTab` — karty a widgety na stránce s podrobnostmi záznamu.
  </Card>
  <Card title="Frontendové komponenty" icon="window-maximize" href="/l/cs/developers/extend/apps/layout/front-components">
    `defineFrontComponent` — sandboxované komponenty Reactu, které se vykreslují uvnitř Twenty.
  </Card>
  <Card title="Položky příkazové nabídky" icon="terminal" href="/l/cs/developers/extend/apps/layout/command-menu-items">
    `defineCommandMenuItem` — zaregistruje frontendové komponenty jako položky Cmd+K a rychlé akce.
  </Card>
</CardGroup>

## 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`                    |
| **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.

Stále jsou v aktivním vývoji: sandbox implementuje částečný DOM, takže pokročilá použití mohou selhat. Viz [Aktuální omezení](/l/cs/developers/extend/apps/layout/front-components#current-limitations).