Widgets Personnalisés et Liaisons Dynamiques dans Grist : Rendez Vos Documents Interactifs

Dans Grist, les vues et widgets forment le cœur de l'affichage de vos données. Au-delà des tables, cartes et graphiques standards, les widgets avancés comme les custom widgets et les liaisons entre widgets ouvrent la porte à des interfaces plus interactives. Ces outils sont particulièrement utiles pour les petites entreprises (PME), les administrations ou les associations, où vous gérez souvent des données relationnelles comme des contacts clients, des projets d'équipe ou des rapports budgétaires. Ils permettent de créer des tableaux de bord dynamiques sans recourir à des logiciels complexes.

Cet article se concentre sur deux fonctionnalités clés : les widgets personnalisés (custom widgets) et les liaisons entre widgets (linking widgets). Nous les expliquerons étape par étape, avec des exemples concrets adaptés à un public débutant. L'objectif est de vous montrer comment transformer un document Grist en un outil collaboratif fluide, où une sélection dans un widget met à jour les autres en temps réel.

Un widget personnalisé est un composant que vous intégrez dans une page Grist pour afficher ou interagir avec vos données de manière unique. Contrairement aux widgets standards, il utilise du code HTML, CSS et JavaScript pour créer du contenu sur mesure. Par exemple, vous pouvez afficher une facture imprimable, une galerie d'images ou une carte interactive à partir de vos tables.

Ces widgets s'appuient sur l'API de Grist pour accéder aux données, mais ils nécessitent un hébergement public (comme GitHub Pages) et des bases en développement web. Pour une PME gérant des stocks, imaginez un widget qui génère des étiquettes d'expédition directement depuis une table de commandes. Dans une association, il pourrait afficher des photos d'événements liées à un calendrier.

Avantages pour Votre Organisation

Flexibilité : Adaptez l'affichage à vos besoins spécifiques, sans quitter Grist.
Intégration native : Les données restent synchronisées avec vos tables.
Collaboration : Partagez des vues personnalisées avec votre équipe, sans outils externes.

Suivons les étapes pour en créer un simple. Supposez que vous gérez une table "Employés" avec des colonnes comme Nom, Photo (URL) et Description.

Ouvrez votre document Grist et allez sur une page.
Cliquez sur Ajouter un nouveau > Ajouter un widget à la page.
Sélectionnez Personnalisé comme type de widget.
Choisissez la table source (ex. : "Employés").
Optionnel : Utilisez Sélectionner par pour lier à un autre widget (nous y reviendrons).

Le widget apparaît vide sur la page.

Cliquez sur les trois points en haut à droite du widget > Options du widget.
Dans la section Personnalisé, entrez l'URL publique de votre widget hébergé (ex. : https://votre-nom.github.io/mon-widget.html).

Étape 3 : Configurer l'Accès aux Données

Choisissez le niveau d'accès :

Aucun accès au document : Le widget s'affiche, mais sans données Grist.
Lire la table sélectionnée : Accès en lecture seule à la table choisie (idéal pour la plupart des cas).
Accès complet au document : Lecture et modification (utilisez avec prudence).

Dans le code du widget, demandez l'accès via grist.ready({ requiredAccess: 'read table' });.

Étape 4 : Mapper les Colonnes (Recommandé)

Pour que le widget soit réutilisable, définissez les colonnes attendues. Grist propose une interface pour les mapper à vos vraies colonnes.

Exemple de code basique pour un visualiseur d'images (hébergez ce HTML sur GitHub Pages) :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Visualiseur d'Images</title>
    <script src="https://docs.getgrist.com/grist-plugin-api.js"></script>
</head>
<body>
    <img id="photo" src="" alt="Photo" style="max-width: 300px;">
    <div id="nom"></div>
    <script>
        grist.ready({
            columns: [
                { name: "Photo", title: "URL de la photo", type: "Text" },
                { name: "Nom", title: "Nom de l'employé", type: "Text" }
            ],
            requiredAccess: 'read table'
        });
        grist.onRecord(function(record) {
            const mapped = grist.mapColumnNames(record);
            if (mapped) {
                document.getElementById('photo').src = mapped.Photo;
                document.getElementById('nom').innerText = mapped.Nom;
            }
        });
    </script>
</body>
</html>

Ce code :

Charge l'API Grist.
Définit les colonnes attendues.
Met à jour l'affichage quand vous sélectionnez une ligne dans la table liée.

Exemple Pratique : Galerie pour une Association

Dans une table "Événements" (colonnes : Titre, Image URL), créez un widget qui affiche une galerie d'images. Utilisez JavaScript pour boucler sur les enregistrements via grist.onRecords(). Pour une asso organisant des ateliers, cela permet de visualiser rapidement les photos des sessions passées, liées à un calendrier.

