Mises en page de la page

​

definePageLayout

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.VERTICAL_LIST,
      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 l’un de 'RECORD_INDEX', 'RECORD_PAGE', 'DASHBOARD' ou 'STANDALONE_PAGE'. Utilisez '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 : VERTICAL_LIST pour les pages d’enregistrement et les pages autonomes, GRID pour les tableaux de bord. Dans un onglet VERTICAL_LIST, un seul widget est affiché en pleine largeur et occupe tout l’onglet ; avec plusieurs widgets, ils sont empilés sous forme de cartes. Un onglet GRID dispose toujours ses widgets sous forme de cartes sur une grille de 12 colonnes, quel que soit leur nombre ; choisissez donc VERTICAL_LIST lorsque vous voulez qu’un seul widget remplisse la page.
• Définissez layoutMode explicitement. Si vous l’omettez, vous obtenez VERTICAL_LIST sur une STANDALONE_PAGE et GRID partout ailleurs, ce qui est rarement ce que vous voulez sur une page d’enregistrement.
• 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

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.VERTICAL_LIST,
  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.