Overview
Este tutorial explica como implementar um menu suspenso dinâmico no Chronoforms8, onde as opções são atualizadas com base nas alterações de outro campo. Abrange a configuração de um Gatilho de Evento, a configuração de um Ouvinte Avançado no menu suspenso e a criação de uma página separada com um script PHP para fornecer novas opções no formato JSON. O processo garante que o menu suspenso seja atualizado com novos dados, como uma lista aleatória de capitais, sempre que o valor do campo de acionamento for alterado.
Um menu suspenso dinâmico é um campo de seleção que atualizará suas opções quando outro campo for alterado. Neste tutorial, mostraremos como fazer isso no Chronoforms8.
Primeiro, precisamos configurar um Gatilho de Evento no campo que acionará a mudança de opções:
Configuramos um gatilho chamado "reloadoptions" quando o "Valor Altera" em nosso campo.
Em seguida, nas configurações do nosso Menu Suspenso, precisamos configurar um Ouvinte Avançado:
O nome do gatilho deve ser aquele que configuramos anteriormente, "reloadoptions". A Ação deve ser "Carregar Opções" e os parâmetros da ação são o alias da página que fornecerá as novas opções. No nosso caso, temos uma página chamada "options".
Agora precisamos preparar a página "options" para receber a solicitação "Carregar Opções" e retornar os resultados no formato correto:
Adicionamos uma Nova Página e definimos o alias como "options" e o Grupo da Página como "options". É importante alterar o grupo da página para algo único no formulário para que a página possa ser acessada independentemente.
Dentro do evento de Carregamento da página options, temos uma ação PHP para retornar os resultados:
No nosso caso, temos um script PHP para retornar uma lista aleatória de capitais:
$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"
];
// Embaralha o array de cidades para randomizar a ordem
shuffle($cities);
// Extrai 5 cidades aleatórias
$randomCities = array_slice($cities, 0, 5);
// Cria um array de pares chave-valor
$randomItems = [];
foreach ($randomCities as $city) {
$randomItems[] = [
'text' => $city,
'value' => $city
];
}
// Saída do resultado como JSON
echo json_encode($randomItems, JSON_PRETTY_PRINT);Observe que a lista é codificada em Json e é um array de arrays. Cada array interno é uma opção e possui 2 chaves: "text" para o texto da opção e "value" para o valor da opção.
Isso é tudo. Agora, quando o campo de acionamento for alterado (ao alterar o Valor), o menu suspenso receberá o gatilho e chamará a página "options" para obter a lista atualizada de opções.
Comments: