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 fournir des vues préconfigurées avec votre application. Chaque objet obtient automatiquement sa vue de liste principale (le tableau « All … » ouvert par un élément de navigation OBJECT), provisionnée par le serveur — y compris les objets que votre application crée, avec une colonne par champ que votre application déclare. Les vues que vous définissez avec defineView() sont toujours des vues supplémentaires en plus de cette vue par défaut.

src/views/example-view.ts

import { defineView } 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',
  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.
La vue de liste principale de l’objet appartient au serveur : key est obsolète et ignorée, de sorte qu’une vue définie dans le manifeste ne peut jamais la revendiquer. Ajoutez un élément de navigation VIEW si vous voulez que votre vue soit à un clic dans la barre latérale.
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`	obsolète	N’est plus pris en compte : l’endroit où s’ouvrent les enregistrements est désormais une propriété de l’objet (`openRecordIn` sur `defineObject()`), avec repli sur la préférence de chaque membre.
`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 schéma canonique : chaque objet personnalisé obtient une vue d’index par défaut générée automatiquement lors de sa création ; il vous suffit donc d’inclure l’élément de la 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