Intégrer un SVG pour créer une barre de progression
Updated on •Published on
Résumé de l'article
Apprenez à afficher un fichier SVG comme image statique ainsi qu’à utiliser une façon plus avancée d’intégrer un SVG dynamique, qui réagit selon les données. Dans le premier exemple, l’image SVG remplacera le logo DAZZM, dans le coin supérieur gauche de l’application. Dans le suivant, le composant HTML permettra au code SVG de réagir à la progression de l’utilisateur dans la complétion de ses informations de profil.
Apprenez à afficher un fichier SVG comme image statique ainsi qu’à utiliser une façon plus avancée d’intégrer un SVG dynamique, qui réagit selon les données. Dans le premier exemple, l’image SVG remplacera le logo DAZZM, dans le coin supérieur gauche de l’application. Dans le suivant, le composant HTML permettra au code SVG de réagir à la progression de l’utilisateur dans la complétion de ses informations de profil.
Pour intégrer un fichier SVG comme image statique, il suffit de le sélectionner via un composant Image. Dans cette étape, voyons comment remplacer le logo DAZZM, dans le coin supérieur gauche de l’application, par un autre fichier SVG. En layout mode, sélectionnez le composant image affichant le logo et, depuis l’onglet Attribute, effacez le fichier. Ensuite, sélectionnez votre nouveau fichier SVG.
Depuis l’onglet style, ajustez la largeur et la hauteur du composant image à 60 px chacune. Intégrer un SVG comme image est aussi simple que cela.
2. Créer un champ calculé pour suivre la complétion du profil
Pour utiliser tout le potentiel d’un SVG intégré, un composant HTML doit être utilisé, par opposition à un composant Image.
Dans cet exemple, la barre de progression SVG sera ajoutée à la page de profil utilisateur, pour suivre la progression de l’utilisateur dans la complétion de ses informations de profil.
Avant toute chose, créez donc un champ calculé, sous l’Aggregate User, qui calculera le pourcentage des champs du profil utilisateur qui ont été complétés. Dans cet exemple, le nom de ce champ est « profileCompletedAt » et il est de type text. Via le Property Panel, ajoutez ceci à la section Code :
let completion = 0;
if (data.firstName) {
completion+=25;
}
if (data.lastName) {
completion+=25;
}
if (data.email) {
completion+=25;
}
if (data.imageProfil) {
completion+=25;
}
returncompletion;
3. Afficher le pourcentage de complétion du profil à l’aide d’un composant Text
Pour ajouter un texte indiquant le % complété, glissez-déposez un composant text juste sous le titre de section et changez la valeur pour : Profile completed at {{value}} %. Ensuite, cliquez sur la balise value, en jaune, pour associer ici le champ calculé créé à l’étape précédente.
*Testez le champ calculé en passant en Live Mode et en ajoutant ou supprimant des informations au profil utilisateur.
4. Ajouter une barre de progression SVG dynamique pour visualiser la complétion du profil
Pour ajouter un élément visuel à la progression réalisée par l’utilisateur, copiez ce code SVG dans le champ value (JS) d’un composant HTML ajouté au-dessus du texte de l’étape précédente.
Voici le code de base du SVG utilisé dans cet exemple :
Ce code a été converti de HTML en Javascript. Entre les symboles backticks, on trouve le code HTML du SVG. Dans ce code, nous avons une interpolation. Pour que l’interpolation fonctionne, vous avez besoin du signe dollar, avec le chemin du champ entre les accolades { } pour récupérer la valeur du champ.
En intégrant des fichiers SVG dans votre application, vous pouvez améliorer à la fois les éléments visuels statiques et dynamiques de votre interface utilisateur. L’utilisation de composants image simples pour les affichages statiques, comme les logos, et de composants HTML plus avancés pour les visuels dynamiques pilotés par les données, comme les barres de progression, assure une expérience utilisateur flexible et interactive. Le processus étape par étape permet une mise en œuvre et une personnalisation faciles, que vous suiviez la progression de l’utilisateur ou gériez l’affichage conditionnel des données. L’intégration SVG offre des graphiques puissants et évolutifs qui peuvent s’adapter de manière transparente à différents besoins au sein de votre application, améliorant à la fois la fonctionnalité et l’engagement des utilisateurs.
