[Widget] Mise à jour du drop-down pour une synchronisation multi-pages

Varamil · Avril 8, 2025, 3:40

Bonjour,

J’ai fait une mise à jour du widget drop-down (menu déroulant) dispo sur le dépôt officiel pour ajouter une possibilité de synchroniser la valeur entre plusieurs drop-down présents sur des pages différentes.

Par exemple, quand il y a trop de widgets sur une page, vous pouvez-maintenant utiliser ce menu déroulant pour répartir les widgets sur plusieurs pages, et utiliser la synchronisation pour garder le même élément sélectionné même si vous naviguez entre les pages.

Utilisez le menu déroulant comme sélecteur principal sur chacune des pages, et définissez le même ID de session pour chacun des menus. Ainsi, quand vous naviguerez d’une page à l’autre, le menu gardera la même valeur (et l’affichage des widgets liés se mettra à jour en conséquence).

Le lien pour le widget mis à jour est : https://varamil.github.io/grist-widget/drop-down/index.html, un exemple est disponible ici et le code source est disponible sur Github. Le README sur Github décrit comment configurer la synchronisation.

Sous le capot, la synchronisation est faite en sauvegardant la valeur du menu la session de navigation du navigateur. Donc, plusieurs onglets peuvent être ouverts en même temps avec des valeurs différentes, et différents utilisateurs peuvent visualiser la même page et sélectionner des valeurs différentes.

raphael · Juin 6, 2025, 11:25

Formidable !
Effectivement, je voudrais parfois que ma sélection qui persiste d’une page à l’autre. Ça m’a manqué. Merci beaucoup !

Julien.Demantes · Février 3, 2026, 1:37

Bonjour,

Votre widget est top.

J’ai une question : est-il possible de filtrer les items présent dans la liste déroulante par rapport à une autre colonne ?

Lorsque je rajouter une colonne pour filtrer la liste disparait.

Pour exemple j’ai :
Une page avec un tableau Export de 4 colonnes :

Acronyme : liste des acronymes projets
Statut projet : statut du projet (En cours, En instruction, clos, etc.)
Type projet : typologie réglementaire du projet
Commentaires : colonne rajouté pour accueillir le widget Bloc-note

Une page avec 3 vues :

EXPORT [by Statut projet] Personnalisée : liste déroulante des statuts
EXPORT Personnalisée : liste déroulante des études sélectionné par EXPORT [by Statut projet] Personnalisée
Bloc-note : prise de note sur un projet avec le widget Bloc-note

Mon problème : comment ne faire apparaitre que les Acronyme projet de certains types de projets ?

Varamil · Février 4, 2026, 7:26

Bonjour,

Il faudrait faire des essais, mais pêut être en définissant la propriété du widget « Sélectionné par » qui fera que les données d’entrée seront filtrées et donc la liste filtrée également. À confirmer

Julien.Demantes · Février 5, 2026, 8:34

J’ai déjà essayé.

Voici à quoi ressemble la page :

Si je sélectionne Type de projet en plus de Statut projet,

cela me répète les items :

Autre soucis : il semble impossible de classer par ordre alphabétique les données d’une liste. La seule façon trouvé est de trier la colonne de la table de base. Mais cela ne fonctionne que sur une seule colonne…

Varamil · Février 15, 2026, 7:23

Bonjour,

En regardant le code j’ai commencé par me dire que c’était un vieux widget et que je n’avais jamais ajouté les fonctionnalités que j’avais implémentées sur le drop-down-filter, notamment le fait de trier les valeurs et filtrer les doublons.

Donc je commence à faire des modifications, mais je fini par me rappeler la différence entre ces deux widgets. L’un (celui-ci) sert à sélectionner une ligne en particulier, l’autre permet de filtrer les données. Sur le premier la sélection est basée sur l’id de la ligne (qui est unique), alors que le second fonctionne sur les données d’une colone (qui peuvent apparaître plusieurs fois).

