upstream-twenty/packages/twenty-docs/l/fr/developers/extend/apps/layout/command-menu-items.mdx

---
title: Éléments du menu de commande
description: Exposez les composants frontaux comme actions rapides et entrées du menu de commande (Cmd+K) avec defineCommandMenuItem.
icon: terminal
---

Un **élément de menu de commande** est le lien entre l’utilisateur et un [front component](/l/fr/developers/extend/apps/layout/front-components). 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.

```ts 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',
  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         | **Obsolète** — ignoré au profit de l’icône de l’application ; la build émet un avertissement si elle est définie                                                                                                                                                                                                                                                |
| `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), `'GLOBAL_OBJECT_CONTEXT'` (uniquement sur les pages avec un contexte d’objet — pages d’index et d’enregistrement), `'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](/l/fr/developers/extend/apps/layout/front-components#headless-vs-non-headless) 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](/l/fr/developers/extend/apps/layout/front-components#sdk-command-components) (`Command`, `CommandLink`, `CommandModal`, `CommandOpenSidePanelPage`) qui gèrent le modèle action-et-démontage.

Un flux typique : un composant headless affiche `<Command execute={...} />` (voir [l’exemple complet](/l/fr/developers/extend/apps/layout/front-components#sdk-command-components)), et l’élément de menu de commande y pointe :

```ts 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',
  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 :

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

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

### 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       |