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