Limites des Widgets Personnalisés

Connaissances requises : Bases en HTML/JS ; pas pour les purs débutants.
Hébergement public : Doit être accessible via HTTPS.
Sécurité : Limitez l'accès à "read table" pour éviter les risques (ex. : exfiltration de données).
Pas d'édition directe : Sans accès complet, vous ne pouvez qu'afficher.

Testez toujours avec un accès minimal.

Les Liaisons entre Widgets : Créez des Interactions Dynamiques

Les liaisons relient des widgets sur une page pour une mise à jour automatique. Sélectionnez une ligne dans un widget, et les autres filtrent ou zooment sur les données liées. Cela repose sur les colonnes de référence (relations entre tables).

Pour une PME en gestion de projets, liez une table "Clients" à une table "Tâches" : sélectionnez un client, et voyez seulement ses tâches en cours.

Comment Configurer une Liaison

Ajoutez un premier widget (ex. : Table "Départements").
Ajoutez un second (ex. : Table "Employés").
Dans le sélecteur de widgets, choisissez Sélectionner par > le premier widget.

La liaison s'active si "Employés" a une colonne Référence vers "Départements".

Pour modifier :

Trois points > Sélection des données > Éditez "Sélectionner par".

Types de Liaisons

Même enregistrement : Liez une table à une carte du même table. Sélectionnez un employé dans la table, la carte affiche ses détails.
Filtrage : Via référence. Sélectionnez un département, filtrez les employés. Liez à un graphique pour des stats dynamiques (ex. : salaires par poste).
Indirecte : La table source référence une autre. Ex. : "Employés" (référence Département) lié à une carte "Départements".
Multi-références : Choisissez laquelle filtrer (ex. : aéroports de départ vs. arrivée dans une table Vols).
Avec résumés : Liez des tables de synthèse (ex. : moyenne salaires par poste) à des graphiques ou tables sous-jacentes.

Exemple : Tableau de Bord pour Administration

Créez une page avec :

Table "Projets" (colonnes : Client, Budget).
Graphique "Budgets par Client" lié à "Projets" via référence Client.
Carte "Détails Projet" liée à la table.

Sélectionnez un projet : le graphique zoome sur ce client, la carte montre les infos. Pour une admin locale, suivez les budgets par service sans filtres manuels.

Combiner Widgets Personnalisés et Liaisons

Les custom widgets supportent les liaisons. Ajoutez allowSelectBy: true dans grist.ready() pour activer. Exemple : Un widget personnalisé (galerie vidéo) lié à une table "Événements". Sélectionnez un événement, le widget charge la vidéo YouTube via URL.

Code snippet pour activer :

grist.ready({ allowSelectBy: true });
grist.setCursorPos({ rowId: 5 }); // Naviguez programmatiquement

Pour une asso de formation, liez un calendrier (widget standard) à un custom widget affichant des ressources (PDF embeds).

Cas d'Usage Concrets pour PME et Associations

CRM Léger : Liez contacts à conversations ; custom widget pour emails formatés.
Suivi Budgétaire : Table dépenses liée à graphiques ; widget pour factures PDF.
Gestion Événements : Calendrier lié à cartes participants ; custom pour galeries photos.
RH Associatif : Employés par équipe (liaison) ; widget pour badges imprimables.

Ces outils réduisent le temps de reporting et favorisent la collaboration.

Bonnes Pratiques

Sécurité : Utilisez "read table" ; testez les mappings.
Simplicité : Commencez par liaisons standards avant custom.
Performance : Limitez les données ; évitez les boucles JS lourdes.
Partage : Documentez les setups pour votre équipe.
Ressources : Consultez l'API Grist pour plus de fonctions comme onOptions pour configs dynamiques.

Conclusion

Les widgets personnalisés et liaisons dynamiques transforment Grist en un outil puissant pour des dashboards interactifs. Pour une PME, ils simplifient le suivi client ; pour une asso, ils centralisent les événements. Commencez par une liaison simple, puis expérimentez un custom widget basique. Avec la pratique, vous gagnerez en efficacité sans complexité inutile.

Widgets Personnalisés et Liaisons Dynamiques dans Grist

Widgets Personnalisés et Liaisons Dynamiques dans Grist : Rendez Vos Documents Interactifs

Qu'est-ce qu'un Widget Personnalisé ?

Avantages pour Votre Organisation

Comment Créer et Ajouter un Widget Personnalisé

Étape 1 : Ajouter le Widget à la Page

Étape 2 : Fournir l'URL du Widget