57 lines
4.8 KiB
Plaintext
57 lines
4.8 KiB
Plaintext
---
|
|
title: Visão Geral
|
|
description: Coloque seu app dentro da interface do Twenty — entradas na barra lateral, visualizações salvas, abas na página de registro e componentes React em sandbox.
|
|
icon: table-columns
|
|
---
|
|
|
|
A **camada de layout** de um app do Twenty é tudo o que o usuário vê: onde o app aparece na barra lateral, quais visualizações de lista ele fornece, como suas páginas de detalhes de registro são organizadas e quais componentes React personalizados são renderizados dentro dessas páginas.
|
|
|
|
```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 └─────────────────────┘
|
|
```
|
|
|
|
## Nesta seção
|
|
|
|
<CardGroup cols={2}>
|
|
<Card title="Visualizações" icon="list" href="/l/pt/developers/extend/apps/layout/views">
|
|
`defineView` — configurações salvas de lista: colunas visíveis, filtros, grupos.
|
|
</Card>
|
|
<Card title="Itens do menu de navegação" icon="bars" href="/l/pt/developers/extend/apps/layout/navigation-menu-items">
|
|
`defineNavigationMenuItem` — entradas da barra lateral apontando para visualizações ou URLs externas.
|
|
</Card>
|
|
<Card title="Layouts de Página" icon="table-columns" href="/l/pt/developers/extend/apps/layout/page-layouts">
|
|
`definePageLayout` e `definePageLayoutTab` — abas e widgets na página de detalhes de um registro.
|
|
</Card>
|
|
<Card title="Componentes de front-end" icon="window-maximize" href="/l/pt/developers/extend/apps/layout/front-components">
|
|
`defineFrontComponent` — componentes React em sandbox que são renderizados dentro do Twenty.
|
|
</Card>
|
|
<Card title="Itens do menu de comandos" icon="terminal" href="/l/pt/developers/extend/apps/layout/command-menu-items">
|
|
`defineCommandMenuItem` — registra componentes de front-end como entradas no Cmd+K e ações rápidas.
|
|
</Card>
|
|
</CardGroup>
|
|
|
|
## 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` |
|
|
|
|
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.
|