メインコンテンツへスキップ
Twenty アプリの レイアウトレイヤー とは、ユーザーに見えるすべての要素を指します。アプリがサイドバーのどこに表示されるか、どのリストビューを提供するか、レコード詳細ページがどのように構成されるか、そしてそれらのページ内でどのカスタム React コンポーネントがレンダリングされるかなどです。 
   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    └─────────────────────┘

​
このセクションについて

ビュー

defineView — 表示カラム、フィルター、グループなどを含む、保存済みリスト構成。

ナビゲーションメニュー項目

defineNavigationMenuItem — ビューまたは外部 URL を指すサイドバー項目。

ページレイアウト

definePageLayout および definePageLayoutTab — レコード詳細ページ上のタブとウィジェット。

フロントコンポーネント

defineFrontComponent — Twenty 内でレンダリングされる、サンドボックス化された React コンポーネント。

コマンドメニュー項目

defineCommandMenuItem — フロントコンポーネントを Cmd+K の項目およびクイックアクションとして登録します。

​
アプリが表示される場所

表示場所制御内容エンティティ
サイドバー保存済みビューまたは外部 URL へリンクするカスタム項目defineNavigationMenuItem
レコードリストオブジェクト向けの保存済み構成 — 表示カラム、順序、フィルター、グループdefineView
レコード詳細ページレコードページ上のタブおよびウィジェット（独自オブジェクトのもの、または標準オブジェクトのもの）definePageLayout, definePageLayoutTab
上記いずれかの内部カスタム React ウィジェット — ボタン、フォーム、ダッシュボード、連携機能defineFrontComponent
コマンドメニュー (Cmd+K)ピン留めされたクイックアクションまたは非表示コマンドdefineCommandMenuItem
フロントコンポーネントは Remote DOM を使用して、分離された Web Worker 内で実行されます。ページ内に ネイティブに（iframe 内ではなく）レンダリングされますが、ホストページや DOM へ直接アクセスすることはできません。 Twenty との通信は、メッセージパッシング型のホスト API を通じて行われます。