Hoe bouw je een dynamische dropdown in Chronoforms 8

Eerst moeten we een Event Trigger opzetten in het veld dat de verandering van opties zal activeren:

We zetten een trigger op met de naam "reloadoptions" wanneer de "Waarde Verandert" van ons veld.

Vervolgens moeten we in onze Dropdown-instellingen een Advanced Listener opzetten:

De triggernaam moet degene zijn die we eerder hebben ingesteld "reloadoptions", de Actie moet "Opties Laden" zijn en de Actieparameters is de alias van de pagina die de nieuwe opties zal leveren. In ons geval hebben we een pagina genaamd "options".

Nu moeten we de "options" pagina voorbereiden om het Verzoek voor Opties Laden te ontvangen en de resultaten in het juiste formaat terug te geven:

We hebben een Nieuwe Pagina toegevoegd en de alias ingesteld op "options", en de Paginagroep op "options". Het is belangrijk om de paginagroep te wijzigen in iets unieks in het formulier, zodat de pagina onafhankelijk toegankelijk is.

In het Laad-event van de options pagina hebben we een PHP-actie om de resultaten terug te geven:

In ons geval hebben we een PHP-script om een willekeurige lijst van hoofdsteden terug te geven:

$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"
];

// Shuffle the cities array to randomize order
shuffle($cities);

// Extract 5 random cities
$randomCities = array_slice($cities, 0, 5);

// Create an array of key-value pairs
$randomItems = [];
foreach ($randomCities as $city) {
    $randomItems[] = [
        'text' => $city,
        'value' => $city
    ];
}

// Output the result as JSON
echo json_encode($randomItems, JSON_PRETTY_PRINT);

Let op: de lijst is Json-gecodeerd en het is een array van arrays. Elke binnenste array is een optie en heeft 2 sleutels: "text" voor de optietekst en "value" voor de waarde van de optie.

Dat is alles. Wanneer het triggerveld nu verandert (bij Waarde Verandert), ontvangt de dropdown de trigger en roept de "options" pagina aan om de bijgewerkte lijst van opties op te halen.