AppSheet : des indicateurs dynamiques pour suivre vos tâches

Suite de notre exploration de l’utilisation des images au format SVG dans AppSheet avec cette fois-ci, un exemple plus avancé que notre simple rectangle bleu (voir l’article AppSheet – Des images dynamiques dans vos applications). Nous allons voir ensemble comment ajouter un indicateur d’avancement d’un projet, d’une tâche, dans notre vue AppSheet, avec en prime, une petite animation pour rendre tout cela encore plus visuel. 

Prêt(e) ? En avant alors ! 🙂

Création du modèle de données de notre application

Je ne vais pas détailler toutes les étapes pour créer le modèle de données de notre application, si besoin, vous pouvez suivre cet article AppSheet : exporter des données vers un fichier CSV qui explique cela de manière détaillée. 

Nous allons créer une base de données AppSheet nommée “Projets” avec deux tables : 

• la table Projets qui contiendra les éléments très succincts de description d’un projet,
• la table Tâches qui contiendra les tâches liées à un projet donné.

Notre modèle de données est le suivant (vous pouvez le retrouver ici si besoin) : 

Note : je vous suggère à ce propos draw.io comme application de modélisation pour vos diagrammes.

La modélisation de ce schéma dans AppSheet Databases est présentée ci-dessous : 

Table “Projets”

Name	Type	Autres paramètres	Notes
Titre	Text
Affecté à	Email
Date de livraison	Date
Description	Long Text
Statut	Enum	Item de type TextA faireEn CoursTerminé

Table “Tâches”

Name	Type	Autres paramètres	Notes
Tâche	Text
Description	Long Text
Affecté à	Email
Statut	Enum	Item de type TextA faireEn CoursTerminé
Date de début	Date
Date de fin	Date
Durée (j)	Number
% Avancement	Percent	Display mode = Range
Projet	Reference	Table “Projets”

Génération de l’application AppSheet

1. Une fois la création de la base de données faite dans AppSheet, générez l’application correspondante. Pour rappel, c’est via le bouton Apps puis New AppSheet app.

2. Depuis l’onglet Data, ajoutez la table Tâches :
   • cliquez sur le bouton + Add new data (1) ;
   • sélectionnez ensuite la source de données AppSheet Databases (2) ;
   • sélectionnez la base précédemment créée nommée Projets (3) ;
   • cliquez sur Add to app (4), les tables manquantes étant sélectionnées.

Notre application simple de gestion de projets et des tâches associées est créée. Créez un premier projet avec un statut “En Cours” puis créez quelques tâches associées à ce projet avec différents états d’avancement (“A faire”, “En cours”, Terminé”) et différents pourcentages d’avancement (15 %, 25 %, 75 %, 100 % en fonction du statut précédemment choisi).

Création d’un indicateur d’avancement au format SVG

Aujourd’hui, nous allons voir comment créer quelque chose d’un peu plus complexe qu’un simple rectangle bleu avec le format SVG. Nous allons créer une jauge circulaire qui se remplit en fonction d’un pourcentage, pourcentage affiché au centre de la jauge. Voilà ce que nous allons réaliser ensemble : 

Voyons ensemble pas à pas comment créer cette jauge. L’idée ici n’est pas de refaire un cours complet sur la création d’une jauge au format SVG, mais de vous donner les clés de compréhension de ce que nous faisons, ce qui sera important pour la suite des opérations.

Vous pouvez construire l’image SVG dans CodePen pour tester les différentes étapes.

Le code ajouté à chaque étape apparaît en orange.

1. Créez la base de votre image SVG, ici, une image au format 200 x 200 pixels.

<svg width="200" height="200" version=1.1" xmlns=http://www.w3.org/2000/svg">
</svg>

2. Ajoutez un premier cercle, ce sera le cercle gris visible derrière lorsque la jauge n’est pas à 100 % remplie : 

• c’est un cercle : circle ;
• d’un rayon de 90 pixels : r=”90” ;
• dont le centre est positionné au centre de notre carré de 200 x 200 pixels : cx=”50%” cy=”50%” ;
• de fond transparent : fill=”transparent” ;
• rempli complètement : stroke-dashoffset=”0” ;
• rempli de la couleur grise : stroke=”#666”.

<svg width="200" height="200" version=1.1" xmlns=http://www.w3.org/2000/svg">
    <!-- Cercle gris -->
  <circle r="90" cx="50%" cy="50%" fill="transparent" stroke-width="1em" stroke-dasharray="565.49" stroke-dashoffset="0" stroke="#666"/>
</svg>

3. Ajoutez le cercle de couleur qui sera rempli en fonction d’une valeur : 

• c’est un cercle : circle ;
• d’un rayon de 90 pixels : r=”90” ;
• dont le centre est positionné au centre de notre carré de 200 x 200 pixels : cx=”50%” cy=”50%” ;
• de fond transparent : fill=”transparent” ;
• d’un trait d’une épaisseur de 1em : stroke-width= »1em » ;
• rempli à moitié : stroke-dashoffset=”565.49” stroke-dashoffset=”282.74” ;
• rempli de la couleur orange : stroke=”#FF9F1E”.