Tout ça pour dire que le widget drop-down suppose qu’il n’y a pas de doublon dans la liste, ou alors c’est volontaire et on veut afficher les deux. In fine, on veut sélectionner une ligne en particulier, pas une valeur.

Maintenant avec les tableaux récapitulatifs il y a peut être une duplication qui ne devrait pas avoir lieu. Mais j’avoue j’ai un peu du mal à reproduire votre cas. Est-ce que vous pourriez partager un document configuré comme il faut pour que je puisse regarder ce qui se passe en arrière plan ? ça me ferait gagner beaucoup de temps.

Sinon du côté du trie, le widget n’était pas conçu à la base pour que ce soit faisable, mais ça ne devrait pas être trop compliqué à améliorer.

Ayant dit tout ça, est-ce qu’au final le drop-down est bien le widget dont vous avez besoin, ou bien ce serait plutôt le drop-down-filter ?

Julien.Demantes · Février 16, 2026, 11:01

Bonjour,

Je vous ai fait un fichier avec des données fictives : Exemple dropdown - Grist

J’avoue ne pas trop comprendre la différence entre les deux widgets. J’ai essayé d’utilisé le dropdown-filter, mais je ne comprend pas son fonctionnement. Le drop-down-widget correspond à mon besoin : afficher uniquement les projets du chef de projet sélectionné. Cependant je voudrais :

