Wappler crowdfunding is now launched! Go to IndieGoGo Wappler Campaign, let's make history!

Dynamic App Connect Google Directions

Dynamic App Connect Google Directions

Learn how to use App Connect Google Directions with dynamic data

With this movie we will show you how to use App Connect Google Directions with dynamic data.
Step by Step

You can use multiple dynamic data sources like: a database query, a JSON data source or a form field. For this example we will be using a database query. Add a server connect component (1-3). 

Link it to your server action which contains your database query (1-3).

Click on your page where you want to display the directions list (1). Add a new component and under display select google directions (2-4).

Select your map from the dropdown (1-2). Select show directions in order to display a directions list on the page (3). Setup the route options (4).

Now, let's bind the dynamic data. Click the add new dynamic attribute button.

Under google maps, select origin (1-2).

Click the dynamic data button (1). Select the binding returning the origin from your database query (2-3).

We do the same for destination (1-3).

You can also add dynamic way-points (1-3).

If you want to use multiple way-points then they must be stored in one database field. The addresses for way-points in your database must be separated by vertical bar character (1-3). 

And we're done! Let's preview the results.

That's how easy it is to use dynamic data with App Connect Google Directions.

Extensions Covered

Comments

Be the first to write a comment

You must me logged in to write a comment.