-
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:
- 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.
- 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:
Source Code
- 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:
-
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:
- 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.
- We created a new Webhook called “City/State Lookup” (under Account Settings > 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 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
- 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:
-
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
Making Dynamic Data Collection Forms
- Updated