github-actions[bot]
ebee7d71b9
Created by Github action <!-- This is an auto-generated description by cubic. --> <a href="https://cubic.dev/pr/twentyhq/twenty/pull/22715?utm_source=github" target="_blank" rel="noopener noreferrer" data-no-image-dialog="true"><picture><source media="(prefers-color-scheme: dark)" srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img alt="Review in cubic" src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a> <!-- End of auto-generated description by cubic. --> Co-authored-by: github-actions <github-actions@twenty.com>
119 lines
11 KiB
Plaintext
119 lines
11 KiB
Plaintext
---
|
||
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 |
|