github-actions[bot]
cdeebb1a18
Created by Github action Co-authored-by: github-actions <github-actions@twenty.com>
60 lines
5.3 KiB
Plaintext
60 lines
5.3 KiB
Plaintext
---
|
||
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).
|