Fonction onRecord
onRecord sera appelé lorsqu’on se déplace d’une ligne à l’autre dans la vue à laquelle est liée le widget, ou lorsqu’une valeur de la ligne sélectionnée change.
Le code contenu dans la fonction (entre les {}) sera alors exécuté.
Il faut pour cela avoir au préalable lié le widget à la vue :
Dans le panneau de création > onglet Table > Données source > « Sélectionner par », choisir la table source.
Cela permettra de sélectionner la ligne entière de la table qu’on clique sur une ligne.
Syntaxe :
grist.onRecord(record => {
// Code pour faire quelque chose quand le curseur a été déplacé.
});
Tuto 1 : Afficher des textes issus d’une table dans le custom widget
Objectif : quand on parcourt la table liée, on affiche dans le custom widget le texte de la ligne sélectionnée.
Étapes :
- On crée une table avec une colonne « MonNom »
- On ajoute le custom widget builder
- on pense bien à le lier à la vue de la table (« Sélectionner par »)
- on ouvre la configuration
- dans l’onglet « html » on enlève tout ce qui était contenu dans la balise
body du code par défaut, et on ajoute <label id="name"></label> qui va permettre d’afficher un texte.
Pour pouvoir identifier notre composant, on lui attribue un identifiant id="nom" (on aurait pu l’appeler id="patate", c’est comme on veut).
Le code html est le suivant :
<html>
<head>
<script src="https://docs.getgrist.com/grist-plugin-api.js"></script>
</head>
<body>
<label id="nom"></label>
</body>
</html>
:
- Au niveau de l’onglet javascript, on écrit le code js suivant :
grist.ready({ requiredAccess: 'full' });
const labelDansLeWidget = document.querySelector("#nom");
let nomIssuDeLaTable = ""
grist.onRecord(record => {
nomIssuDeLaTable = record.MonNom;
labelDansLeWidget.textContent = nomIssuDeLaTable;
});
Explication :
const labelDansLeWidget = document.querySelector("#nom");permet d’enregistrer notre élément <label id="nom"> dans une constantelet nomIssuDeLaTable = "" permettra d’enregistrer le nom sélectionné dans la table dans une variable- et dans la fonction
onRecord, un bout de code qui sera appelé chaque fois qu’on change de ligne :
– nomIssuDeLaTable = record.MonNom; : va modifier la variable nomIssuDeLaTable avec la valeur de la colonne MonNompour la ligne sélectionnée
– labelDansLeWidget.textContent = nomIssuDeLaTable; : OÙ LA MAGIE OPÈRE 
: va modifier l’attribut texte de la variable labelDansLeWidget avec la valeur de nomIssuDeLaTable précédemment attribuée
On clique sur « Preview » puis « Enregistrer ». Et voilà !
Démo : https://grist.incubateur.anct.gouv.fr/o/tutos-templates/rvyQtf7ECqp3/Ex-custom-widget
Tuto 2 : Ajouter une ligne ou modifier le texte d’une ligne depuis le custom widget
Cette fois-ci, on veut permettre à l’utilisateur·ice d’entrer un texte dans un champ de saisie du custom widget, et de cliquer sur un bouton pour soit l’ajouter dans une nouvelle ligne de la table, soit modifier une ligne existante.
- on ajoute le custom widget builder
- on pense bien à le lier à la vue de la table (« Sélectionner par »)
- on ouvre la configuration
- dans l’onglet « html » on enlève tout ce qui était contenu dans la balise
body du code par défaut, et on ajoute notre champ de saisie <input> et nos deux boutons <button> ; chacun ayant son identifiant. Le code est le suivant :
<div style="padding:4px"><input id="input" placeholder="Taper un texte"></input></div>
<div style="padding:4px"><button id="updateBtn">Mettre à jour la ligne</button></div>
<div style="padding:4px"><button id="addBtn">Ajouter une ligne</button></div>
- dans l’onglet javascript, on va d’abord récupérer nos différents composants hmtl grâce à leurs identifiants :
const textInput = document.getElementById('input');
const updateButton = document.getElementById('updateBtn');
const addButton = document.getElementById('addBtn');
- On définit ensuite des variables pour stocker la valeur du texte saisi par l’utilisateur·ice, et l’id de la ligne sélectionnée dans la table
let text = ""
let rowId = null
- On déclare ensuite notre fameuse fonction
onRecord, pour récupérer l’identifiant de la ligne sélectionnée dans la vue de la table liée
grist.onRecord(record => {
rowId = record.id
});
- Enfin, on définit ce qui se produit lors du clic sur les boutons
– « Mettre à jour la ligne » : on ajoute un « écouteur d’événement » sur le bouton de mise à jour, qui, à chaque clic, va déclencher le code de mise à jour. Ce dernier utilise la constante selectedTable pour récupérer la table sélectionnée (liée au custom widget), la fonction update pour mettre cette table à jour et, l’identifiant de ligne récupéré précédemment via la fonction onRecord, pour connaître la ligne à mettre à jour.
updateButton.addEventListener('click', async () => {
await grist.selectedTable.update({
id: rowId,
fields: {
MonNom: textInput.value
}
})
});
– « Ajouter une ligne » : même concept mais on utilise la fonction native create appliquée à selectedTable. Le code est le suivant :
addButton.addEventListener('click', async () => {
// Add a row
await grist.selectedTable.create({
fields: {
MonNom: textInput.value
}
})
});
Pour définir la nouvelle valeur du champ, on utilise :
Si on veut mettre à jour plusieurs champs, on ajoutera plusieurs champs de saisie dans notre html et plusieurs clés/valeurs dans l’attribut fields, par exemple :
await grist.selectedTable.update({
id: rowId,
fields: {
MonNom: ["l", textInput.value],
MonAdresse: adresseInput.value
}
Tuto bonus express : modifier un élément de couleur quand on sélectionne un code couleur dans la table
C’est l’exemple du webinaire de GristLabs.
Très similaire au tuto 1, sauf qu’au lieu d’afficher un texte issu de la table, on va récupérer dans la table un code couleur qui va changer la couleur d’un composant html.
Dans le code html, ajouter dans le body l’élément html suivant qui permet d’afficher une couleur :
<input type="color" id="color">
Et le code js suivant
const colorElement = document.querySelector("#color");
grist.onRecord(record => {
const value = record.Color;
colorElement.value = value;
});
qui va permettre de modifier, quand on parcourt les lignes de la table source, la couleur de l’élément html.
Et c’est tout 
)