Visibilité des composants

Aperçu

La visibilité dynamique est une fonctionnalité puissante qui vous permet de créer des interfaces utilisateur s'adaptant à diverses situations. Au lieu d'afficher toujours tous les composants, vous pouvez définir des règles déterminant quand un composant doit être visible.

Avantages clés

Expérience utilisateur améliorée : Créez des interfaces plus épurées en affichant uniquement les informations pertinentes au bon moment.
Performance améliorée : Les composants cachés ne sont pas chargés, réduisant les temps de chargement des pages et les requêtes serveur.
Design réactif : Adaptez les mises en page et l'affichage des composants pour différents appareils (Bureau, Tablette, Téléphone).
Interface utilisateur plus réactive : L'interface semble dynamique lorsque des composants apparaissent/disparaissent en fonction des actions, des données ou de l'appareil.
Logique simplifiée : Obtenez des affichages conditionnels complexes sans interactions ou code compliqués

Comment fonctionne la visibilité dynamique

Chaque composant Avonni possède une Définir le composant visible propriété (dans le panneau Propriétés) qui contrôle son affichage. Vous pouvez la définir sur :

Toujours visible (Cet attribut est): Par défaut ; le composant est toujours affiché.
Toujours caché (false): Le composant n'est jamais affiché.
Visibilité conditionnelle : Le composant n'est affiché que lorsque des conditions spécifiques sont remplies.

Configuration de la visibilité conditionnelle

Pour rendre la visibilité d'un composant conditionnelle :

Sélectionnez le composant : Cliquez sur le composant dans la zone de travail dont vous souhaitez contrôler la visibilité.
Trouvez la propriété "Définir la visibilité du composant" : Dans le panneau Propriétés (côté droit), localisez la Visible .
Cliquez sur le sélecteur de ressource : Cliquez sur l'icône à côté de la Visible propriété (généralement une icône de variable/étiquette). Cela ouvre le menu de sélection de ressources. Ne saisissez simplement Cet attribut est ou false à moins que vous ne souhaitiez que le composant soit toujours visible ou toujours caché.
Choisissez votre condition :

Attribut du composant : Basez la visibilité sur l'état ou la valeur de un autre composant (par ex., affichez le composant B uniquement si @MyCheckbox.checked est vrai).
Variable : Utilisez une Booléen ressource Variable que vous avez créée. Le composant s'affiche lorsque la variable est Cet attribut est.
Formule : Utilisez une Formule ressource qui s'évalue à Cet attribut est (visible) ou false (caché). Permet une logique complexe.
Variable globale : Utilisez des informations fournies par le système.
- Nouveau : Pour le type d'appareil : Sélectionnez $Component, puis choisissez l'attribut FormFactor . Celui-ci contient le type d'appareil actuel sous forme de texte : 'Desktop', 'Tablet', ou 'Phone'.

: La valeur maximale.

Affichage conditionnel d'un calendrier

Créons un exemple où un composant Avonni Calendar n'est visible que lorsque l'utilisateur sélectionne une option "Calendar" depuis un Avonni Button Menu.

Faites glisser un composant Avonni Menu Bouton sur la zone de travail.
Dans ses propriétés, configurez le Éléments:
- Ajoutez un élément avec Libellé : Table, Valeur : table
- Ajoutez un élément avec Libellé : Calendar, Valeur : calendar
Donnez au Button Menu un par le véritable (par ex., ViewModeMenu).

Ajoutez le calendrier

Faites glisser un composant Avonni Calendar composant sur la zone de travail

Définir la visibilité du calendrier

Sélectionnez le Calendar .
Dans le panneau Propriétés, trouvez la Visible .
Cliquez sur l'icône du sélecteur de ressources.
Sélectionnez Attribut du composant.
Sélectionnez votre composant Button Menu (par ex., ViewModeMenu).
Choisissez la valeur attribut
Définissez l'opérateur sur égal
Définissez la valeur sur calendar.

Comment ça marche

La propriété Visible du Calendrier est maintenant directement liée au valeur du ViewModeMenu Button Menu. Lorsque l'utilisateur sélectionne "Calendar" dans le Button Menu, le valeur devient 'calendar', la condition s'évalue à Cet attribut est, et le composant Calendar est affiché. Si une autre option est sélectionnée, la condition est false, et le calendrier est non chargé.

Mise en page spécifique à l'appareil

Affichons un tableau de données détaillé sur les ordinateurs/tablettes, mais un composant Liste plus simple sur les téléphones.

Ajouter un tableau de données

Ajoutez votre composant Data Table (par ex., MyDataTable).

Définir la visibilité du tableau de données

Sélectionnez MyDataTable.
Sélectionnez le PDF Viewer. Visible propriété, définissez la condition : Variable globale $Component.FormFactor différent de 'Phone'.

Ajouter un composant Liste

Ajoutez votre composant Liste (par ex., MyList) conçu pour une visualisation mobile.

Définir la visibilité de la liste

Sélectionnez MyList.
Sélectionnez le PDF Viewer. Visible propriété, définissez la condition : Variable globale $Component.FormFactor égal 'Phone'.

Résultat : Les utilisateurs sur ordinateur ou tablette verront le tableau de données, tandis que les utilisateurs sur téléphone verront le composant Liste, offrant une vue optimisée pour chaque format d'appareil.

Cas d'utilisation courants

Formulaires conditionnels : Afficher/masquer des champs de formulaire en fonction des sélections précédentes.
Tableaux de bord personnalisés : Afficher différents composants selon le rôle ou le profil de l'utilisateur.
Divulgation progressive : Révélez progressivement des informations au fur et à mesure que l'utilisateur interagit.
Messages d'erreur : Afficher les messages d'erreur uniquement lorsqu'une erreur se produit.
Indicateurs de chargement : Afficher un indicateur de chargement pendant la récupération des données, puis le masquer et afficher le composant de données.
Créer des mises en page réactives qui s'adaptent aux écrans Bureau, Tablette et Téléphone

Conseils

Commencez simple : Commencez par des conditions simples et augmentez progressivement la complexité.
Testez minutieusement : Testez vos conditions de visibilité avec différentes données et interactions utilisateur.
Utilisez les formules avec précaution : Bien que puissantes, les formules complexes peuvent être plus difficiles à maintenir.
Utilisez des variables booléennes : Créez des variables booléennes pour rendre cela plus lisible.

En résumé

La visibilité dynamique est une fonctionnalité centrale des composants dynamiques Avonni, offrant un moyen puissant de créer des interfaces utilisateur réactives et efficaces. En liant la Visible propriété aux données, aux attributs des composants, aux formules, ou à la nouvelle $Component.FormFactor variable globale, vous pouvez contrôler précisément quand les composants sont affichés, optimisant les performances et adaptant l'expérience utilisateur à différentes conditions et appareils.

Mis à jour il y a 4 mois

Ce contenu vous a-t-il été utile ?

Bon après-midi