Overview
Ce tutoriel explique comment implémenter une liste déroulante dynamique dans Chronoforms8, où les options se mettent à jour en fonction des changements d'un autre champ. Il couvre la configuration d'un Déclencheur d'Événement, la configuration d'un Écouteur Avancé dans la liste déroulante, et la création d'une page séparée avec un script PHP pour fournir de nouvelles options au format JSON. Le processus garantit que la liste déroulante se rafraîchit avec de nouvelles données, comme une liste aléatoire de capitales, chaque fois que la valeur du champ déclencheur change.
Une liste déroulante dynamique est un champ de sélection dont les options se mettront à jour lorsqu'un autre champ change. Dans ce tutoriel, nous allons montrer comment faire cela dans Chronoforms8.
Premièrement, nous devons configurer un Déclencheur d'Événement dans le champ qui déclenchera le changement des options :
Nous configurons un déclencheur nommé "reloadoptions" lorsque la "Valeur Change" dans notre champ.
Ensuite, dans les paramètres de notre liste déroulante, nous devons configurer un Écouteur Avancé :
Le nom du déclencheur doit être celui que nous avons configuré précédemment "reloadoptions", l'Action doit être "Charger les Options" et les paramètres de l'Action sont l'alias de la page qui fournira les nouvelles options. Dans notre cas, nous avons une page appelée "options".
Maintenant, nous devons préparer la page "options" pour recevoir la requête "Charger les Options" et retourner les résultats dans le bon format :
Nous avons ajouté une Nouvelle Page et défini l'alias sur "options", et le Groupe de Page sur "options". Il est important de changer le groupe de page pour quelque chose d'unique dans le formulaire afin que la page puisse être accessible indépendamment.
À l'intérieur de l'événement de chargement de la page options, nous avons une action PHP pour retourner les résultats :
Dans notre cas, nous avons un script PHP pour retourner une liste aléatoire de capitales :
$cities = [
"New York", "London", "Tokyo", "Paris", "Sydney",
"Toronto", "Berlin", "Rome", "Shanghai", "Istanbul",
"Mumbai", "São Paulo", "Mexico City", "Cape Town", "Buenos Aires",
"Moscow", "Singapore", "Los Angeles", "Bangkok", "Jakarta"
];
// Mélanger le tableau des villes pour un ordre aléatoire
shuffle($cities);
// Extraire 5 villes aléatoires
$randomCities = array_slice($cities, 0, 5);
// Créer un tableau de paires clé-valeur
$randomItems = [];
foreach ($randomCities as $city) {
$randomItems[] = [
'text' => $city,
'value' => $city
];
}
// Afficher le résultat au format JSON
echo json_encode($randomItems, JSON_PRETTY_PRINT);Notez que la liste est encodée en JSON et qu'il s'agit d'un tableau de tableaux. Chaque tableau interne est une option et possède 2 clés, "text" pour le texte de l'option, et "value" pour la valeur de l'option.
C'est tout. Maintenant, lorsque le champ déclencheur change (sur Changement de Valeur), la liste déroulante recevra le déclencheur et appellera la page "options" pour obtenir la liste mise à jour des options.
Comments: