📱 Aperçu
Code Editor Pro vous permet de créer des widgets Grist personnalisés directement dans votre document, sans avoir besoin d'héberger de fichiers externes.
Liste des colonnes de la table connectée. Cliquez pour insérer record.NomColonne dans votre code.
Exemples de code prêts à l'emploi. Cliquez pour remplacer votre code actuel.
Modèles de widgets complets (Dashboard KPI, Liste stylisée, etc.)
Référence des fonctions Grist disponibles avec autocomplétion.
| Onglet | Description | Usage |
|---|---|---|
| JavaScript | Logique du widget | Interactions avec Grist API, manipulation des données |
| HTML | Structure de la page | Éléments visuels, conteneurs |
| CSS | Styles visuels | Couleurs, tailles, mise en page |
| Python | Formules Grist | Aide-mémoire pour les formules de colonnes (à copier dans Grist) |
| Bouton | Action |
|---|---|
| 🔄 Reset | Réinitialise le code aux valeurs par défaut |
| ▶️ Exécuter | Lance l'aperçu du widget (sans sauvegarder) |
| 💾 Installer | Sauvegarde le code dans le document Grist |
Une fois votre widget terminé, vous pouvez l'exporter pour l'utiliser dans d'autres documents Grist.
Télécharge un fichier ZIP contenant tous les fichiers de votre widget, prêts à être hébergés.
mon-widget-grist.zip est téléchargéindex.html - Page principalewidget.js - Code JavaScriptstyle.css - Styles CSSformulas.py - Aide-mémoire PythonREADME.md - Instructions// Initialiser le widget
grist.ready({ requiredAccess: 'read table' });
// Écouter l'enregistrement sélectionné
grist.onRecord(function(record) {
console.log('Enregistrement:', record);
});
// Écouter tous les enregistrements
grist.onRecords(function(records) {
console.log('Tous les enregistrements:', records);
});
// Créer un enregistrement
await grist.selectedTable.create({ fields: { Nom: 'Test' } });
// Modifier un enregistrement
await grist.selectedTable.update({ id: 1, fields: { Nom: 'Nouveau' } });
// Supprimer un enregistrement
await grist.selectedTable.destroy(1);
# Référencer une colonne $Nom + " " + $Prenom # Condition "Urgent" if $Priorite == "haute" else "Normal" # Recherche (VLOOKUP) Clients.lookupOne(Email=$Email).Nom # Somme conditionnelle (SUMIF) sum(Ventes.lookupRecords(Statut="Validé").Montant) # Comptage len(Taches.lookupRecords(Statut="Terminé")) # Date du jour NOW()
Vérifiez la console (bouton "Console") pour voir les erreurs JavaScript.
Utilisez grist.onRecord() pour l'enregistrement sélectionné ou grist.onRecords() pour tous les enregistrements.
Assurez-vous d'avoir sélectionné une table dans les paramètres du widget (panneau de droite dans Grist).
Cliquez sur "Installer" pour sauvegarder le code dans le document Grist.