Éléments du menu de commande - Twenty Documentation

Un élément de menu de commande est le lien entre l’utilisateur et un front component. Il enregistre le composant dans le menu de commande (Cmd+K) de Twenty et, éventuellement, comme bouton d’action rapide épinglé dans le coin supérieur droit de la page.

src/command-menu-items/open-dashboard.command-menu-item.ts

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

export default defineCommandMenuItem({
  universalIdentifier: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
  label: 'Open Dashboard',
  shortLabel: 'Dashboard',
  icon: 'IconLayoutDashboard',
  isPinned: true,
  availabilityType: 'GLOBAL',
  frontComponentUniversalIdentifier: '74c526eb-cb68-4cf7-b05c-0dd8c288d948',
});

Champs de configuration

Champ	Obligatoire	Description
`universalIdentifier`	Oui	ID unique et stable pour la commande
`label`	Oui	Libellé complet affiché dans le menu de commande (Cmd+K)
`frontComponentUniversalIdentifier`	Oui	L’`universalIdentifier` du composant frontal que cette commande ouvre
`shortLabel`	Non	Libellé plus court affiché sur le bouton d’action rapide épinglé
`icon`	Non	Nom de l’icône affiché à côté du libellé (p. ex. `'IconBolt'`, `'IconSend'`)
`isPinned`	Non	Lorsque `true`, affiche la commande comme un bouton d’action rapide dans le coin supérieur droit de la page
`availabilityType`	Non	Contrôle l’emplacement d’apparition de la commande : `'GLOBAL'` (toujours disponible), `'RECORD_SELECTION'` (uniquement lorsque des enregistrements sont sélectionnés) ou `'FALLBACK'` (affichée lorsqu’aucune autre commande ne correspond)
`availabilityObjectUniversalIdentifier`	Non	Restreint la commande aux pages d’un type d’objet spécifique (p. ex., uniquement sur les enregistrements « Company »)
`conditionalAvailabilityExpression`	Non	Une expression booléenne qui contrôle dynamiquement la visibilité (voir ci-dessous)

Commandes sans interface

Un élément de menu de commande associé à un headless front component est la manière idiomatique de proposer une action en un clic — exécuter du code, naviguer, ou confirmer puis exécuter. La page Front Components couvre les SDK Command components (Command, CommandLink, CommandModal, CommandOpenSidePanelPage) qui gèrent le modèle action-et-démontage. Un flux typique :

src/front-components/run-action.tsx

import { defineFrontComponent } from 'twenty-sdk/define';
import { Command } from 'twenty-sdk/command';
import { CoreApiClient } from 'twenty-sdk/clients';

const RunAction = () => {
  const execute = async () => {
    const client = new CoreApiClient();
    await client.mutation({
      createTask: {
        __args: { data: { title: 'Created by my app' } },
        id: true,
      },
    });
  };

  return <Command execute={execute} />;
};

export default defineFrontComponent({
  universalIdentifier: 'e5f6a7b8-c9d0-1234-efab-345678901234',
  name: 'run-action',
  description: 'Creates a task from the command menu',
  component: RunAction,
  isHeadless: true,
});

src/command-menu-items/run-action.command-menu-item.ts

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

export default defineCommandMenuItem({
  universalIdentifier: 'f6a7b8c9-d0e1-2345-fabc-456789012345',
  label: 'Run my action',
  icon: 'IconPlayerPlay',
  frontComponentUniversalIdentifier: 'e5f6a7b8-c9d0-1234-efab-345678901234',
});

Expressions de disponibilité conditionnelle

Le champ conditionalAvailabilityExpression vous permet de contrôler quand une commande est visible en fonction du contexte de la page actuelle. Importez des variables typées et des opérateurs depuis twenty-sdk pour construire des expressions :

src/command-menu-items/bulk-update.command-menu-item.ts

import {
  defineCommandMenuItem,
  objectPermissions,
  everyEquals,
} from 'twenty-sdk/define';

export default defineCommandMenuItem({
  universalIdentifier: '...',
  label: 'Bulk Update',
  availabilityType: 'RECORD_SELECTION',
  frontComponentUniversalIdentifier: '...',
  conditionalAvailabilityExpression: everyEquals(
    objectPermissions,
    'canUpdateObjectRecords',
    true,
  ),
});

RECORD_SELECTION implique déjà une sélection non vide — utilisez numberOfSelectedRecords uniquement pour des décomptes spécifiques (par exemple >= 2).

Variables de contexte

Elles représentent l’état actuel de la page :

Variable	Type	Description
`pageType`	`string`	Type de page actuel (p. ex. `'RecordIndexPage'`, `'RecordShowPage'`)
`isInSidePanel`	`boolean`	Indique si le composant est rendu dans un panneau latéral
`numberOfSelectedRecords`	`number`	Nombre d’enregistrements actuellement sélectionnés
`isSelectAll`	`boolean`	Indique si “tout sélectionner” est actif
`selectedRecords`	`array`	Les objets d’enregistrement sélectionnés
`favoriteRecordIds`	`array`	IDs des enregistrements ajoutés aux favoris
`objectPermissions`	`object`	Autorisations pour le type d’objet actuel
`targetObjectReadPermissions`	`object`	Autorisations de lecture pour l’objet cible
`targetObjectWritePermissions`	`object`	Autorisations d’écriture pour l’objet cible
`featureFlags`	`object`	Drapeaux de fonctionnalité actifs
`objectMetadataItem`	`object`	Métadonnées du type d’objet actuel
`hasAnySoftDeleteFilterOnView`	`boolean`	Indique si la vue actuelle possède un filtre de suppression logique

Opérateurs

Combinez des variables en expressions booléennes :

Opérateur	Description
`isDefined(value)`	`true` si la valeur n’est pas null/undefined
`isNonEmptyString(value)`	`true` si la valeur est une chaîne non vide
`includes(array, value)`	`true` si le tableau contient la valeur
`includesEvery(array, prop, value)`	`true` si la propriété de chaque élément inclut la valeur
`every(array, prop)`	`true` si la propriété est truthy sur chaque élément
`everyDefined(array, prop)`	`true` si la propriété est définie pour chaque élément
`everyEquals(array, prop, value)`	`true` si la propriété est égale à la valeur pour chaque élément
`some(array, prop)`	`true` si la propriété est truthy sur au moins un élément
`someDefined(array, prop)`	`true` si la propriété est définie sur au moins un élément
`someEquals(array, prop, value)`	`true` si la propriété est égale à la valeur sur au moins un élément
`someNonEmptyString(array, prop)`	`true` si la propriété est une chaîne non vide sur au moins un élément
`none(array, prop)`	`true` si la propriété est falsy sur chaque élément
`noneDefined(array, prop)`	`true` si la propriété est undefined sur chaque élément
`noneEquals(array, prop, value)`	`true` si la propriété n’est égale à la valeur sur aucun élément

​Champs de configuration

​Commandes sans interface

​Expressions de disponibilité conditionnelle

​Variables de contexte

​Opérateurs

Champs de configuration

Commandes sans interface

Expressions de disponibilité conditionnelle

Variables de contexte

Opérateurs