Comment masquer une liste si elle est vide

Introduction

Dans une interface utilisateur, afficher une liste vide peut être déroutant et peu esthétique. Pour améliorer l'expérience utilisateur, il est essentiel d'adapter l'affichage en fonction des données disponibles. Cet article vous guide pas à pas pour masquer une liste lorsqu'elle est vide et afficher à la place un message clair indiquant l'absence de données.

En bonus, voyons comment intégrer une fonctionnalité supplémentaire comme un compteur d'éléments dans l'en-tête de la page.

Étapes à suivre

1. Assigner un « filterKey » à la liste, qui est unique à la page

Ce champ attribut un nom à la liste pour la repérer dans le « pageState » de la page.

2. Configurer un message pour une liste vide et configurer la visibilité

1. Ajouter un composant "Text" pour afficher un message d'absence de données lorsque la liste est vide. Dans notre exemple, nous avons indiquer “Cette liste ne contient aucun cas” comme valeur.

    

2. Sur ce message, ajouter une condition de visibilité ayant cette syntaxe:

    

3. Appliquer la même condition sur le component « List » lui-même, mais cette fois-ci de manière inversée :

Maintenant, la page affichera la liste si elle contient des données, autrement, elle affichera notre texte.

Bonus: Afficher le compte des éléments dans l’entête de la page

• Ajouter un objet « Text » dans l’entête de page

• Configurez le pour obtenir la valeur à partir du « pageState » comme ceci :

Conclusion

Ce guide explique comment améliorer l’expérience utilisateur en masquant une liste vide et en affichant un message explicatif. Cela permet de rendre les pages plus claires et dynamiques, tout en ajoutant un compteur d’éléments pour plus de transparence.