Passer au contenu principal
Une mise en page contrôle la façon dont la page de détail d’un enregistrement est organisée : quels onglets apparaissent et quels widgets ils contiennent. Utilisez definePageLayout() pour déclarer une mise en page pour un objet que vous possédez, ou definePageLayoutTab() pour ajouter un seul onglet à une mise en page qui existe déjà (la vôtre ou une mise en page standard de Twenty).
Cas d’utilisationEntité
Définir l’intégralité de la mise en page de la page de détail des enregistrements d’un objet que vous possédezdefinePageLayout
Ajouter un onglet à une mise en page existante (votre propre objet ou un objet standard)definePageLayoutTab

​
definePageLayout

Utilisez ceci lorsque vous possédez l’intégralité de la page de détail — généralement pour un objet personnalisé que vous avez défini vous-même.
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,
          },
        },
      ],
    },
  ],
});

​
Points clés

  • type est généralement 'RECORD_PAGE' pour personnaliser la vue détaillée d’un objet spécifique.
  • objectUniversalIdentifier spécifie à quel objet cette mise en page s’applique.
  • Chaque tab définit une section de la page avec un title, une position et un layoutMode (CANVAS pour une mise en page libre).
  • Chaque widget à l’intérieur d’un onglet peut afficher un front component, une liste de relations ou d’autres types de widgets intégrés.
  • La position des onglets contrôle leur ordre. Utilisez des valeurs plus élevées (p. ex., 50) pour placer les onglets personnalisés après les onglets intégrés.

​
definePageLayoutTab

Utilisez ceci lorsque vous voulez uniquement ajouter un onglet à une mise en page existante — par exemple, un onglet d’analyse sur la page standard Company, ou un onglet de résumé d’IA rattaché à la mise en page de votre propre objet.
src/page-layouts/example-extra-tab.ts
import {
  definePageLayoutTab,
  PageLayoutTabLayoutMode,
  STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS,
} from 'twenty-sdk/define';
import { HELLO_WORLD_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER } from '../front-components/hello-world';

export default definePageLayoutTab({
  universalIdentifier: 'b1b2b3b4-b5b6-4000-8000-000000000001',
  pageLayoutUniversalIdentifier:
    STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS.companyRecordPage
      .universalIdentifier,
  title: 'Hello World',
  position: 1000,
  icon: 'IconWorld',
  layoutMode: PageLayoutTabLayoutMode.CANVAS,
  widgets: [
    {
      universalIdentifier: 'b1b2b3b4-b5b6-4000-8000-000000000002',
      title: 'Hello World',
      type: 'FRONT_COMPONENT',
      configuration: {
        configurationType: 'FRONT_COMPONENT',
        frontComponentUniversalIdentifier:
          HELLO_WORLD_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER,
      },
    },
  ],
});

​
Points clés

  • pageLayoutUniversalIdentifier est obligatoire et doit pointer vers une mise en page de page qui existe déjà au moment de l’installation — soit une mise en page standard de Twenty, soit une mise en page définie par votre propre application. Les références inter-applications aux mises en page appartenant à une autre application installée ne sont pas prises en charge aujourd’hui. Lorsque la mise en page parente est manquante, l’installation échoue avec une erreur de validation explicite.
  • Pour les mises en page standard de Twenty, importez les identifiants depuis twenty-sdk/define : 
    import { STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS } from 'twenty-sdk/define';

// STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS.companyRecordPage.universalIdentifier
// STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS.personRecordPage.universalIdentifier
// STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS.taskRecordPage.universalIdentifier
// STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS.opportunityRecordPage.universalIdentifier
// STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS.noteRecordPage.universalIdentifier
// …
    Chaque entrée de mise en page expose également ses tabs et leurs widgets, afin que vous puissiez faire référence à n’importe quel niveau : 
    STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS.taskRecordPage.tabs.home.universalIdentifier
STANDARD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIERS.taskRecordPage.tabs.home.widgets.fields.universalIdentifier
    Un alias court STANDARD_PAGE_LAYOUT est également disponible : 
    import { STANDARD_PAGE_LAYOUT } from 'twenty-sdk/define';

STANDARD_PAGE_LAYOUT.companyRecordPage.universalIdentifier;
  • Les widgets sont limités à cet onglet uniquement — ils font référence aux front components, aux vues, etc., exactement comme les widgets définis en ligne dans definePageLayout.
  • position contrôle l’ordre par rapport aux onglets existants sur la mise en page ciblée. Choisissez une valeur qui place votre onglet à l’endroit souhaité par rapport aux onglets intégrés.
  • Utilisez ceci plutôt que definePageLayout lorsque vous voulez seulement ajouter à une mise en page existante. Utilisez definePageLayout lorsque vous possédez l’intégralité de la mise en page.