Overview
Este tutorial explica cómo implementar un menú desplegable dinámico en Chronoforms8, donde las opciones se actualizan según los cambios en otro campo. Cubre la configuración de un Disparador de Eventos, la configuración de un Oyente Avanzado en el menú desplegable y la creación de una página separada con un script PHP para suministrar nuevas opciones en formato JSON. El proceso garantiza que el menú desplegable se actualice con nuevos datos, como una lista aleatoria de capitales, cada vez que cambia el valor del campo que lo activa.
Un menú desplegable dinámico es un campo de selección que actualizará sus opciones cuando cambie otro campo; en este tutorial mostraremos cómo hacer esto en Chronoforms8.
Primero, necesitamos configurar un Disparador de Eventos en el campo que activará el cambio de opciones:
Configuramos un disparador llamado "reloadoptions" cuando el "Valor Cambia" en nuestro campo.
Luego, en la configuración de nuestro Menú Desplegable, necesitamos configurar un Oyente Avanzado:
El nombre del disparador debe ser el que configuramos antes "reloadoptions", la Acción debe ser "Cargar Opciones" y los parámetros de la Acción es el alias de la página que suministrará las nuevas opciones; en nuestro caso tenemos una página llamada "options".
Ahora necesitamos preparar la página "options" para recibir la solicitud de Cargar Opciones y devolver los resultados en el formato correcto:
Añadimos una Nueva Página y establecemos el alias en "options", y el Grupo de Página en "options"; es importante cambiar el grupo de página a algo único en el formulario para que la página pueda ser accedida de forma independiente.
Dentro del evento de Carga de la página options tenemos una acción PHP para devolver los resultados:
En nuestro caso tenemos un script PHP para devolver una lista aleatoria 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"
];
// Barajar el array de ciudades para orden aleatorio
shuffle($cities);
// Extraer 5 ciudades aleatorias
$randomCities = array_slice($cities, 0, 5);
// Crear un array de pares clave-valor
$randomItems = [];
foreach ($randomCities as $city) {
$randomItems[] = [
'text' => $city,
'value' => $city
];
}
// Mostrar el resultado como JSON
echo json_encode($randomItems, JSON_PRETTY_PRINT);Nota que la lista está codificada en Json y es un array de arrays; cada array interno es una opción y tiene 2 claves, "text" para el texto de la opción y "value" para el valor de la opción.
Eso es todo; ahora, cuando el campo activador cambie (al Cambiar el Valor), el menú desplegable recibirá el disparador y llamará a la página "options" para obtener la lista actualizada de opciones.
Comments: