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.

Demo

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.

Setup Overview

This tree uses Zingtree Webhooks. Here’s how we built it:

1. 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:

   https://zingtree.com/demo/get-cities-from-state.php?state=#state#

   Substitute #state# with the 2 letter abbreviation for your state to see the results, or just use this example for Alaska.

2. We created a new Webhook called “City/State Lookup” (under Account > My Apps) with the URL in step 1.

   

3. 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:

   

4. 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:

   

Source Code

• You can see the entire tree here.
• The PHP source code for the Webhook URL script is here.
• The URL for the Webhook is:
  https://zingtree.com/demo/get-cities-from-state.php?state=#state#

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.

Demo

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.

Setup Overview

This tree uses Zingtree Webhooks. Here’s how we built it:

1. 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:

   https://zingtree.com/demo/get-cities-from-state.php?state=#state#

   Substitute #state# with the 2 letter abbreviation for your state to see the results, or just use this example for Alaska.

2. We created a new Webhook called “City/State Lookup” (under Account Settings > My Apps) with the URL in step 1.

   

3. 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:

   

4. 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 Apps and Webhooks, we tell node #2 to send a message to our City/State Lookup Webhook before it loads by clicking Add App and then selecting the Webhook from the drop down menu, like this:

   

Source Code

• You can see the entire tree here.
• The PHP source code for the Webhook URL script is here.
• The URL for the Webhook is:
  https://zingtree.com/demo/get-cities-from-state.php?state=#state#

Throughout 2022 Zingtree will be upgrading customers to our new faster and more modern user experience! Here's how to tell which experience your Zingtree Authors are currently using.

Log in to your Zingtree Author account and navigate to My Trees. How does your current My Trees page look?

Zingtree Classic

New User Experience