Dynamic Data Sources

A ten-minute explainer video on how to use Dynamic Datasource with Cloud CMS is available 😎. 

Dynamic Data Source is used to create dynamic pages with content from your Cloud Backend Database.

Prerequisite: 

Start by structuring your database.

 

Simple product data table
 

Add in some rows.

Sample products added




Create a visual function that'll get the specified product with the get parameter id.

Just a few clicks and your function is ready

 



Now let's switch to the pagebuilder.

Go to the page you want to dynamically populate, you have a direct access by clicking on the "dynamic data source" icon

From there, you can, from your CloudAPI functions, select the one you'll use to fetch the data. The id in the first column is the one you'll use to bind the data.



A modal will open



To display the data responded by your API function, just place [DSid=column] anywhere on your page.  So in this example, that would be [DS1=name], or [DS1=description], or [DS1=image] ... and save!


Prepare your data to be filled


To view your dynamic page, add the get parameter you setup in your API function that'll match it, in this example, id.

So that's, mywebsite.com/product.html?id=1
And it will render this :

Voilà, you've got powerful data source bound in minutes 

No data displaying?

You can check the "cb-status-x" meta (x corresponding to your datasource-id) to check what the problem is.



Going Further

You may also want to repeat zones for a listing of multiple examples.  Every row returned by your API function will be included in the page. 

To create a repeated zone, simply click the paintbrush,  select the "Data source Cloud Backend" of the element, column, or row that will be replicated.

 

  

 


Assign the corresponding data source, and the zone will replicate with each of the API call entries.


 


All the products are listed with the same design.  All you need is to update the database in order to add/update the products.