Raphaël Bosi
40dd01c47d
Front components are still under active development, but the docs did not say so, and two of the three field reports we got on Discord were misdiagnosed because the sandbox fails silently. Adds a "Current limitations" section to the front components page covering layout measurement, DOM access, events, CSS scoping, storage and network, with the workaround for each. Also corrects the testing page, which claimed front components get "browser APIs" when the sandbox only implements a partial DOM. Every limitation was checked against the code rather than copied from the roadmap, which turned up a few stale entries: CSS imports work, `aria-*`/`data-*` now cross, and `MutationObserver` throws on `.observe()` rather than silently never firing. <!-- This is an auto-generated description by cubic. --> <a href="https://cubic.dev/pr/twentyhq/twenty/pull/23549?utm_source=github" target="_blank" rel="noopener noreferrer" data-no-image-dialog="true"><picture><source media="(prefers-color-scheme: dark)" srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img alt="Review in cubic" src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a> <!-- End of auto-generated description by cubic. -->
60 lines
4.2 KiB
Plaintext
60 lines
4.2 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` |
|
|
| **App settings** | A custom configuration section inside the app's Settings tab, in place of the default variables UI | `defineSettingsFrontComponent` |
|
|
| **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.
|
|
|
|
They are still under active development: the sandbox implements a partial DOM, so advanced usages can fail. See [Current limitations](/developers/extend/apps/layout/front-components#current-limitations).
|