Articles on: Dynamic data (CMS)

Dynamic data from API source

Here, we'll guide you step by step on how to display data from the API source on your website pages.

You can continue reading the guide or jump straight to the step you're interested in:

Specify the API source URL that will supply dynamic data for the page.
Customize the display of a specific component.

This is how data from the API source is displayed on the page


1. Dynamic data source URL



In Page settings, you can specify an API URL that will return data in JSON format (accepts GET requests).




There are two types of dynamic data source URL:
1 Static route - has a link to a specific element
2 Dynamic route - has a link to a group of elements

Static route


Allows you to create a dynamic page that will fetch information from an API source URL.

The API source URL looks like https://jsonplaceholder.typicode.com/users/1



the link data looks like this and has a link to a specific element



This data can be accessed in any part of the page via this syntax: {{$username}}
It's important to follow the syntax {{$some_data}}.


Results are visible in live only and you can see from the direct link to the page
For example https://example.unicornic.com/user




Dynamic route


Allows creating a dynamic page with a first-level nested structure that will fetch information from the API source URL.

To activate it, you need to add the dynamic variable to the API URL enclosed in curly braces

https://jsonplaceholder.typicode.com/users/{{route}}



the link data looks like this and has a link to a group of elements



This data can be accessed in any part of the page via this syntax: {{$username}}
It's important to follow the syntax {{$some_data}}.


Results are visible in live only.
If you add a nested path to the page, the dynamic variable will be replaced with this path.

For example:
When user access https://example.unicornic.com/users/2
The data is fetched from this API: https://jsonplaceholder.typicode.com/users/2




2. Dynamic visibility



This only work if the dynamic data source URL contains the Dynamic route.
This setting is located in the Advanced tab of the component settings and allows hiding/showing components depending on whether access to the page is via a dynamic route.



If the URL of the active page contains a dynamic fragment:
"Dynamic only" components are displayed.
"Static only" components are not displayed.

If the URL of the active page does not contain a dynamic fragment:
"Dynamic only" components are not displayed.
"Static only" components are displayed.

Components marked as "Default" are always visible.

Updated on: 27/08/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!