Vues

Une vue est une configuration enregistrée pour la façon dont les enregistrements d’un objet sont affichés : quels champs apparaissent, leur ordre, s’ils sont visibles, ainsi que les filtres ou groupes appliqués. Utilisez defineView() pour livrer des vues préconfigurées avec votre application — généralement une vue d’index par défaut pour chaque objet personnalisé que vous créez.

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,
    },
  ],
});

Points clés

objectUniversalIdentifier spécifie à quel objet cette vue s’applique. Il peut s’agir d’un objet personnalisé que vous avez défini ou d’un objet Twenty standard.
key: ViewKey.INDEX marque la vue comme la vue de liste principale de l’objet (celle qu’un élément de navigation OBJECT ouvre).
fields contrôle les colonnes affichées et leur ordre. Chaque champ référence un fieldMetadataUniversalIdentifier. Pour faire référence à un champ système créé automatiquement tel que createdAt, voir Ciblage des champs système.
Vous pouvez également définir filters, filterGroups, sorts, groups et fieldGroups pour des configurations plus avancées.
position contrôle l’ordre lorsqu’il existe plusieurs vues pour le même objet.

Propriétés optionnelles

Propriété	Valeurs	Description
`type`	`ViewType.TABLE` (par défaut), `ViewType.KANBAN`, `ViewType.CALENDAR`	Comment les enregistrements sont disposés. (`FIELDS_WIDGET`, `TABLE_WIDGET`, `KANBAN_WIDGET` et `CALENDAR_WIDGET` existent également mais sont utilisés en interne par les widgets de mise en page.)
`visibility`	`ViewVisibility.WORKSPACE` (par défaut), `ViewVisibility.UNLISTED`	Indique si la vue est affichée pour l’ensemble de l’espace de travail ou masquée des sélecteurs.
`openRecordIn`	`ViewOpenRecordIn.SIDE_PANEL` (par défaut), `ViewOpenRecordIn.RECORD_PAGE`	Définit où s’ouvre un enregistrement lors d’un clic.
`tris`	`{ fieldMetadataUniversalIdentifier, direction: ViewSortDirection.ASC \| DESC }[]`	Ordre de tri par défaut.
`isCompact`	`boolean`	Affichage compact des lignes.
`mainGroupByFieldMetadataUniversalIdentifier` + `shouldHideEmptyGroups`	—	Regrouper les enregistrements (par exemple, les colonnes kanban) par un champ.
`kanbanAggregateOperation`, `kanbanAggregateOperationFieldMetadataUniversalIdentifier`, `kanbanColumnWidth`	`AggregateOperations.*`	Agrégats et dimensionnement des colonnes Kanban.
`calendarLayout`, `calendarFieldMetadataUniversalIdentifier`, `calendarEndFieldMetadataUniversalIdentifier`	`ViewCalendarLayout.DAY` / `WEEK` / `MONTH`	Vues de calendrier : disposition, champ de date qui positionne les enregistrements et champ de date de fin facultatif.

Tous les enums ci-dessus sont exportés depuis twenty-sdk/define.

Filtres

Une vue peut être livrée avec des filtres préappliqués. Chaque filtre possède trois coordonnées : le champ faisant l’objet du filtrage, l’opérateur (comment comparer) et la valeur (par rapport à quoi comparer). Les trois doivent être alignées : l’utilisation d’un opérateur qui ne s’applique pas à un type de champ sera rejetée au moment de la synchronisation.

import { ViewFilterOperand } from 'twenty-sdk/define';

filters: [
  {
    universalIdentifier: '...',
    fieldMetadataUniversalIdentifier: STATUS_FIELD_UNIVERSAL_IDENTIFIER,
    operand: ViewFilterOperand.IS,
    value: ['ACTIVE'],
  },
],

Opérateurs pris en charge par type de champ

