Mise en forme conditionnelle

Prev Next

Découvrez comment utiliser la mise en forme conditionnelle dans le widget de tableau interactif.

:::(Info)To use conditional formatting, you need to have an interactive table widget with a datasource in your app.
If you don’t have one yet, read Building Your First Table: Walkthrough.
:::

Dans ce guide, vous apprendrez à :* Configurer de nouvelles règles de mise en forme conditionnelle* Comprendre les différents types de règles de mise en forme conditionnelle* Utiliser la comparaison de champs dans vos règles de mise en forme* Résoudre les problèmes liés aux erreurs de mise en forme conditionnelle

Configurer une règle

  1. Cliquez sur le widget de tableau interactif, puis accédez au Side Pane.
  2. Faites défiler vers le bas jusqu’à la section « Mise en forme conditionnelle ».
  3. Cliquez sur + pour ajouter une nouvelle règle.
  4. Par défaut, le premier du widget est sélectionné et une règle de base est automatiquement configurée.

image.png

Exemple

  • Le premier champ, « Description », est sélectionné.
  • Si les données de ce champ ne sont pas vides, l'arrière-plan est affiché en vert avec du texte blanc.
  • Cette mise en forme s'applique uniquement à la colonne « Description ».

Résumé de la règle

Le résumé de la règle répertorie les détails suivants :* Mise en forme: la couleur du texte et la couleur d’arrière-plan * Champ source: le champ auquel s’applique la règle de mise en forme conditionnelle* Condition: la condition qui doit être remplie pour que la mise en forme s’applique* Argument: la logique qui doit être respectée pour que la mise en forme s’applique* Mise en forme appliquée à: le nombre de champs auxquels s’applique la mise en forme

Voici le résumé de la règle pour l’exemple ci-dessus:image.png

Notez que c’est la condition qui apparaît dans le résumé de la règle, et non l’argument. En effet, notre mise en forme conditionnelle s’applique à condition que le champ ne soit pas vide.

Dans le troisième exemple que nous aborderons plus loin dans cet article, la mise en forme conditionnelle utilise un argument « Contient ». Pour cet exemple, le résumé de la règle se présente comme suit :conditional formatting rule summary with argument.png

Modifier une règle

  1. Dans la section « Mise en forme conditionnelle », survolez la règle que vous souhaitez modifier dans la liste.
  2. Cliquez sur l’icône en forme de crayon pour la modifier.
  3. Choisissez le champ source et le type de condition adaptés à votre cas d’utilisation.
  4. Sélectionnez soit une valeur statique, soit une variable pour l’argument.

Les modifications s'appliquent immédiatement au widget.

Exemple

Nous pouvons sélectionner « Statut », définir le type de condition sur « Égal à » et la valeur statique sur « Ouvert ». Ensuite, nous appliquons un fond rouge avec un texte blanc et choisissons d’appliquer la règle à tous les champs.

image.png

À présent, nous allons mettre en évidence les lignes contenant le mot « Défaut » dans la « Description » en leur appliquant un fond rouge plus foncé.

Exécution des règles

Les règles sont évaluées dans l'ordre dans lequel elles sont répertoriées.

  • La première règle dont la condition est vraie détermine la mise en forme de la cellule ou de la plage.
  • Pour réorganiser les règles, cliquez dessus et faites-les glisser vers une nouvelle position.

Exemple

Nous allons appliquer la condition « Contient » au champ « Description », définir la valeur statique sur « Défaut » et appliquer une mise en forme rouge. Nous déplaçons cette règle plus haut dans la hiérarchie pour nous assurer qu'elle soit prioritaire.

image.png

image.png

Utilisation d’une variable dans une règle

Si un argument utilise une variable qui n'a pas de valeur par défaut, la règle ne s'exécutera pas dans l'éditeur d'application, mais elle s'exécutera lorsqu'elle aura une valeur (soit en mode Développeur, soit dans le Lecteur).

image.png

États d'erreur

Pour que la mise en forme conditionnelle s'exécute, assurez-vous que les sections suivantes sont renseignées :* Champ source* Argument(s)* Appliquer la mise en forme à

De plus, les scénarios suivants entraîneront des erreurs de mise en forme conditionnelle :

  1. Champ source manquant ou champs archivés Siun champ source a été archivé ou supprimé du widget, la règle ne fonctionnera plus comme prévu. Assurez-vous que tous les champs source sont actifs dans votre widget et votre source de données.

image.png

image.png

image.png

  1. Champs archivés dans la section « Appliquer la mise en forme à » Sicertains champs de la section « Appliquer la mise en forme à » sont archivés ou supprimés mais que d’autres sont toujours disponibles, la règle continuera de fonctionner. Cependant, les champs archivés s’afficheront toujours et la mise en forme risque de ne pas leur être appliquée.

image.png

  1. Champ d'argument manquantUne règle ne peut pas fonctionner si le champ d'argument est manquant. Assurez-vous que tous les champs obligatoires sont renseignés pour que la règle s'exécute correctement.

Supprimer une règle

Pour supprimer une règle : 1. Dans la section « Mise en forme conditionnelle », survolez la règle que vous souhaitez supprimer. 2. Cliquez sur l’icône de corbeille située dans le coin supérieur droit de la fiche de la règle.

Limites

Configurez les règles de mise en forme conditionnelle en respectant la limite suivante afin de garantir un fonctionnement optimal de votre widget.

Limite
Nombre de règles par widget (à partir de la version r333) 20
Règles par widget (avant la version r333) 10

Mettre une ligne en surbrillance

Pour appliquer une mise en forme conditionnelle à une ligne entière (c'est-à-dire à toutes les colonnes de cette ligne) : 1. Dans la section « Appliquer la mise en forme à » d'une règle, sélectionnez tous les champs de la ligne.

Cela appliquera la mise en forme sélectionnée à l'ensemble de la ligne, ce qui vous permettra de mettre en évidence des lignes répondant à des conditions ou à des critères spécifiques.

Dépannage et bonnes pratiques

Si vous rencontrez des problèmes avec la mise en forme conditionnelle, voici quelques bonnes pratiques à prendre en compte :

  • Assurez-vous que vos champs sont actifs: vérifiez qu'aucun des champs sur lesquels vous travaillez n'est archivé ou supprimé.
  • Vérifiez s’il y a des conflits entre les règles: les règles étant évaluées dans l’ordre, assurez-vous que celles ayant la priorité la plus élevée soient placées en haut de la liste si vous souhaitez qu’elles prévalent sur d’autres règles.
  • Testez vos règles: après avoir configuré ou modifié une règle, vérifiez que la mise en forme s’applique correctement aussi bien dans l’éditeur d’application que dans Tulip Player.

Avez-vous trouvé ce que vous cherchiez ?

Vous pouvez également vous rendre sur community.tulip.co pour poser votre question ou voir si d’autres utilisateurs ont rencontré un problème similaire !