Créer un tableau de bord de suivi Google sheet avec les données de votre espace de travail
Mis à jour le
Cet article décrit la méthode pour créer un tableau de bord visuel à partir des données d'une table TimeTonic, en utilisant Google Sheets comme moteur de calcul et de visualisation. À chaque création ou modification d'une ligne dans TimeTonic, les données sont synchronisées automatiquement vers Google Sheets via un webhook.
Prérequis : être propriétaire ou administrateur du book TimeTonic, disposer d'un compte Google pour créer le Sheet et autoriser l'exécution d'un script Apps Script.
⚠️ Respect du RGPD et confidentialité des données. Cette méthode est adaptée aux données opérationnelles non sensibles. Avant toute configuration, identifiez ce qui peut sortir vers Google Sheets et ce qui doit rester dans TimeTonic.
✅ Peut sortir vers Google Sheets❌ Doit rester dans TimeTonic
Le système repose sur trois briques connectées. Chaque mise à jour côté TimeTonic est répercutée automatiquement vers Google Sheets, qui calcule les statistiques et génère les graphiques affichés dans votre dashboard.
1
TimeTonic envoie les données
Un scénario d'automatisation déclenche un webhook à chaque création ou modification d'une ligne dans votre table.
2
Google Sheets reçoit et traite
Un script Apps Script réceptionne les données et les inscrit dans un onglet dédié. Les autres onglets calculent les statistiques et affichent les graphiques.
3
TimeTonic affiche le dashboard
Une Smart Page intègre le tableau de bord publié, accessible à votre équipe sans quitter l'espace de travail.
Côté TimeTonic : créer le scénario d'automatisation
Dans votre table TimeTonic, accédez à Automate et créez un nouveau scénario d'automatisation. Suivez ces quatre étapes pour le configurer.
1
Choisir le déclencheur
Sélectionnez When a record view is saved pour capter aussi bien la création que les modifications ultérieures d'une ligne.
2
Laisser les conditions vides
Vous synchronisez toutes les lignes. La logique du script évite les doublons automatiquement.
3
Ajouter l'action Call Webhook
Méthode POST, aucun type d'authentification, data structure JSON List. Les propriétés à renseigner sont détaillées dans la section suivante.
4
Renseigner l'URL provisoirement
Insérez une URL provisoire. Elle sera remplacée par l'URL générée par Apps Script lors du déploiement.
Le payload JSON attendu par le script
Point critique à comprendre. Les noms de propriétés envoyés par TimeTonic doivent correspondre exactement à ceux que le code Apps Script attend. Si vous écrivez par exemple "Date intervention" côté TimeTonic alors que le script attend "date", aucune donnée ne sera écrite dans votre Sheet.
Voici les 9 propriétés attendues par le script de référence proposé dans cet article. Dans l'action Call Webhook de votre automatisation TimeTonic, ajoutez chaque propriété avec son nom exact (colonne de gauche) et mappez-la au champ correspondant de votre table (colonne de droite).
Property name (à coller dans TimeTonic)Champ TimeTonic à mapper
intervention_numIdentifiant unique de la ligne (clé pour éviter les doublons)
dateDate de la ligne (format DD/MM/YYYY ou YYYY-MM-DD)
titleIntitulé court de l'élément
typeCatégorie ou type
statusStatut courant
customerRéférence client (idéalement un code, pas un nom)
siteLieu ou zone géographique
technicianIdentifiant du responsable (idéalement un login, pas un nom)
total_hoursDurée ou valeur numérique à sommer
💡 Astuce : les noms de propriétés sont libres pour vous (vous pourriez les nommer "ma_date" et "mon_id"), mais ils doivent impérativement correspondre à ceux du script. Pour le tutoriel, gardez ces 9 noms tels quels. Si vous souhaitez les adapter à votre vocabulaire métier, voir l'encart "Adapter le tuto à votre cas d'usage" plus bas.
Côté Google Sheets : structurer votre fichier en trois onglets
Créez un Google Sheet et organisez-le en trois onglets distincts. Chacun joue un rôle précis dans la chaîne de traitement des données.
Onglet 1 : Raw Data
Reçoit les lignes envoyées par TimeTonic via le webhook. Chaque colonne correspond à un champ de votre table. Cet onglet est la source de toutes les statistiques.
Onglet 2 : Stats
Contient les tableaux de calcul utilisant des formules SUMIF et COUNTIF qui lisent dans Raw Data. C'est le moteur de votre dashboard : tout se calcule ici.
Onglet 3 : Dashboard
Accueille les graphiques construits à partir des tableaux de Stats. C'est l'onglet que vous publierez et qui sera affiché dans votre Smart Page TimeTonic.
Installer le script Apps Script
Le script Apps Script joue le rôle de réceptionniste entre TimeTonic et Google Sheets. Il reçoit les données envoyées par le webhook et les inscrit dans l'onglet Raw Data, en évitant les doublons grâce à une logique de mise à jour.
Adapter le tuto à votre cas d'usage.
Si votre table ne contient pas d'interventions techniques mais d'autres données (demandes, projets, tickets, dossiers...), vous pouvez personnaliser. Mais attention : trois zones doivent évoluer en parallèle et rester cohérentes :
1. Les noms de propriétés envoyés par votre automatisation TimeTonic (action Call Webhook)
2. Les références à ces propriétés dans la fonction doPost du script Apps Script (lignes payload.intervention_num, payload.date, etc.)
3. Les formules et graphiques des onglets Stats et Dashboard, qui doivent pointer vers vos propres dimensions métier
Si les trois zones ne sont pas alignées, aucune donnée ne s'écrira dans le Sheet. En cas de doute, gardez le tuto tel quel pour valider le mécanisme avant de personnaliser.
Vous n'êtes pas développeur ? Voir la section suivante "Faire adapter le script à votre cas d'usage par une IA" : une méthode guidée pour déléguer l'adaptation à une IA de conversation, sans écrire de code.
1
Ouvrir Apps Script
Dans votre Google Sheet, allez dans Extensions → Apps Script. Une nouvelle fenêtre s'ouvre.
2
Coller le script et configurer l'identifiant
Supprimez le code par défaut, collez le script fourni plus bas, puis remplacez la variable SPREADSHEET_ID par l'identifiant de votre Sheet (visible dans l'URL entre /d/ et /edit).
3
Enregistrer le projet
Cliquez sur l'icône disquette (Ctrl+S) pour enregistrer. Ne déployez pas tout de suite : passez d'abord par les tests obligatoires de la section suivante.
Faire adapter le script à votre cas d'usage par une IA
Cette section s'adresse à vous si : vous n'êtes pas développeur, vous ne modifiez pas de code JavaScript au quotidien, et vous devez adapter le script à votre propre table TimeTonic (noms de propriétés différents, champs métier spécifiques, colonnes de Sheet personnalisées).
La méthode la plus rapide et fiable est de déléguer cette adaptation à une IA de conversation (votre IA préférée). Voici la marche à suivre.
Objectif : obtenir un script adapté à votre configuration webhook TimeTonic et à la structure de votre Google Sheet, sans devoir écrire une ligne de code.
1
Rassembler 3 éléments à donner à l'IA
Pour que l'IA puisse produire un script qui fonctionne pour vous, elle a besoin de trois informations : la configuration de votre action Call Webhook côté TimeTonic (les Property name et les champs mappés), la structure de votre onglet Raw Data (nom des colonnes A à N), et le script de référence fourni plus bas dans cet article.
2
Ouvrir votre IA préférée
Ouvrez une nouvelle conversation dans l'outil de conversation par IA que vous utilisez habituellement.
3
Coller le prompt de votre choix
Deux prompts sont fournis ci-dessous : un prompt court pour aller vite, un prompt détaillé pour mieux comprendre ce que vous demandez et ajuster à votre besoin. Choisissez celui qui vous convient et complétez les 3 blocs entre crochets avec vos éléments.
4
Récupérer le script adapté et l'installer
Copiez le script généré par l'IA, collez-le dans votre éditeur Apps Script en remplacement du script précédent, enregistrez, puis passez à la section suivante pour le tester avant de déployer.
Prompt court (à copier en un clic)
Rapide et direct. Copiez, complétez les 3 zones entre crochets, envoyez.
Adapte ce script Apps Script à ma configuration webhook TimeTonic pour qu'il puisse recevoir mes données et les inscrire dans mon Google Sheet.
CONFIG DE MON ACTION CALL WEBHOOK TIMETONIC (Property name → champ mappé) :
[COLLER ICI VOTRE CONFIG WEBHOOK]
COLONNES DE MON ONGLET RAW DATA (A à N) :
[COLLER ICI LA LISTE DE VOS EN-TÊTES DE COLONNES]
SCRIPT DE RÉFÉRENCE À ADAPTER :
[COLLER ICI LE SCRIPT COMPLET FOURNI DANS LE TUTO]
Contraintes à respecter :
- Garder la logique UPSERT (une ligne par identifiant unique, mise à jour si existe, création sinon)
- Gérer les noms de propriétés avec espaces, accents ou apostrophes via la syntaxe payload["Nom exact"]
- Recalculer année et mois automatiquement à partir du champ date
- Garder les deux fonctions de test testInsertNew et testUpdate avec des données fictives adaptées à mon cas
- Ajouter des console.log dans doPost pour faciliter le debug via le Journal d'exécution
Génère-moi le script complet, prêt à copier-coller dans Apps Script.
Prompt détaillé (pour ceux qui veulent comprendre)
Plus verbeux, il explique à l'IA le contexte complet du tuto et détaille chaque contrainte. Utile si vous voulez ajuster finement, ou si votre cas d'usage est particulier.
Contexte : je suis un utilisateur no-code de TimeTonic. Je souhaite créer un dashboard Google Sheets alimenté par les données d'une de mes tables TimeTonic via un webhook. Un tutoriel officiel me fournit un script Apps Script de référence, mais ce script est écrit pour un cas d'usage précis (interventions techniques) et je dois l'adapter à mon propre cas d'usage.
CE QUE JE TE FOURNIS
1. Ma configuration Call Webhook côté TimeTonic (chaque ligne indique la Property name que j'ai définie et le champ de ma table auquel je l'ai mappée) :
[COLLER ICI VOTRE CONFIG WEBHOOK]
2. La structure de mon onglet Raw Data dans Google Sheets (les noms de mes colonnes de A à N, dans l'ordre) :
[COLLER ICI LA LISTE DE VOS EN-TÊTES DE COLONNES]
3. Le script Apps Script de référence fourni par le tuto TimeTonic :
[COLLER ICI LE SCRIPT COMPLET FOURNI DANS LE TUTO]
CE QUE JE TE DEMANDE
- Adapter la fonction doPost pour qu'elle lise les noms de propriétés EXACTS que j'ai configurés dans mon webhook. Attention : mes noms peuvent contenir des espaces, des accents, des apostrophes ou des points d'interrogation. Utilise la syntaxe payload["Nom exact"] pour y accéder, pas la syntaxe payload.nom.
- Adapter la construction de la ligne (rowValues) pour qu'elle corresponde exactement à l'ordre de mes colonnes de A à N dans mon onglet Raw Data.
- Conserver la logique UPSERT (une ligne unique par identifiant, mise à jour si elle existe, création sinon). Indique-moi clairement quelle propriété de mon webhook doit servir de clé unique pour cet UPSERT.
- Recalculer automatiquement l'année et le mois à partir de mon champ date, plutôt que de dépendre de propriétés séparées côté webhook.
- Générer les clés concaténées nécessaires aux formules de l'onglet Stats, en te basant sur les dimensions métier pertinentes de mon cas (par exemple statut, canal, catégorie, etc.).
- Fournir deux fonctions de test testInsertNew et testUpdate avec des données fictives cohérentes avec mon cas d'usage (aucune donnée nominative réelle).
- Ajouter des console.log au début de la fonction doPost pour que je puisse déboguer facilement en lisant le Journal d'exécution Apps Script.
Génère-moi le script complet, prêt à copier-coller dans mon éditeur Apps Script. Explique-moi brièvement les points où j'ai un choix à faire (notamment le choix de la clé unique pour l'UPSERT).
⚠️ Attention aux données sensibles avant de partager avec une IA.
Les noms de vos champs et la structure de votre Sheet peuvent être partagés sans risque. En revanche, si vos captures ou vos exemples contiennent des valeurs réelles (noms de bénéficiaires, numéros de dossiers identifiants, adresses, etc.), anonymisez-les avant de les coller. Remplacez les vraies valeurs par des exemples fictifs équivalents (Nom1, Client X, D2026-TEST-001...). Cette précaution vaut pour toutes les données personnelles ou confidentielles couvertes par le RGPD.
Tester le script avant de déployer
⚠️ Étape à ne pas sauter. Les tests intégrés au script permettent de vérifier que tout fonctionne avant de déployer et de configurer le webhook côté TimeTonic. Sans ces tests, un éventuel problème ne se révélerait qu'au moment où TimeTonic enverra ses premières données réelles, sans message d'erreur explicite côté TimeTonic.
Le script contient deux fonctions de test : testInsertNew (simule l'arrivée d'une nouvelle ligne) et testUpdate (simule la mise à jour d'une ligne existante).
1
Sélectionner la fonction testInsertNew
Dans la barre d'outils de l'éditeur Apps Script, à côté du bouton Exécuter, ouvrez le menu déroulant et choisissez testInsertNew.
2
Cliquer sur Exécuter
Au premier lancement, Google demande une autorisation d'accès. Acceptez. Vérifiez ensuite le Journal d'exécution (en bas de l'éditeur) : un message contenant "status":"ok" indique que le test a réussi. Ouvrez votre Sheet : une ligne de test doit apparaître dans l'onglet Raw Data.
3
Lancer testUpdate
Sélectionnez maintenant testUpdate dans le menu déroulant, puis Exécuter. La ligne de test précédente doit être mise à jour (pas dupliquée). C'est la preuve que la logique d'unicité fonctionne.
4
Déployer en application web
Tests validés. Cliquez sur Déployer → Nouveau déploiement → Application web. Exécuter en tant que : Moi. Qui a accès : Tout le monde. Acceptez l'autorisation Google.
Google génère ensuite une URL qui se termine par /exec. Copiez-la et collez-la dans le champ URL de l'action Call Webhook de votre scénario TimeTonic, en remplacement de l'URL provisoire renseignée à l'étape 4 de la section TimeTonic.
💡 À noter sur les déclencheurs : aucun déclencheur Apps Script n'est à configurer manuellement. La fonction doPost du script s'exécute automatiquement à chaque appel sur l'URL /exec du déploiement, c'est TimeTonic qui déclenche tout via le webhook. Le menu déroulant de la barre d'outils sert uniquement aux tests manuels.
Construire les tableaux de calcul dans l'onglet Stats
Dans l'onglet Stats, créez des zones de calcul à l'aide de deux fonctions simples qui lisent les données depuis Raw Data : SUMIF et COUNTIF.
SUMIF additionne une valeur en filtrant sur un critère :
COUNTIF compte le nombre d'occurrences d'une valeur dans une colonne :
=COUNTIF(plage_de_critère ; valeur_recherchée)
💡 Astuce : plutôt que d'écrire la valeur en dur dans chaque formule, listez vos critères dans une colonne et référencez la cellule. Vous écrivez la formule une seule fois, puis double-cliquez sur le carré bleu en bas à droite pour la dupliquer automatiquement sur toutes les lignes.
Construire les graphiques dans l'onglet Dashboard
Pour chaque tableau de calcul créé dans l'onglet Stats, générez un graphique en suivant ces quatre étapes.
1
Sélectionner le tableau
Dans l'onglet Stats, sélectionnez la plage de cellules correspondant à votre tableau de calcul.
2
Insérer le graphique
Menu Insertion → Graphique. Google Sheets propose automatiquement un type adapté que vous pouvez modifier : barres, courbes, anneau ou secteurs.
3
Personnaliser l'apparence
Modifiez le titre, les couleurs, la légende et le type de graphique via le panneau de personnalisation à droite.
4
Déplacer dans l'onglet Dashboard
Trois petits points sur le graphique → Copier le graphique. Collez-le dans l'onglet Dashboard et disposez-le à votre convenance.
Publier le dashboard en mode sécurisé
⚠️ Avant toute publication, vérifiez vos données. Reportez-vous au tableau OK / Pas OK en début d'article. Seules les données opérationnelles non sensibles peuvent être exposées via une URL publique.
Trois précautions à prendre dans l'ordre pour protéger vos données sources et exposer uniquement le dashboard.
1
Masquer les onglets sensibles
Clic droit sur l'onglet Raw Data → Masquer la feuille. Faites de même pour l'onglet Stats. Seul l'onglet Dashboard reste accessible.
2
Publier uniquement l'onglet Dashboard Fichier → Partager → Publier sur le web. Sélectionnez uniquement l'onglet Dashboard (pas le document entier). Format : Page web. Publiez et copiez l'URL générée.
3
Verrouiller le partage en lecture stricte
Bouton Partager → Accès général : Tous les utilisateurs avec le lien, rôle Lecteur. Dans les paramètres avancés, décochez les options de téléchargement, copie et impression pour empêcher toute exfiltration.
Intégrer le dashboard dans une Smart Page TimeTonic
Dernière étape : afficher votre tableau de bord directement dans TimeTonic via le module Smart Page.
1
Ajouter une Smart Page
Dans votre espace de travail TimeTonic, cliquez sur Ajouter puis sélectionnez le module Smart Page.
2
Coller l'URL du dashboard publié
Insérez l'URL générée à l'étape précédente et nommez votre Smart Page.
3
Consulter le dashboard en temps réel
Le tableau de bord s'affiche en lecture seule dans votre espace de travail, mis à jour à chaque modification dans la table TimeTonic.
Si ça ne marche pas, vérifier dans cet ordre
Voici les 5 problèmes les plus fréquents et leur résolution. Suivez les vérifications dans l'ordre proposé.
1. Mon Sheet reste vide malgré le statut "success" côté TimeTonic
Le statut HTTP 200 affiché par TimeTonic indique seulement que Google a répondu, pas que le script a réussi à écrire dans le Sheet. Pour avoir la vérité, ouvrez votre Sheet, allez dans Extensions → Apps Script, puis cliquez sur l'icône horloge "Exécutions" dans le menu de gauche. Vous y verrez les vrais logs côté Google, avec les erreurs éventuelles.
2. Le journal Apps Script montre "Missing intervention_num in payload"
Les noms de propriétés envoyés par TimeTonic ne correspondent pas à ceux attendus par le script. Vérifiez votre action Call Webhook côté TimeTonic et comparez les noms de propriétés avec le tableau de la section "Payload JSON attendu par le script". Les noms doivent être identiques au caractère près.
3. Mes modifications dans le script ne sont pas prises en compte
Après chaque modification du code, vous devez créer une nouvelle version du déploiement. Allez dans Déployer → Gérer les déploiements, cliquez sur l'icône crayon de votre déploiement, sélectionnez Nouvelle version, puis Déployer. L'URL ne change pas, mais le code exécuté est mis à jour.
4. Le script renvoie "Sheet 'Raw Data' not found"
L'onglet attendu par le script n'existe pas dans votre Google Sheet, ou son nom est différent. Vérifiez que l'onglet est bien nommé Raw Data (deux mots, espace au milieu, sans accent). Vérifiez aussi que la variable SPREADSHEET_ID en haut du script correspond bien à l'identifiant de votre Sheet.
5. Les nombres apparaissent comme du texte dans le Sheet
Problème de format numérique français (virgule décimale). Le script gère normalement ce cas, mais si une cellule reste en mode texte, sélectionnez la colonne concernée, puis Format → Nombre → Nombre. N'utilisez jamais "Fractionner texte en colonnes" qui détruirait les colonnes adjacentes.
Aller plus loin
Voir le tutoriel vidéo
La méthode complète en 5 minutes, étape par étape.