<svg width="200" height="200" version=1.1" xmlns=http://www.w3.org/2000/svg">
    <!-- Cercle gris -->
  <circle r="90" cx="50%" cy="50%" fill="transparent" stroke-width="1em" stroke-dasharray="565.49" stroke-dashoffset="0" stroke="#666"/>
 <!-- Cercle de couleur rempli en fonction du %-->
  <circle r="90" cx="50%" cy="50%" fill="transparent" stroke-width="1em" stroke-dasharray="565.48" stroke-dashoffset="282.74" stroke="#FF9F1E"/>
</svg>

Ok, mais pourquoi une valeur à 565.48 pour stroke-dasharray ? Bon, là on entre dans un peu de mathématiques. Direction Calconi pour quelques rappels. La circonférence d’un cercle est calculée via la formule suivante : 𝝿 x (rayon x 2), pour nous ici : 𝝿 x (90 x 2) = 565,49. Pour remplir à moitié le cercle de couleur orange, nous positionnons l’attribut stroke-dashoffset à la moitié de cette valeur soit environ 282.74.

4. Ajoutez le texte au centre du cercle pour donner l’indication de la valeur en pourcentage : 

• c’est un text : text
• dont le centre est positionné au centre de notre carré de 200 x 200 pixels, avec une police de taille 45 et de couleur orange : x=”50%” y=”50%” text-anchor=”middle” dominant-baseline=”central” font-size=”45” color=”#FF9F1E”

<svg width="200" height="200" version=1.1" xmlns=http://www.w3.org/2000/svg">
    <!-- Cercle gris -->
  <circle r="90" cx="50%" cy="50%" fill="transparent" stroke-width="1em" stroke-dasharray="565.48" stroke-dashoffset="0" stroke="#666"/>
    <!-- Cercle de couleur rempli en fonction du %-->
  <circle r="90" cx="50%" cy="50%" fill="transparent" stroke-width="1em" stroke-dasharray="565.48" stroke-dashoffset="282.74" stroke="#FF9F1E"/>
    <!-- Texte affiché au centre de la jauge -->
  <text x="50%" y="50%" text-anchor="middle" dominant-baseline="central" font-size="45" color="#FF9F1E">50%</text>
</svg>

5. Il nous reste à ajouter une petite animation pour rendre tout cela plus dynamique. Ajoutez l’animation suivante au cercle de couleur (le cercle orange) : 

• c’est une animation : animate
• effectuée sur le taux de remplissage de notre cercle : attributeName= »stroke-dashoffset »
• Partant de la valeur vide : from= »565.49″
• vers la valeur pleine : to= »500« 
• avec une animation d’une durée de 2 secondes : dur= »2s »
• répétée une seule fois : repeatCount= »1″

<svg width="200" height="200" version=1.1" xmlns=http://www.w3.org/2000/svg">
    <!-- Cercle gris -->
  <circle r="90" cx="50%" cy="50%" fill="transparent" stroke-width="1em" stroke-dasharray="565.48" stroke-dashoffset="0" stroke="#666"/>
    <!-- Cercle de couleur rempli en fonction du %-->
  <circle r="90" cx="50%" cy="50%" fill="transparent" stroke-width="1em" stroke-dasharray="565.48" stroke-dashoffset="282.74" stroke="#FF9F1E">
    <!-- Animation du cercle de couleur-->
    <animate 
      attributeName="stroke-dashoffset"
      from="565.49"
      to="500"
      dur="2s"
      repeatCount="1">
    </animate>
  </circle>
    <!-- Texte affiché au centre de la jauge -->
  <text x="50%" y="50%" text-anchor="middle" dominant-baseline="central" font-size="45" color="#FF9F1E">50%</text>
</svg>

Le rendu final de votre jauge doit être le suivant. Félicitations !!! Votre jauge est prête 🙂 

Intégrons tout cela dans AppSheet à présent

Ajout de la jauge sur les projets

Retour dans votre application AppSheet créée précédemment. Depuis l’onglet Data, sur la table Projets : 

1. Ajoutez une nouvelle colonne virtuelle nommée “%Avancement”, colonne qui contiendra le pourcentage d’avancement du projet en se basant sur le nombre de tâches terminées :  

Column name	%Avancement
App formula	=((COUNT(SELECT([Related Tâches][Tâche], [STATUT] = « Terminé »)) * 1.00)/COUNT([Related Tâches][Tâche]))
Show	Non coché
Type	Percent
Numeric digits	2
Show Thousands separator	Coché
Display mode	Auto

Pour la formule, rien de spécial. Nous calculons le nombre de tâches du projet dont le statut de la tâche est ‘“Terminé”, nombre que nous divisons par le nombre de tâches contenues dans le projet pour obtenir un pourcentage d’avancement.

