Tutoriel Axure : Transfert de données sélectionnées entre répéteurs

Transmission de données sélectionnées entre les panneaux dynamiques Axure : un didacticiel pour le prototypage haute fidélité

Les panneaux dynamiques sont des outils essentiels dans Axure RP pour créer des prototypes haute fidélité. Considérez-les comme des bases de données miniatures au sein de votre conception. Mais comment transmettre les données sélectionnées d’un panneau dynamique à un autre ?

Aujourd'hui, nous allons explorer cela à l'aide d'un exemple de table navette à sélection multiple.

1. Le résultat :

Notre objectif est de construire un prototype où les utilisateurs peuvent :

• Sélectionnez les éléments dans le tableau supérieur à l'aide des cases à cocher.
• Transférez les éléments sélectionnés vers le tableau du bas à l’aide des flèches haut et bas.
• Utilisez le bouton "Sélectionner tout" en haut pour basculer l'état de sélection de toutes les lignes.

Lien du prototype : [Insérer le lien du prototype ici]

2. Construire les tableaux :

• Structure du tableau : les tableaux se composent d'un en-tête avec des cases à cocher (à la fois dans un panneau dynamique pour les états "sélectionné" et "non sélectionné") et d'un panneau dynamique représentant le tableau lui-même.
• Style visuel : utilisez des rectangles, des boutons de sélection multiple et de la transparence pour créer l'effet visuel. Pensez aux rayures zébrées et aux effets de survol pour une meilleure expérience utilisateur.

3. Gestion des données :

• Noms de colonnes : créez des colonnes telles que "colonne1" à "colonne7" pour vos données, ainsi qu'une colonne spéciale nommée "xuanzhong" pour indiquer si une ligne est sélectionnée (valeur par défaut : vide).
• Liaison de données : connectez chaque colonne du panneau dynamique à l'élément correspondant sur votre prototype à l'aide des fonctionnalités interactives d'Axure.

4. Interactions des cases à cocher :

• Sélection/Désélection de lignes : utilisez l'interaction de mise à jour pour définir "xuanzhong" sur 1 lorsqu'une case à cocher est cochée et vide lorsqu'elle est désélectionnée.
• Fonctionnalité « Sélectionner tout » : utilisez un déclencheur d'événement pour parcourir toutes les lignes et définissez « xuanzhong » en conséquence.

5. Transfert de données entre les tables :

• Étiquette de texte pour le stockage : utilisez une étiquette de texte pour stocker temporairement les données des lignes sélectionnées dans chaque tableau.

• Extraction de données:

  1. Lorsque vous cliquez sur la "Flèche vers le bas", vérifiez s'il y a des sélections dans le tableau supérieur.
  2. Si tel est le cas, extrayez les données de l'étiquette de texte à l'aide de fonctions telles que lastIndexOf et slice .
  3. Utilisez l’interaction Add Row pour ajouter les données extraites au tableau du bas.
  4. Utilisez simultanément l’interaction Delete Row pour supprimer les lignes sélectionnées du tableau supérieur (facultatif).

• Transfert inversé : suivez un processus similaire pour le bouton "Flèche vers le haut", en transférant les données du bas vers le haut du tableau.

6. Touches finales :

• Ajoutez une info-bulle ou un message de réussite lorsque les données sont transférées avec succès.
• Gérez les cas où aucune donnée n’est sélectionnée dans l’une ou l’autre des tables.

Ce didacticiel complet vous fournit les connaissances et les outils nécessaires pour maîtriser le transfert de données entre les panneaux dynamiques dans Axure RP, vous permettant ainsi de créer des prototypes hautement interactifs et réalistes.