Numeriblog Google Workspace AppSheet AppSheet : des indicateurs dynamiques pour suivre vos tâches

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). […]

personnes ont consulté cet article

5 minutes

Rédigé par Gilles HERRGOTT - il y a 2 semaines

Ce que vous allez découvrir

  • Création du modèle de données de notre application
  • Génération de l’application AppSheet
  • Création d’un indicateur d’avancement au format SVG
  • Intégrons tout cela dans AppSheet à présent
  • Ajout de la jauge sur les Tâches

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. 

AppSheet logo e tles indicateurs dynamiques

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.

Modèle de données de notre application de grestion de tâches
Modèle de données de notre application de gestion des tâches

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

Base de données AppSheet
Base de données AppSheet pour notre application

Table “Projets”

NameTypeAutres paramètresNotes
TitreText
Affecté àEmail
Date de livraisonDate
DescriptionLong Text
StatutEnumItem de type TextA faireEn CoursTerminé

Table “Tâches”

NameTypeAutres paramètresNotes
TâcheText
DescriptionLong Text
Affecté àEmail
StatutEnumItem de type TextA faireEn CoursTerminé
Date de débutDate
Date de finDate
Durée (j)Number
% AvancementPercentDisplay mode = Range
ProjetReferenceTable “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.
Génération de l'application AppSheet depuis la base de données
Génération de l’application AppSheet depuis la base de données
  1. 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.
Table Tâches AppSheet

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 : 

Jauge SVG à 50 %
Exemple d’une jauge SVG à 50 %

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>
  1. 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>
  1. 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.

Calconi calcul de cercle
Source : Calconi.com
  1. 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>
  1. 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 🙂 

Jauge à 50%
Le code de la jauge est disponible sur CodePen

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 :  
Ajout colonne virtuelle AppSheet jauge
Column name%Avancement
App formula=((COUNT(SELECT([Related Tâches][Tâche], [STATUT] = « Terminé »)) * 1.00)/COUNT([Related Tâches][Tâche]))
ShowNon coché
TypePercent
Numeric digits2
Show Thousands separatorCoché
Display modeAuto

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.

  1. 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 namesvgValue
App formula=((100-([%Avancement]*100))/100)*(3.1415926535897*(90*2))
ShowNon coché
TypePercent
Decimal digits0
Numeric digits2
Show Thousands separatorCoché
Display modeAuto

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).

  1. 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 namesvgColor
App formula=IF([%Avancement] <0.50, « #FF9F1E », « #97FB06 »)
ShowNon coché
TypeText
  1. Ajoutez une nouvelle colonne virtuelle nommée “svgPreview”, colonne qui contiendra le code de notre jauge au format SVG. Cliquez ensuite sur Save :
Column namesvgPreview
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> »)
ShowCoché
TypeImage

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.

AppSheet - Liste de projets avec l'état d'avancement
Liste des projets avec la jauge d’état 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 : 

Etat d’avancement d’un projet avec notre jauge sur chacune des tâches du projet

Conclusion

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

Paramètres affinés AppSheet
Application de gestion des tâches d’un projet avec jauge d’avancement dynamique

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 ? 

Besoin d'un peu plus d'aide sur App Sheet ?

Des formateurs sont disponibles toute l'année pour vous accompagner et optimiser votre utilisation de App Sheet, que ce soit pour votre entreprise ou pour vos besoins personnels !

Découvrir nos formations App Sheet

Rédacteur

S’abonner
Notification pour
0 Commentaires
Commentaires en ligne
Afficher tous les commentaires