One of our larger customers requested the ability to make a list box that can change depending upon a selection made previously while using a decision tree. If you are doing data collection, this can really simplify things for your end-users.
For a demo, we’ve built a tree that asks you to select a state in the USA, and from there shows a list of cities in that state. You can try the demo here.
This tree uses Zingtree Webhooks. Here’s how we built it:
- We created a PHP script for our state-to-city list box generator. This script receives a state code, and returns JSON with a variable called pick_a_city that contains an HTML list box to pick a city in that state. This will be the Webhook URL. It looks like this:
Substitute #state# with the 2 letter abbreviation for your state to see the results, or just use this example for Alaska.
- We created a new Webhook called “City/State Lookup” (under Account > My Apps) with the URL in step 1.
- The first node contains a list box with all of the states. The selection is stored to a variable named state. The only button in this node goes to node #2. The end-user view for node #1 looks like this:
- Node #2 calls the Webhook we created with the state variable from node #1. The Webhook returns HTML for a list box that replaces a placeholder in node #2 called #pick_a_city#. Here’s the content area for node #2:
Under Advanced Options, we tell node #2 to send a message to our City/State Lookup Webhook before it loads, like this:
- You can see the entire tree here.
- The PHP source code for the Webhook URL script is here.
- The URL for the Webhook is:
Need More Info?
Questions or suggestions? Just holler!