AppSheet : des images dynamiques dans vos applications

AppSheet, c’est une plateforme vraiment extraordinaire qui permet de concevoir des applications web et mobiles très rapidement et très efficacement, et qui évolue sans cesse (intégration de AppSheet Databases dernièrement par exemple en deux parties : la première et la seconde).

Les applications créées suivent toutes la même logique en termes de présentation, ce qui est un avantage ergonomique pour les utilisateurs et leur montée en compétences sur les solutions ainsi produites. Il y a la personnalisation qui permet de modifier quelque peu les couleurs, le logo de l’application, son fond et les icônes.

Aujourd’hui, nous allons vous accompagner pour intégrer dans vos applications quelques images dynamiques et ceci, grâce au format d’image SVG.

Des images au format SVG, c’est quoi ?

Une image au format SVG (Scalable Vector Graphics ou graphiques vectoriels adaptables) contient des instructions au format texte permettant de décrire des graphiques vectoriels en deux dimensions. L’avantage de ce format, standardisé de façon ouverte pour le Web en 1999, est qu’il peut afficher les images décrites à n’importe quelle taille, sans perte de qualité, contrairement aux images matricielles classiques comme les formats JPEG ou PNG.

Un petit exemple ? En avant !

Le code ci-dessous dessine tout simplement un rectangle de 100 pixels de large par 50 pixels de haut, avec un fond bleu. Le code est testable sur CodePen.

<svg>

  <rect width="100px" height="50px" fill="blue"/>

</svg>

Le format SVG dispose d’une multitude d’instructions pour décrire des rectangles, cercles, ellipses, etc. mais aussi comment les animer, et c’est cet ensemble, appelé “description de formes et animation”, qui va nous intéresser dans AppSheet pour dynamiser nos écrans.

Je vous laisse découvrir tous les possibilités du format SVG avec le site Developer Mozilla.

Des images SVG dans AppSheet, c’est possible ?

Oui, complètement et nous allons tirer parti de cet avantage. Décrivons d’abord la manière d’intégrer de telles images dans AppSheet.

L’intégration d’une image dans AppSheet se fait au travers du type de colonne Image qui peut contenir : 

• un lien pointant vers une image stockée sur Internet ou le Cloud (URL Value), comme par exemple sur Facebook, Google Drive, Dropbox ;
• un lien vers une image stockée au sein même de l’application AppSheet (dans le répertoire /appsheet/data/MyApp par exemple),

Ce qui est moins documenté, c’est qu’il est aussi possible de stocker une image au format texte dans une colonne de type Image.

Une première application de tests

Faisons un test simple ensemble : 

1. Créez une nouvelle application AppSheet (Menu “+ Create” / App / Blank App), nommez votre nouvelle application “Test SVG” et sélectionnez la catégorie Other.

Dans cette nouvelle application, AppSheet a créé par défaut une table nommée “Table 1” et stockée au format AppSheet Databases (pour plus de précisions, voir les articles en deux parties : Présentation de AppSheet Databases et sa suite).

2. Ouvrez la description de la “Table 1” pour lister les colonnes de cette table.

3. Ajoutez une nouvelle colonne virtuelle avec le paramétrage suivant : 

Column Name	preview
App formula	« data:image/svg+xml;utf8, <svg width= » »100″ » height= » »50″ » version= » »1.1″ » xmlns= » »http://www.w3.org/2000/svg » »>  <rect width= » »100px » » height= » »50px » » fill= » »blue » »/></svg> »
Show ?	Coché
Type	Image

(Laissez les autres paramètres tels quels et n’oubliez surtout pas le type Image de votre colonne, sinon, un simple texte sera affiché à la place de l’image)

Revoyons ensemble le champ App formula :

"data:image/svg+xml;utf8, <svg width=""100"" height=""50"" version=""1.1"" xmlns=""http://www.w3.org/2000/svg"">

  <rect width=""100px"" height=""50px"" fill=""blue""/>

</svg>"

• data:image/svg+xml;utf8, : attention, la virgule derrière “utf8” est importante. Ce paramétrage permet de préciser à AppSheet que le contenu du texte est une image au format svg ;
• <svg width= » »100″ » height= » »50″ » version= » »1.1″ » xmlns= » »http://www.w3.org/2000/svg » »> : la balise svg précise le début d’une image au format svg, width et height précisent la largeur et la hauteur de l’image, version permet de spécifier la version de la spécification svg. Notez les double guillemets nécessaires pour inclure une chaîne de caractères dans la chaîne de caractères de la formule. Effectivement dans AppSheet, lorsque vous avez besoin d’utiliser des guillemets dans une chaîne de caractères, il faut tout simplement les doubler ;
• <rect width= » »100px » » height= » »50px » » fill= » »blue » »/> : c’est notre exemple d’image SVG, un simple rectangle de 100 pixels de large sur 50 pixels de haut, de couleur bleu ;
• </svg> : cette balise finalise la déclaration d’une image au format svg.

Sauvegardez l’application et visualisez le résultat comme ci-dessous. Notre rectangle bleu apparaît bien dans la vue table de la “Table 1” et dans le formulaire détaillé.

Conclusion

Les images au format SVG offrent de multiples possibilités dans AppSheet et permettent d’ajouter une personnalisation et une ergonomie supplémentaire dans les différentes vues de notre application.

Nous avons commencé avec un exemple très simple et l’intégration d’une image au format SVG dans une colonne virtuelle. Dans un prochain article, nous allons voir comment intégrer les champs de notre table pour rendre dynamique notre image. Ce sera l’occasion de créer une petite application de suivi des tâches d’un projet en y ajoutant des indicateurs graphiques de l’état d’avancement du projet.

Chez Numericoach, nous disposons de toutes les compétences pour rendre vos applications plus attrayantes. Entre graphistes, experts pédagogiques, concepteurs, développeurs, etc. Votre application sera entre de bonnes mains. N’hésitez pas à nous contacter !

Une seconde partie consacrée aux images dynamiques sur AppSheet est disponible sur Numeriblog. A bientôt !