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.
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
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
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
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.
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.
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
Thank you!