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

---
title: Resumen
description: Coloca tu aplicación dentro de la interfaz de usuario de Twenty — entradas de la barra lateral, vistas guardadas, pestañas de la página de registro y componentes React aislados.
icon: table-columns
---

La **capa de diseño** de una aplicación de Twenty es todo lo que el usuario ve: dónde aparece la aplicación en la barra lateral, qué vistas de lista incluye, cómo se organizan sus páginas de detalles de registro y qué componentes React personalizados se renderizan dentro de esas 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    └─────────────────────┘
```

## En esta sección

<CardGroup cols={2}>
  <Card title="Vistas" icon="list" href="/l/es/developers/extend/apps/layout/views">
    `defineView` — configuraciones de listas guardadas: columnas visibles, filtros, grupos.
  </Card>
  <Card title="Elementos del menú de navegación" icon="bars" href="/l/es/developers/extend/apps/layout/navigation-menu-items">
    `defineNavigationMenuItem` — entradas de la barra lateral que apuntan a vistas o URL externas.
  </Card>
  <Card title="Diseños de Página" icon="table-columns" href="/l/es/developers/extend/apps/layout/page-layouts">
    `definePageLayout` y `definePageLayoutTab` — pestañas y widgets en la página de detalles de un registro.
  </Card>
  <Card title="Componentes de frontend" icon="window-maximize" href="/l/es/developers/extend/apps/layout/front-components">
    `defineFrontComponent` — componentes React aislados que se renderizan dentro de Twenty.
  </Card>
  <Card title="Elementos del menú de comandos" icon="terminal" href="/l/es/developers/extend/apps/layout/command-menu-items">
    `defineCommandMenuItem` — registra componentes de frontend como entradas Cmd+K y acciones rápidas.
  </Card>
</CardGroup>

## Dónde aparece la aplicación

| Ubicación                                  | Qué controla                                                                                                                                  | Entidad                                   |
| ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
| **Barra lateral**                          | Una entrada personalizada que enlaza a una vista guardada o a una URL externa                                                                 | `defineNavigationMenuItem`                |
| **Lista de registros**                     | Una configuración guardada para un objeto — columnas visibles, orden, filtros, grupos                                                         | `defineView`                              |
| **Página de detalles del registro**        | Las pestañas y widgets en una página de registro (de tu propio objeto o de uno estándar)                                                      | `definePageLayout`, `definePageLayoutTab` |
| **Dentro de cualquiera de las anteriores** | Un widget React personalizado — botones, formularios, paneles, integraciones                                                                  | `defineFrontComponent`                    |
| **Configuración de la app**                | Una sección de configuración personalizada dentro de la pestaña Configuración de la app, en lugar de la interfaz predeterminada de variables. | `defineSettingsFrontComponent`            |
| **Menú de comandos (Cmd+K)**               | Una acción rápida fijada o un comando oculto                                                                                                  | `defineCommandMenuItem`                   |

Los componentes de frontend se ejecutan dentro de un Web Worker aislado usando Remote DOM — se renderizan de forma nativa en la página (no dentro de un iframe), pero no pueden acceder directamente a la página o al DOM del host. La comunicación con Twenty ocurre a través de una API de host de paso de mensajes.

Todavía están en desarrollo activo: el sandbox implementa un DOM parcial, por lo que los usos avanzados pueden fallar. Consulta [Limitaciones actuales](/l/es/developers/extend/apps/layout/front-components#current-limitations).