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 et CANVAS pour un seul widget qui doit remplir la zone d’affichage de l’onglet. Un onglet VERTICAL_LIST empile les widgets verticalement. Les widgets intégrés qui gèrent leur propre défilement, tels que les chronologies, les fichiers, les notes, les tâches et les workflows, remplissent une zone d’affichage ; les champs, les composants front, les graphiques et les autres widgets fit-content s’affichent à la hauteur de leur contenu ou à la hauteur configurée. Un onglet GRID dispose toujours ses widgets sous forme de cartes sur une grille de 12 colonnes. Un widget CANVAS n’a pas de position explicite ; si un onglet de canevas contient plusieurs widgets, ils s’affichent à la hauteur de leur contenu au lieu de remplir la fenêtre d’affichage.
• 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.
• Un widget FRONT_COMPONENT peut définir headerCommandMenuItemUniversalIdentifiers sur un tableau ordonné d’identifiants universels d’éléments du menu de commandes provenant de la même app. Ces actions apparaissent sous forme de boutons d’icône dans l’en-tête de la carte du widget et conservent leur disponibilité au niveau de la commande ainsi que leurs vérifications des autorisations. Les identifiants doivent être uniques et doivent pouvoir être résolus lors de l’installation de l’app.
• 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.

​

Widgets des champs

{
  universalIdentifier: 'c1c2c3c4-c5c6-4000-8000-000000000003',
  title: 'People → Opportunities',
  type: 'FIELD',
  configuration: {
    configurationType: 'FIELD',
    fieldMetadataId: PEOPLE_FIELD_UNIVERSAL_IDENTIFIER,
    fieldDisplayMode: 'TABLE',
    nestedRelationFieldMetadataId: OPPORTUNITIES_FIELD_UNIVERSAL_IDENTIFIER,
  },
}

• fieldMetadataId prend l’identifiant universel d’un champ sur l’objet de la mise en page.
• fieldDisplayMode est l’une des valeurs suivantes : 'FIELD', 'CARD', 'EDITOR', 'VIEW' ou 'TABLE'. TABLE intègre une vue listant les enregistrements d’un champ de relation un-à-plusieurs.
• nestedRelationFieldMetadataId est facultatif et prend l’identifiant universel d’un champ de relation un-à-plusieurs sur l’objet cible de la relation, afin de lister des enregistrements à deux sauts de relation (par exemple, une page Entreprise listant les opportunités des personnes de l’entreprise, ou une page Personne listant les opportunités de l’entreprise de la personne). Le premier saut peut être un champ de relation un-à-plusieurs ou plusieurs-à-un, le second doit être un-à-plusieurs (les relations de jonction ne sont pas prises en charge), et cela nécessite fieldDisplayMode: 'TABLE' — le combiner avec tout autre mode d’affichage constitue une erreur de validation, puisqu’un widget imbriqué est toujours rendu comme une vue intégrée.

​

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.