Ce post décrit comment créer une vue personnalisée (« custom widget ») en écrivant le code dans un logiciel de développement puis en le versionnant sur une forge comme Github ou Gitlab, puis en le servant sur internet. Dans Grist, on peut ensuite utiliser le widget grâce à son url, ajoutée via le menu « Widget personnalisé ».
Si vous avez créé un widget personnalisé avec le « Custom Widget Builder », cela peut être intéressant de le publier également avec cette méthode, pour faciliter sa réutilisation - éviter aux utilisateurs de devoir copier/coller le code de votre widget - et également éviter de perdre de précieuses heures de travail en cas de suppression accidentelle du widget ou du document qui le contient.
Comment ça marche
- Pour créer son widget, il faut écrire un service web, typiquement avec du html, du css et du javascript (voir un tutoriel ici)
- La structure de base peut être un « simple » :
- index.html
- index.css
- script.js
Pour inspiration au niveau du code, certains widgets de GristLabs sont disponibles ici : GitHub - gristlabs/grist-widget: A repository of custom widgets to embed in Grist documents
Voir également les widgets développés par l’administration française ici : GitHub - betagouv/grist-custom-widgets-fr-admin: "Widgets custom" pour Grist développés pour répondre aux besoins de l'administration française
- Le code doit être servi sur un serveur web public comme GitHub Pages. Par exemple :
-
le code source des widgets de GristLabs « Facture » et « Inspect » est disponible sur
https://github.com/gristlabs/grist-widget
et servi sur
https://gristlabs.github.io/grist-widget/ -
Le code des widgets de l’équipe ANCT est disponible sur
https://github.com/betagouv/grist-custom-widgets-fr-admin/
et servi sur
https://betagouv.github.io/grist-custom-widgets-fr-admin/
-
Tuto en utilisant un IDE
→ utilisez un IDE (par exemple Rider ou VS Code) pour écrire votre code (si vous avez utilisé le « Custom Widget Builder », il vous suffit de copier/coller le code dans les bons fichiers)
→ versionnez votre code sur une forge. Par exemple pour Github, suivre ces étapes
→ Il faut ensuite « servir » le code à une adresse. Par exemple, pour Github, il faut servir le code sur Github Pages : aller dans le dépôt, dans Paramètres > Pages > Branche, sélectionner « main » et enregistrer. Attendez 1 ou 2 minutes, recharger et copier l’url créée « Votre site est en ligne sur https://aue.github.io/grist-mon-petit-widget/ »
→ dans Grist, ajoutez un « widget personnalisé » et collez l’URL à laquelle est servi votre widget
→ Et voilà !