vendredi 24 août 2012

Enrichissez vos Google Sites avec Awesome Tables

7 commentaires
Je change un peu de sujet par rapport à d'habitude mais pas tant que ça au final. J'avais fait un précédent billet sur une des fonctionnalités de Google Apps Script qui permet de créer des tableaux de bord. J'avais même fait un test jamais publié pour voir ce que cela pouvez donner, exemple d'un tableau.
Cette fonctionnalité est très intéressante pour enrichir un google sites avec des tableaux et des graphiques dynamiques afin de présenter toutes sortes dinformations. L'inconvénient est que cela nécessite un peu de développement mais grâce à Awesome Tables on peut se simplifier énormément la vie si on veut créer un tableau.
MAJ : Modification du billet suite à une mise à jour d'Awesome Table. Suite à cette modification il faudra modifier le partage de la spreadsheet cf étape 3.On pourra aussi indiquer la feuille à prendre en compte mais si vous avez créé un fichier par gadget, c'est facultatif.

Présentation d'Awesome Tables
Awesome Tables est un gadget Google Sites développé par Romain qui officie en tant que Top Contributeur Google sur Google Apps Scripts.
Ce gadget permet de créer à partir d'une spreadsheet google un tableau dynamique filtrable. Les filtres sont générés automatiquement en fonction des informations saisies dans la spreadsheet, ils peuvent être de type liste déroulante ou zone de saisie. Pour les chiffres le gadget génère automatiquement un filtre sous forme de barre de sélection avec minimum et maximum (min & max).
Important
Pour le moment le gadget est en version 1 et la principale contrainte est que l'on ne peut spécifier la feuille de la spreadsheet que l'on veut utiliser comme source de données. Ce sera toujours la feuille en première position (carré vert ci dessous) qui sera utilisée dans le tableur.
# Cette limitation est finie, on peut maintenant préciser la feuille que l'on souhaite utiliser pour le gadget, par défaut ce sera toujours la première.
 Pour utiliser le gadget je vous recommande donc d'utiliser une spreadsheet spécifique pour chaque tableau que vous voulez faire. Maintenant on peut donc avoir un fichier avec plusieurs feuilles et les utiliser chacune dans différentes pages du site. Ce qui fait un fichier = un site, c'est plus propre.

Etapes pour créer votre tableau dynamique
1 - Créez une spreadsheet, et mettre dans la première feuille le tableau servant de source de données.
2 - Insérer une ligne sous la première ligne qui sert de titre aux colonnes.
Sous les éléments que vous voulez filtrer ajoutez StringFilter pour avoir une zone de saisie filtrable ou CategoryFilter pour avoir une liste filtrable de valeurs. Cf. capture d'écran ci-dessous :
Astuce : Pour mon besoin je ne voulais pas que l'arrondissement, qui est reconnu comme une valeur numérique, soit filtré automatiquement avec une barre min & max. En ajoutant CategoryFilter je peux forcer le filtrage.
Les colonnes 0.5h et 1h sur la droite sont des valeurs numériques donc ce seront des filtres min & max automatiquement. Il n'est pas possible pour le moment de demander qu'il n'y ait pas de filtres. Pour savoir si votre colonne contenant des chiffres sera bien interprétée comme une colonne avec des valeurs numériques, elle doit être alignée sur la droite automatiquement.
3 - Une fois le paramétrage fait il faut publier votre spreadsheet sur le web, obligatoire.
# Maintenant il faut partager la spreadsheet avec la fonction partager et non la publier. Il faut modifier le partage de la spreadsheet , partagez la spreadsheet en mode personnes disposant du lien. cf ce billet.

4 - Dans votre google sites, éditez ou créer une page pour ajouter le gadget. Dans le menu "Insérer" choisir "Autres gadgets".
5 - Choisir l'option "Ajouter un gadget à partir de son URL". L'url à utiliser est : http://hosting.gmodules.com/ig/gadgets/file/100852010860351994557/awesome-table.xml

6 - Paramétrez le gadget, je ne détaille pas car c'est très simple et tout est définit dans la fenêtre.
La key (identifiant) de votre spreadsheet est le paramètre qui se trouve après "key=" dans l'url.

https://docs.google.com/spreadsheet/ccc?key=IdentifiantDeLaSpreasheet#gid=0

7 - Vous n'avez plus qu'à enregistrer et valider la page pour que le tableau s'affiche.

Exemple
Voici un tableau produit avec Awesome Tables, le tableau se base sur des données open data de la mairie de Paris et permet de connaitre les prix des parkings souterrains sur paris.

Vidéo
Romain a fait une vidéo afin de voir le gadget en action.

7 Responses so far

  1. MERCI !!! J'ai trouvé votre blog sans vraiment chercher cet outil mais c'est de loin le meilleur gadget pour Google Sites que j'ai utilisé !! Et un grand merci à Romain qui semble être un véritable génie. Pour info, page où j'ai utilisé cet outil : http://www.methodesbtp.com/exagrue-web-v2#TOC-S-lection-des-crit-res

  2. st3ph says:

    Sympa la mise en application.

  3. Juste une question : est-il possible de capturer un évènement lors de la sélection d'un élément dans la liste filtrée ? J'aimerais générer un graphique qui corresponde à la courbe de capacités de la grue choisie, dont les données se trouveraient dans un Spreadsheet Google... Envisageable ou pas ?

  4. st3ph says:

    Oui cela est envisageable mais pas avec le gadget il faudrait passer par une google script app en réalisant un tableau de bord. C'est l'exemple que je prends dans mon premier paragraphe de ce billet.
    Cela est plus complexe par contre et sera du custom et non un gadget généraliste.

  5. Merci de m'avoir orienté, je me suis rendu dans le "playground" et je mesure mieux l'étendue des possibilités des scripts. Mais ça me parait tellement compliqué comme ça...! Je vais tenter de m'y mettre. Merci

  6. Anonyme says:

    Ce gadget est vraiment très intéressant et performant. Je m'en sers pour gérer un annuaire où l'on réduire la sélection selon les besoins. Le seul manque que je constate un lien pour pouvoir imprimer la sélection finale. Sinon c'est top!

  7. Anonyme says:

    Gone through the gadget, gadget doesn't show any record if columns range is more than 5.

Leave a Reply