Type de champ	Opérandes pris en charge
`TEXT`, `EMAILS`, `FULL_NAME`, `ADDRESS`, `LINKS`, `PHONES`, `RAW_JSON`, `FILES`, `ACTOR`, `ARRAY`	`CONTAINS`, `DOES_NOT_CONTAIN`, `IS_EMPTY`, `IS_NOT_EMPTY`
`ACTOR.source`, `ACTOR.workspaceMemberId`	`IS`, `IS_NOT`, `IS_EMPTY`, `IS_NOT_EMPTY`
`SELECT`	`IS`, `IS_NOT`, `IS_EMPTY`, `IS_NOT_EMPTY`
`MULTI_SELECT`	`CONTAINS`, `DOES_NOT_CONTAIN`, `IS_EMPTY`, `IS_NOT_EMPTY`
`RELATION`	`IS`, `IS_NOT`, `IS_EMPTY`, `IS_NOT_EMPTY`
`NUMBER`	`IS`, `IS_NOT`, `GREATER_THAN_OR_EQUAL`, `LESS_THAN_OR_EQUAL`, `IS_EMPTY`, `IS_NOT_EMPTY`
`RATING`	`IS`, `GREATER_THAN_OR_EQUAL`, `LESS_THAN_OR_EQUAL`, `IS_EMPTY`, `IS_NOT_EMPTY`
`CURRENCY`, `CURRENCY.amountMicros`	`GREATER_THAN_OR_EQUAL`, `LESS_THAN_OR_EQUAL`, `IS`, `IS_NOT`, `IS_EMPTY`, `IS_NOT_EMPTY`
`CURRENCY.currencyCode`	`IS`, `IS_NOT`, `IS_EMPTY`, `IS_NOT_EMPTY`
`DATE`, `DATE_TIME`	`IS`, `IS_RELATIVE`, `IS_IN_PAST`, `IS_IN_FUTURE`, `IS_TODAY`, `IS_BEFORE`, `IS_AFTER`, `IS_EMPTY`, `IS_NOT_EMPTY`
`BOOLEAN`	`IS`
`UUID`	`IS`, `IS_NOT`, `IS_EMPTY`, `IS_NOT_EMPTY`
`TS_VECTOR`	`VECTOR_SEARCH`

Les types de champs avec des noms similaires peuvent utiliser des opérandes complètement différents — SELECT et MULTI_SELECT étant un cas courant.

Forme de valeur par opérande

Le champ value est toujours une valeur sérialisable en JSON, mais sa forme attendue dépend de l’opérande :

Famille d’opérandes	Forme de la valeur	Exemple
`IS`, `IS_NOT` sur `SELECT`	tableau de clés d’option (chaînes)	`['ACTIVE', 'PENDING']`
`CONTAINS`, `DOES_NOT_CONTAIN` sur `MULTI_SELECT`	tableau de clés d’option (chaînes)	`['TAG_A']`
`IS`, `IS_NOT` sur `RELATION`	tableau d’ID d’enregistrement (UUID)	`['c5a1...']`
`CONTAINS`, `DOES_NOT_CONTAIN` sur les champs de type texte	chaîne	`'acme'`
`IS`, `IS_NOT` sur `NUMBER`	chaîne (la valeur)	`'5'`
`IS` sur `RATING` / `UUID`	chaîne (la valeur)	`'5'`
`GREATER_THAN_OR_EQUAL`, `LESS_THAN_OR_EQUAL`	chaîne (la borne)	`'10'`
`IS`, `IS_BEFORE`, `IS_AFTER` sur `DATE` / `DATE_TIME`	chaîne ISO 8601	`'2025-01-01T00:00:00Z'`
`IS_EMPTY`, `IS_NOT_EMPTY`	chaîne vide	`''`
`IS` sur `BOOLEAN`	`'true'` ou `'false'`	`'true'`

Comment les vues apparaissent dans l’interface utilisateur

Une vue seule n’est pas accessible à partir de la barre latérale. Pour la faire apparaître là, associez-la à un élément de menu de navigation de type VIEW qui pointe vers le universalIdentifier de la vue. C’est le modèle canonique : chaque objet personnalisé livre généralement une vue par défaut + une entrée de barre latérale qui l’ouvre.

Vue d'ensemble

Applications

API

Auto-hébergement

Contribuer

Points clés

Propriétés optionnelles

Filtres

Opérateurs pris en charge par type de champ

Forme de valeur par opérande

Comment les vues apparaissent dans l’interface utilisateur

​Points clés

​Propriétés optionnelles

​Filtres

​Opérateurs pris en charge par type de champ

​Forme de valeur par opérande

​Comment les vues apparaissent dans l’interface utilisateur

Points clés

Propriétés optionnelles

Filtres

Opérateurs pris en charge par type de champ

Forme de valeur par opérande

Comment les vues apparaissent dans l’interface utilisateur