Ordonnées les données par ordre alphabétique (ici l’acronyme des projets
Filtrer les données (ici ne pas afficher les études RIPH1 par exemple)

Merci pour votre retour.

Varamil · Février 17, 2026, 5:24

Ok, merci pour l’exemple, en essayant de grouper à partir de plusieurs entrées je pense comprendre votre problème.

Maintenant mon souci à moi, c’est que le fait de faire ces groupements, génère en arrière plan le tableau suivant :

où l’on voit que des éléments de la colonne « Chef de projet » sont dupliqués car ces chefs apparaissent pour différents types de projet.

A partir de là, le menu déroulant va afficher cette liste complète, car techniquement « Claire » de la ligne 1 ne correspond pas à la même chose que celle de la ligne 6. Le souci est que le menu n’affiche que la colonne « Chef de projet », donc on ne voit pas se qui distingue les différents doublons.

Cela dit, je ne suis toujours pas sur de savoir ce que vous voulez faire, je ne vois pas l’intérêt de croiser les données alors que j’ai l’impression que vous voulez appliquer deux filtres successifs, un premier sur le type de projet puis, sur les résultats restants un second filtre sur le chef de projet.

Si ma dernière impression est la bonne, une solution est de faire une colonne intermédiaire qui concatène les couples dans le tableau croisé, et ensuite utiliser le drop-down sur cette colonne, ça affichera un menu avec « Claire Martin - RIPH1 », « Julien Moreau - Recherche… », etc…

L’autre option est d’utiliser des drop-down-filter en cascade. Le premier filtre le tableau pour ne garder qu’un type de projet :

Le second, basé sur les lignes restantes, filtre de nouveau pour ne garder qu’un seul chez de projet, et enfin les lignes encore restantes sont affichées :

J’ai essayé de modifier votre exemple pour ce que soit plus clair, mais j’ai l’impression qu’il y a un souci à cascader les widgets, je vais regarder plus en détail maintenant que j’ai compris le souci.

Varamil · Février 20, 2026, 12:34

Bonjour,

Alors en refaisant des tests pour lier plusieurs drop-down entre eux, je suis retombé sur une limitation de Grist à laquelle je me souvient maintenant d’avoir déjà été confontré. On ne peut pas enchaîner plusieurs widget qui agissent comme « filtre »:

A l’époque je n’avais pas trouvé de solution de contournement, mais en y repensant il suffirait d’avoir plusieurs critères de filtrage dans le même widget.

Donc sur le principe je pense avoir une solution viable, dans les faits ça va me demandeer un peu plus de temps que prévu, il faut que je génère un widget qui gère dynamiquement le nombre de filtres.

Julien.Demantes · Février 25, 2026, 1:45

Super ! Merci beaucoup.

Je veux une liste déroulante avec les données de la colonne Chef de projet. Je voudrai pouvoir :

filtrer les données, soit sur cette même colonne (afficher une liste sans Claire Martin par exemple), soit sur une autre colonne (afficher uniquement les Chefs de projets qui ont des projets RIPH1 ;
Trier par ordre alphabétique la liste.

L’idée étant d’éviter d’avoir 3 listes déroulantes imbriquées. Evidement si je souhaite laisser la possibilité à l’utilisateur de filtrer lui-même facilement je vais imbriquer deux listes. Mais je voudrai dans certains cas filtrer en amont (imaginons que je ne veux afficher que les Chefs de projets en activité, je veux filtrer sur une colonne « En activité ? »).

Varamil · Mars 4, 2026, 5:48

Bonsoir,

Je n’ai pas eu beaucoup de temps dernièrement, mais j’ai fait une mise à jour du widget (pas celui-là, celui qui filtre : drop-down-filter) pour avoir 2 menus déroulants fonctionnant de manière combinés, soit avec une logique ET, soit avec une logique OU.

Ce qu’il manque encore c’est :

Le fait de pouvoir mettre plus de filtres, pour l’instant c’est 1 ou 2
Le fait que la liste du second menu soit filtrée par rapport au choix du premier menu

Est-ce que ça s’approche déjà plus du besoin ?

Julien.Demantes · Mars 5, 2026, 1:44

Bonjour,
Merci d’essayer de répondre à mes besoins. Malheureusement je ne penses pas que l’on se comprenne.

Je ne comprend toujours pas le fonctionnement du drop-down-filter par rapport au drop-down-widget.
Dans mon exemple de document (Exemple dropdown - Grist) j’ai 4 pages :

Projets RIPH
Ici je veux que le menu déroulant Choix Chef de projet liste tous les chefs de projets autre que RNIPH (donc tous sauf Marie Cassini et Hélène Sucra).
Projets RNIPH
Ici je veux que le menu déroulant Choix Chef de projet liste tous les chefs de projets RNIPH uniquement (donc uniquement Marie Cassini et Hélène Sucra).
Réunion de service
Ici je veux que l’on puisse choisir la typologie voulu puis, de manière dynamique, le Chef de projet voulu. Or pour le Chef de projet cela me liste plusieurs fois les mêmes noms. Puis, je ne sais pas pourquoi, cela me sort tous les projets.
test filter
Ici je teste le drop-down-filter. Je ne comprend pas le fonctionnement, cela ne me donne qu’un seul résultat. Seule la première valeur s’affiche (pour Claire Martin seul NEBULA s’affiche) au lieu de toutes les valeurs de ce filtre.

Pour la maj, le design est très bien mais il faudrait plutôt que le deuxième filtre soit conditionnel du premier : le premier filtre détermine le Type de projet, le deuxième affiche uniquement la liste des Chefs de projet ayant un projet du type sélectionné.
Ce design est top car il réduit l’espace prit par 2 widget à 1 seul. Cela pourrait remplacer les deux listes dans la page Réunion de service.

Cependant ma demande initiale est tout autre : Je veux que sur le filtre de base, dans un menu, on puisse préfiltrer ce qui s’affichera dans la liste déroulante.

Je veux une liste déroulante montrant uniquement les Chefs de projets RIPH (donc sans Marie Cassini et Hélène Sucra dans mon fichier d’exemple). Je veux toujours dans ma base d’origine avoir tous les projets. Puis pouvoir, pour une utilisation définie sur une page dédiée, laisser le Chef de projet choisir ses projets (en sélectionnant son nom dans la liste déroulante. Mais sur la page RNIPH je ne veux pas voir les Chefs de projet RNIPH (ici Marie Cassini et Hélène Sucra).

Au besoin je peux me rendre disponible pour un court échange Visio.

Merci de votre aide.