Přejít na hlavní obsah
Prvky rozvržení řídí, jak se vaše aplikace zobrazuje v uživatelském rozhraní Twenty — co je v postranním panelu, které uložené pohledy jsou součástí aplikace a jak je uspořádána stránka s podrobnostmi záznamu.

​
Pojmy rozvržení

PojemCo řídíEntita
PohledUložené nastavení seznamu pro objekt — viditelná pole, pořadí, filtry, skupinydefineView
Položka navigační nabídkyPoložka v levém postranním panelu, která odkazuje na pohled nebo externí URLdefineNavigationMenuItem
Rozvržení stránkyKarty a widgety, které tvoří stránku s podrobnostmi záznamudefinePageLayout
Pohledy, položky navigační nabídky a rozvržení stránek se na sebe odkazují pomocí universalIdentifier:
  • Položka navigační nabídky typu VIEW odkazuje na identifikátor defineView, takže odkaz v postranním panelu otevře daný uložený pohled.
  • Rozvržení stránky typu RECORD_PAGE cílí na objekt a může vkládat front components do svých karet jako widgety.
Zobrazení jsou uložené konfigurace toho, jak se zobrazují záznamy objektu — včetně toho, která pole jsou viditelná, jejich pořadí a jaké filtry či seskupení jsou použity. Pomocí defineView() můžete k aplikaci přidat předkonfigurovaná zobrazení:
src/views/example-view.ts
import { defineView, ViewKey } from 'twenty-sdk/define';
import { EXAMPLE_OBJECT_UNIVERSAL_IDENTIFIER } from '../objects/example-object';
import { NAME_FIELD_UNIVERSAL_IDENTIFIER } from '../objects/example-object';

export default defineView({
  universalIdentifier: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
  name: 'All example items',
  objectUniversalIdentifier: EXAMPLE_OBJECT_UNIVERSAL_IDENTIFIER,
  icon: 'IconList',
  key: ViewKey.INDEX,
  position: 0,
  fields: [
    {
      universalIdentifier: 'f926bdb7-6af7-4683-9a09-adbca56c29f0',
      fieldMetadataUniversalIdentifier: NAME_FIELD_UNIVERSAL_IDENTIFIER,
      position: 0,
      isVisible: true,
      size: 200,
    },
  ],
});
Hlavní body:
  • objectUniversalIdentifier určuje, na který objekt se toto zobrazení vztahuje.
  • key určuje typ zobrazení (např. ViewKey.INDEX pro hlavní seznam).
  • fields určuje, které sloupce se zobrazí a v jakém pořadí. Každé pole odkazuje na fieldMetadataUniversalIdentifier.
  • Pro pokročilejší konfigurace můžete definovat také filters, filterGroups, groups a fieldGroups.
  • position určuje pořadí, pokud pro stejný objekt existuje více zobrazení.
Položky navigační nabídky přidávají vlastní položky do postranního panelu pracovního prostoru. Použijte defineNavigationMenuItem() k odkazování na zobrazení, externí URL nebo objekty:
src/navigation-menu-items/example-navigation-menu-item.ts
import { defineNavigationMenuItem, NavigationMenuItemType } from 'twenty-sdk/define';
import { EXAMPLE_VIEW_UNIVERSAL_IDENTIFIER } from '../views/example-view';

export default defineNavigationMenuItem({
  universalIdentifier: '9327db91-afa1-41b6-bd9d-2b51a26efb4c',
  name: 'example-navigation-menu-item',
  icon: 'IconList',
  color: 'blue',
  position: 0,
  type: NavigationMenuItemType.VIEW,
  viewUniversalIdentifier: EXAMPLE_VIEW_UNIVERSAL_IDENTIFIER,
});
Hlavní body:
  • type určuje, na co položka menu odkazuje: NavigationMenuItemType.VIEW pro uložené zobrazení nebo NavigationMenuItemType.LINK pro externí URL.
  • Pro odkazy na zobrazení nastavte viewUniversalIdentifier. Pro externí odkazy nastavte link.
  • position určuje pořadí v postranním panelu.
  • icon a color (volitelné) upravují vzhled.
Rozvržení stránek vám umožní přizpůsobit vzhled stránky s detailem záznamu — které karty se zobrazí, jaké widgety jsou uvnitř každé karty a jak jsou uspořádány. Pomocí definePageLayout() můžete k aplikaci přidat vlastní rozvržení:
src/page-layouts/example-record-page-layout.ts
import { definePageLayout, PageLayoutTabLayoutMode } from 'twenty-sdk/define';
import { EXAMPLE_OBJECT_UNIVERSAL_IDENTIFIER } from '../objects/example-object';
import { HELLO_WORLD_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER } from '../front-components/hello-world';

export default definePageLayout({
  universalIdentifier: '203aeb94-6701-46d6-9af1-be2bbcc9e134',
  name: 'Example Record Page',
  type: 'RECORD_PAGE',
  objectUniversalIdentifier: EXAMPLE_OBJECT_UNIVERSAL_IDENTIFIER,
  tabs: [
    {
      universalIdentifier: '6ed26b60-a51d-4ad7-86dd-1c04c7f3cac5',
      title: 'Hello World',
      position: 50,
      icon: 'IconWorld',
      layoutMode: PageLayoutTabLayoutMode.CANVAS,
      widgets: [
        {
          universalIdentifier: 'aa4234e0-2e5f-4c02-a96a-573449e2351d',
          title: 'Hello World',
          type: 'FRONT_COMPONENT',
          configuration: {
            configurationType: 'FRONT_COMPONENT',
            frontComponentUniversalIdentifier:
              HELLO_WORLD_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER,
          },
        },
      ],
    },
  ],
});
Hlavní body:
  • type je obvykle 'RECORD_PAGE' pro úpravu detailního zobrazení konkrétního objektu.
  • objectUniversalIdentifier určuje, na který objekt se toto rozvržení vztahuje.
  • Každá tab definuje sekci stránky s title, position a layoutMode (CANVAS pro volné rozvržení).
  • Každý widget uvnitř karty může vykreslit frontendovou komponentu, seznam relací nebo jiné vestavěné typy widgetů.
  • position na kartách určuje jejich pořadí. Použijte vyšší hodnoty (např. 50) pro umístění vlastních karet za vestavěné.