mirror of
https://github.com/twentyhq/twenty.git
synced 2026-06-12 18:08:58 -04:00
2eae25dc34
Added a bit of enhanced context for better agentic coding, based on this [Discord conversation](https://discord.com/channels/1130383047699738754/1130383048173682821/1501538550301331477). --------- Co-authored-by: Félix Malfait <felix@twenty.com> Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
57 lines
3.8 KiB
Plaintext
57 lines
3.8 KiB
Plaintext
---
|
|
title: Overview
|
|
description: Place your app inside Twenty's UI — sidebar entries, saved views, record page tabs, and sandboxed React components.
|
|
icon: "table-columns"
|
|
---
|
|
|
|
A Twenty app's **layout layer** is everything the user sees: where the app surfaces in the sidebar, which list views it ships, how its record detail pages are arranged, and which custom React components render inside those pages.
|
|
|
|
```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 └─────────────────────┘
|
|
```
|
|
|
|
## In this section
|
|
|
|
<CardGroup cols={2}>
|
|
<Card title="Views" icon="list" href="/developers/extend/apps/layout/views">
|
|
`defineView` — saved list configurations: visible columns, filters, groups.
|
|
</Card>
|
|
<Card title="Navigation Menu Items" icon="bars" href="/developers/extend/apps/layout/navigation-menu-items">
|
|
`defineNavigationMenuItem` — sidebar entries pointing at views or external URLs.
|
|
</Card>
|
|
<Card title="Page Layouts" icon="table-columns" href="/developers/extend/apps/layout/page-layouts">
|
|
`definePageLayout` and `definePageLayoutTab` — tabs and widgets on a record's detail page.
|
|
</Card>
|
|
<Card title="Front Components" icon="window-maximize" href="/developers/extend/apps/layout/front-components">
|
|
`defineFrontComponent` — sandboxed React components that render inside Twenty.
|
|
</Card>
|
|
<Card title="Command Menu Items" icon="terminal" href="/developers/extend/apps/layout/command-menu-items">
|
|
`defineCommandMenuItem` — register front components as Cmd+K entries and quick actions.
|
|
</Card>
|
|
</CardGroup>
|
|
|
|
## Where the app surfaces
|
|
|
|
| Surface | What it controls | Entity |
|
|
|---------|------------------|--------|
|
|
| **Sidebar** | A custom entry linking to a saved view or external URL | `defineNavigationMenuItem` |
|
|
| **Record list** | A saved configuration for an object — visible columns, order, filters, groups | `defineView` |
|
|
| **Record detail page** | The tabs and widgets on a record page (your own object's, or a standard one) | `definePageLayout`, `definePageLayoutTab` |
|
|
| **Inside any of the above** | A custom React widget — buttons, forms, dashboards, integrations | `defineFrontComponent` |
|
|
| **Command menu (Cmd+K)** | A pinned quick action or hidden command | `defineCommandMenuItem` |
|
|
|
|
Front components run inside an isolated Web Worker using Remote DOM — they render *natively* in the page (not inside an iframe), but cannot reach the host page or DOM directly. Communication with Twenty happens through a message-passing host API.
|