Note : Le “* 1.00” permet de préciser à AppSheet que nous souhaitons obtenir un résultat au format décimal. AppSheet considère sinon le résultat comme étant un entier, et vu que nous calculons des pourcentages, le résultat serait toujours à zéro.

2. Ajoutez une nouvelle colonne virtuelle nommée “svgValue”, colonne qui contiendra la formule mathématique pour calculer la circonférence du cercle pour le remplissage de la jauge. Cliquez ensuite sur Save : 

Column name	svgValue
App formula	=((100-([%Avancement]*100))/100)*(3.1415926535897*(90*2))
Show	Non coché
Type	Percent
Decimal digits	0
Numeric digits	2
Show Thousands separator	Coché
Display mode	Auto

Pour la formule, nous reprenons notre formule mathématique pour calculer la circonférence du cercle. Le remplissage du cercle se faisant à l’envers (0 = plein; 565,49 = vide), nous soustrayons à 100 le pourcentage d’avancement du projet. Le reste du calcul ne change pas, 𝝿 x (90 x 2).

3. Ajoutez une nouvelle colonne virtuelle nommée “svgColor”, colonne qui contiendra la couleur de la jauge en fonction du pourcentage d’avancement du projet. Cliquez ensuite sur Save : 

Column name	svgColor
App formula	=IF([%Avancement] <0.50, « #FF9F1E », « #97FB06 »)
Show	Non coché
Type	Text

4. Ajoutez une nouvelle colonne virtuelle nommée “svgPreview”, colonne qui contiendra le code de notre jauge au format SVG. Cliquez ensuite sur Save :

Column name	svgPreview
App formula	=CONCATENATE(« data:image/svg+xml;utf8, <svg width= » »200″ » height= » »200″ » viewPort= » »0 0 100 100″ » version= » »1.1″ » xmlns= » »http://www.w3.org/2000/svg » »><circle r= » »90″ » cx= » »50% » » cy= » »50% » » fill= » »transparent » » stroke-width= » »1em » » stroke-dasharray= » »565.48″ » stroke-dashoffset= » »0″ » stroke= » » »,encodeurl(« #666″), » » »/><circle r= » »90″ » cx= » »50% » » cy= » »50% » » fill= » »transparent » » stroke-width= » »1em » » stroke-dasharray= » »565.48″ » stroke-dashoffset= » » »,[svgValue], » » » stroke= » » »,encodeurl([svgColor]), » » »>    <animate     attributeName= » »stroke-dashoffset » »    from= » »565.48″ »    to= » » »,[svgValue], » » »    dur= » »2s » »    repeatCount= » »1″ »></animate></circle><text x= » »50% » » y= » »50% » » text-anchor= » »middle » » dominant-baseline= » »central » » font-size= » »45″ » color= » » »,encodeurl([svgColor]), » » »> »,([%Avancement]*100), »%</text></svg> »)
Show	Coché
Type	Image

Quelques explications sur la formule de ce champ : 

• nous reprenons le code de notre jauge SVG créé précédemment mais nous y intégrons les champs de notre table “Projets” pour rendre l’image dynamique en fonction du pourcentage d’avancement de notre projet,
• CONCATENATE nous permet justement de concaténer le texte de notre image SVG avec les champs de notre table “Projets”,
• les doubles guillemets sont toujours présents pour délimiter une chaîne de caractères dans une chaîne de caractères. Petite particularité supplémentaire ici, il y a trois guillemets dans certains, deux pour clore la chaîne de caractères de l’attribut et un troisième pour clore la chaîne de caractères globale,
  • stroke-dashoffset=”””,[svgValue],””” …,
  • ”” permet d’insérer la chaîne de caractères pour la valeur de l’attribut stroke-dashoffset,
  • ” permet de clore la chaîne de caractères principale,
• les champs utilisés sont ceux précédemment créés :
  • “svgValue” pour le remplissage de la jauge en se basant sur notre formule mathématique,
  • “svgColor” pour utiliser la couleur orange ou verte en fonction de l’état d’avancement de notre projet,
  • “%Avancement” pour insérer dans l’image le pourcentage d’avancement du projet au format texte.

A ce stade, vous devriez voir la liste des projets avec notre jauge d’état d’avancement comme ci-dessous. La jauge doit s’animer lors de la première ouverture de l’écran ou suite à une modification du pourcentage d’avancement.

Ajout de la jauge sur les Tâches

En appliquant le même principe sur la table “Tâches”, nous obtenons une vue détaillée de l’état d’avancement d’un projet : 

Conclusion

Voilà une petite image animée pour vous montrer le résultat final une fois le paramétrage des vues affiné : 

L’utilisation d’images au format SVG au sein d’AppSheet, combinés à des champs de données, permet d’améliorer encore davantage l’ergonomie des applications développées en y ajoutant des indications visuelles et animées.

Les possibilités sont sans fin et nous allons en explorer toutes les possibilités au sein de Numericoach. Peut-être pour votre future application ?