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

---
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`                    |
| **Configurações do app**                    | Uma seção de configuração personalizada dentro da aba Configurações do app, em vez da interface padrão de variáveis | `defineSettingsFrontComponent`            |
| **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.

Eles ainda estão em desenvolvimento ativo: o sandbox implementa um DOM parcial, portanto usos avançados podem falhar. Veja as [limitações atuais](/l/pt/developers/extend/apps/layout/front-components#current-limitations).