# Mise en forme conditionnelle

- Human documentation: [https://docs.univer.ai/fr-FR/guides/sheets/features/conditional-formatting](https://docs.univer.ai/fr-FR/guides/sheets/features/conditional-formatting)

- Agent Markdown: [https://docs.univer.ai/fr-FR/guides/sheets/features/conditional-formatting.md](https://docs.univer.ai/fr-FR/guides/sheets/features/conditional-formatting.md)

- Requested language: `fr-FR`

- Content language: `fr-FR`

- Documentation version: `1.2.0`

- Source: [sheets/features/conditional-formatting.fr-FR.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/sheets/features/conditional-formatting.fr-FR.mdx)

---

#### Package metadata

```json
{
  "preset": [
    {
      "client": "@univerjs/preset-sheets-conditional-formatting",
      "locale": "@univerjs/preset-sheets-conditional-formatting/locales/en-US",
      "style": "@univerjs/preset-sheets-conditional-formatting/lib/index.css"
    }
  ],
  "plugins": [
    {
      "client": "@univerjs/sheets-conditional-formatting",
      "facade": "@univerjs/sheets-conditional-formatting/facade"
    },
    {
      "client": "@univerjs/sheets-conditional-formatting-ui",
      "locale": "@univerjs/sheets-conditional-formatting-ui/locale/en-US",
      "style": "@univerjs/sheets-conditional-formatting-ui/lib/index.css"
    }
  ],
  "mobile": true,
  "server": false
}
```

La mise en forme conditionnelle permet de modifier automatiquement le format des cellules selon des conditions précises, afin de mettre en évidence les données ou tendances importantes. Elle prend en charge différentes conditions et options de mise en forme, ce qui facilite une compréhension plus intuitive des données.

## Mode plugin

### Installation

#### npm

```bash
npm install @univerjs/sheets-conditional-formatting @univerjs/sheets-conditional-formatting-ui
```

#### pnpm

```bash
pnpm add @univerjs/sheets-conditional-formatting @univerjs/sheets-conditional-formatting-ui
```

#### yarn

```bash
yarn add @univerjs/sheets-conditional-formatting @univerjs/sheets-conditional-formatting-ui
```

#### bun

```bash
bun add @univerjs/sheets-conditional-formatting @univerjs/sheets-conditional-formatting-ui
```

### Utilisation

```typescript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { UniverSheetsConditionalFormattingPlugin } from '@univerjs/sheets-conditional-formatting' // [!code ++]
import { UniverSheetsConditionalFormattingUIPlugin } from '@univerjs/sheets-conditional-formatting-ui' // [!code ++]
import SheetsConditionalFormattingUIEnUS from '@univerjs/sheets-conditional-formatting-ui/locale/en-US' // [!code ++]
import '@univerjs/sheets-conditional-formatting-ui/lib/index.css' // [!code ++]
import '@univerjs/sheets-conditional-formatting/facade' // [!code ++]

const univer = new Univer({
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: mergeLocales(
      SheetsConditionalFormattingUIEnUS, // [!code ++]
    ),
  },
})

univer.registerPlugin(UniverSheetsConditionalFormattingPlugin) // [!code ++]
univer.registerPlugin(UniverSheetsConditionalFormattingUIPlugin) // [!code ++]
```

## Prise en charge mobile

Configurez d’abord l’[éditeur mobile](https://docs.univer.ai/fr-FR/guides/sheets/getting-started/installation.md#mobile-support). Dans l’initialisation en mode plugin de cette page, remplacez les inscriptions de bureau ci-dessous par les exports mobiles des mêmes paquets **avant d’ouvrir un document**. Conservez modèles, styles, traductions et imports Facade ; n’enregistrez pas les deux variantes.

| Paquet                                       | Inscription de bureau                       | Inscription mobile                                |
| -------------------------------------------- | ------------------------------------------- | ------------------------------------------------- |
| `@univerjs/sheets-conditional-formatting-ui` | `UniverSheetsConditionalFormattingUIPlugin` | `UniverSheetsConditionalFormattingMobileUIPlugin` |

## Mode preset

### Installation

#### npm

```bash
npm install @univerjs/preset-sheets-conditional-formatting
```

#### pnpm

```bash
pnpm add @univerjs/preset-sheets-conditional-formatting
```

#### yarn

```bash
yarn add @univerjs/preset-sheets-conditional-formatting
```

#### bun

```bash
bun add @univerjs/preset-sheets-conditional-formatting
```

### Utilisation

```typescript
import { UniverSheetsConditionalFormattingPreset } from '@univerjs/preset-sheets-conditional-formatting' // [!code ++]
import UniverPresetSheetsConditionalFormattingEnUS from '@univerjs/preset-sheets-conditional-formatting/locales/en-US' // [!code ++]
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'
import '@univerjs/preset-sheets-core/lib/index.css'
import '@univerjs/preset-sheets-conditional-formatting/lib/index.css' // [!code ++]

const { univerAPI } = createUniver({
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: mergeLocales(
      UniverPresetSheetsCoreEnUS,
      UniverPresetSheetsConditionalFormattingEnUS, // [!code ++]
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
    UniverSheetsConditionalFormattingPreset(), // [!code ++]
  ],
})
```

## API Facade

Vous trouverez les définitions de types complètes de l’API Facade dans la [FacadeAPI](https://docs.univer.ai/fr-FR/reference/facade.md).

### Importation

> [!INFO: Remarque sur le mode plugin]
> Seul le mode plugin nécessite d’importer manuellement le package Facade. Le mode preset inclut déjà le package Facade correspondant ; aucune importation supplémentaire n’est donc nécessaire.

```typescript
import '@univerjs/sheets-conditional-formatting/facade'
```

### Créer des règles de mise en forme conditionnelle

[`FWorksheet.newConditionalFormattingRule()`](https://docs.univer.ai/fr-FR/reference/facade/worksheet.md#newconditionalformattingrule) crée un générateur de mise en forme conditionnelle et renvoie une instance de `FConditionalFormattingBuilder`. Celle-ci permet de générer des règles de mise en forme conditionnelle en chaînant les méthodes.

Voici quelques méthodes membres de [`FConditionalFormattingBuilder`](https://docs.univer.ai/fr-FR/reference/facade/conditional-formatting-builder.md) :

| Méthode                        | Description                                                                                                                                      |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| build                          | Génère la règle de mise en forme conditionnelle                                                                                                  |
| copy                           | Crée une copie complète du générateur actuel                                                                                                     |
| createCfId                     | Crée un identifiant de mise en forme conditionnelle                                                                                              |
| getRanges                      | Obtient la plage d’application de la mise en forme conditionnelle actuelle                                                                       |
| setRanges                      | Définit la plage de la règle de mise en forme conditionnelle                                                                                     |
| setAverage                     | Définit une règle de mise en forme conditionnelle basée sur la valeur moyenne                                                                    |
| setUniqueValues                | Définit une règle de mise en forme conditionnelle pour les valeurs uniques                                                                       |
| setDuplicateValues             | Définit une règle de mise en forme conditionnelle pour les valeurs en double                                                                     |
| setRank                        | Définit une règle de mise en forme conditionnelle basée sur le classement                                                                        |
| setIconSet                     | Définit une règle de mise en forme conditionnelle avec un jeu d’icônes                                                                           |
| setColorScale                  | Définit une règle de mise en forme conditionnelle avec une échelle de couleurs                                                                   |
| setDataBar                     | Définit une règle de mise en forme conditionnelle avec une barre de données                                                                      |
| setBackground                  | Définit la couleur d’arrière-plan de la mise en forme conditionnelle                                                                             |
| setBold                        | Indique si la police de la mise en forme conditionnelle est en gras                                                                              |
| setFontColor                   | Définit la couleur de police de la mise en forme conditionnelle                                                                                  |
| setItalic                      | Indique si la police de la mise en forme conditionnelle est en italique                                                                          |
| setStrikethrough               | Indique si la police de la mise en forme conditionnelle est barrée                                                                               |
| setUnderline                   | Indique si la police de la mise en forme conditionnelle est soulignée                                                                            |
| whenCellEmpty                  | Déclenche la règle de mise en forme conditionnelle lorsque la cellule est vide                                                                   |
| whenCellNotEmpty               | Déclenche la règle de mise en forme conditionnelle lorsque la cellule n’est pas vide                                                             |
| whenDate                       | Déclenche la règle de mise en forme conditionnelle lorsque la date appartient à une période donnée                                               |
| whenFormulaSatisfied           | Déclenche la règle de mise en forme conditionnelle lorsque le résultat de la formule est vrai                                                    |
| whenNumberBetween              | Déclenche la règle de mise en forme conditionnelle lorsque le nombre est compris entre deux valeurs données ou égal à l’une d’elles              |
| whenNumberEqualTo              | Déclenche la règle de mise en forme conditionnelle lorsque le nombre est égal à la valeur donnée                                                 |
| whenNumberGreaterThan          | Déclenche la règle de mise en forme conditionnelle lorsque le nombre est supérieur à la valeur donnée                                            |
| whenNumberGreaterThanOrEqualTo | Déclenche la règle de mise en forme conditionnelle lorsque le nombre est supérieur ou égal à la valeur donnée                                    |
| whenNumberLessThan             | Déclenche la règle de mise en forme conditionnelle lorsque le nombre est inférieur à la valeur donnée                                            |
| whenNumberLessThanOrEqualTo    | Déclenche la règle de mise en forme conditionnelle lorsque le nombre est inférieur ou égal à la valeur donnée                                    |
| whenNumberNotBetween           | Déclenche la règle de mise en forme conditionnelle lorsque le nombre n’est pas compris entre deux valeurs données et n’est égal à aucune d’elles |
| whenNumberNotEqualTo           | Déclenche la règle de mise en forme conditionnelle lorsque le nombre est différent de la valeur donnée                                           |
| whenTextContains               | Déclenche la règle de mise en forme conditionnelle lorsque le texte contient la valeur indiquée                                                  |
| whenTextDoesNotContain         | Déclenche la règle de mise en forme conditionnelle lorsque le texte ne contient pas la valeur indiquée                                           |
| whenTextEndsWith               | Déclenche la règle de mise en forme conditionnelle lorsque le texte se termine par la valeur indiquée                                            |
| whenTextEqualTo                | Déclenche la règle de mise en forme conditionnelle lorsque le texte est égal à la valeur donnée                                                  |
| whenTextStartsWith             | Déclenche la règle de mise en forme conditionnelle lorsque le texte commence par la valeur indiquée                                              |

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// Create a conditional formatting rule that sets the cell format to italic, red background, and green font color when the cell is not empty.
const fRange = fWorksheet.getRange('A1:T100')
const rule = fWorksheet.newConditionalFormattingRule()
  .whenCellNotEmpty()
  .setRanges([fRange.getRange()])
  .setItalic(true)
  .setBackground('red')
  .setFontColor('green')
  .build()
fWorksheet.addConditionalFormattingRule(rule)
```

### Obtenir les règles de mise en forme conditionnelle

* `FWorksheet.getConditionalFormattingRules()` obtient toutes les règles de mise en forme conditionnelle de la feuille de calcul
* `FRange.getConditionalFormattingRules()` obtient toutes les règles de mise en forme conditionnelle de la plage

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()

// Get all conditional formatting rules of the active worksheet
const fWorksheet = fWorkbook.getActiveSheet()
const rulesOfSheet = fWorksheet.getConditionalFormattingRules()

// Get all conditional formatting rules of the range A1:T100
const fRange = fWorksheet.getRange('A1:T100')
const rulesOfRange = fRange.getConditionalFormattingRules()
```

### Supprimer des règles de mise en forme conditionnelle

`FWorksheet.deleteConditionalFormattingRule(cfId)` supprime une règle de mise en forme conditionnelle de la feuille de calcul, où `cfId` est l’identifiant de cette règle.

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const rules = fWorksheet.getConditionalFormattingRules()

// Remove the first conditional formatting rule
fWorksheet.deleteConditionalFormattingRule(rules[0]?.cfId)
```

### Mettre à jour des règles de mise en forme conditionnelle

`FWorksheet.setConditionalFormattingRule(cfId, rule)` met à jour une règle de mise en forme conditionnelle dans la feuille de calcul, où `cfId` est l’identifiant de la règle et `rule` la nouvelle règle.

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// Create a conditional formatting rule that sets the cell format to italic, red background, and green font color when the cell is not empty.
const fRange = fWorksheet.getRange('A1:T100')
const rule = fWorksheet.newConditionalFormattingRule()
  .whenCellNotEmpty()
  .setRanges([fRange.getRange()])
  .setItalic(true)
  .setBackground('red')
  .setFontColor('green')
  .build()
fWorksheet.addConditionalFormattingRule(rule)

// Modify the first rule to apply to a new range
const rules = fWorksheet.getConditionalFormattingRules()
const newRuleRange = fWorksheet.getRange('A1:D10')
fWorksheet.setConditionalFormattingRule(rules[0]?.cfId, { ...rules[0], ranges: [newRuleRange.getRange()] })
```

### Modifier la priorité des règles de mise en forme conditionnelle

`FWorksheet.moveConditionalFormattingRule(cfId, toCfId, type)` modifie la priorité d’une règle de mise en forme conditionnelle dans la feuille de calcul, où `cfId` est l’identifiant de la règle, `toCfId` celui de la règle cible et `type` le type de déplacement (par exemple, 'before' ou 'after').

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const rules = fWorksheet.getConditionalFormattingRules()

// Move the third rule before the first rule
const rule = rules[2]
const targetRule = rules[0]
fWorksheet.moveConditionalFormattingRule(rule?.cfId, targetRule?.cfId, 'before')
```

### Effacer toutes les règles de mise en forme conditionnelle

* `FWorksheet.clearConditionalFormatRules()` efface toutes les règles de mise en forme conditionnelle de la feuille de calcul.
* `FRange.clearConditionalFormatRules()` efface toutes les règles de mise en forme conditionnelle de la plage.

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()

// Clear all conditional formatting rules of the active worksheet
const fWorksheet = fWorkbook.getActiveSheet()
fWorksheet.clearConditionalFormatRules()

// Clear all conditional formatting rules of the range A1:T100
const fRange = fWorksheet.getRange('A1:T100')
fRange.clearConditionalFormatRules()
```

## Réutiliser les descriptions et aperçus de règles

Pour une liste personnalisée, importez `getRuleDescribe` et `ConditionalFormattingRulePreview` depuis `@univerjs/sheets-conditional-formatting-ui`. Passez la règle entière à `getRuleDescribe(rule, localeService)` et seulement sa configuration (`rule.rule`) à l’aperçu. Celui-ci montre l’apparence configurée sans évaluer les cellules. Rendez-le dans le contexte React d’Univer.

`CF_PANEL_KEY` identifie le panneau intégré pour la [substitution de composants](https://docs.univer.ai/fr-FR/guides/sheets/ui/components.md). Le callback `IConditionFormattingPanelProps.onEditorExit` est appelé à la fin de l’édition après validation, annulation, activation ou suppression d’une feuille. Il n’indique ni un enregistrement réussi ni la fermeture de la barre latérale.

```tsx
import type { IConditionFormattingRule } from '@univerjs/sheets-conditional-formatting'
import { LocaleService } from '@univerjs/core'
import { ConditionalFormattingRulePreview, getRuleDescribe } from '@univerjs/sheets-conditional-formatting-ui'
import { useDependency } from '@univerjs/ui'

interface IRuleSummaryProps {
  rule: IConditionFormattingRule
}

function RuleSummary({ rule }: IRuleSummaryProps) {
  const localeService = useDependency(LocaleService)

  return (
    <div>
      <span>{getRuleDescribe(rule, localeService)}</span>
      <ConditionalFormattingRulePreview rule={rule.rule} />
    </div>
  )
}
```