Visão Geral - Twenty Documentation

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.

   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

Visualizações

defineView — configurações salvas de lista: colunas visíveis, filtros, grupos.

Itens do menu de navegação

defineNavigationMenuItem — entradas da barra lateral apontando para visualizações ou URLs externas.

Layouts de Página

definePageLayout e definePageLayoutTab — abas e widgets na página de detalhes de um registro.

Componentes de front-end

defineFrontComponent — componentes React em sandbox que são renderizados dentro do Twenty.

Itens do menu de comandos

defineCommandMenuItem — registra componentes de front-end como entradas no Cmd+K e ações rápidas.

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.

​Nesta seção