{ "Items": [
{ "Name": "Product 1", "Description": "A product description" },
{ "Name": "Product 2", "Description": "A product description" },
{ "Name": "Product 3", "Description": "A product description" }
]}
There are many scenarios where you may need to show dynamic data on your static pages.
Connectors are basically RestFul JSON APIs that return simple formatted data.
You can bind a Cards Container to those JSON feeds and build dynamically your page at runtime when a user visits your website.
Connectors can be useful to display users review, comments, job offers... or any data that needs to be updated regularly without having to republish your whole website.
To work properly, your connector must respect a specific JSON data format.
The JSON root node must be called "Items". Then the root node can contain several children nodes. Those children nodes can have any property of your choice.
In this sample, the "Items" root node contains 3 custom product nodes, with a "Name" and a "Description" properties.
{ "Items": [
{ "Name": "Product 1", "Description": "A product description" },
{ "Name": "Product 2", "Description": "A product description" },
{ "Name": "Product 3", "Description": "A product description" }
]}
Create an API and deploy it to any server that can be reached by your visitors when they go to your Website.
You can also just deploy a JSON file containing the data. The technology you use doesn't matter. Only the returned data is important.
In this example, we will use https://api.getpagefabric.com/test1 as an API address.
Note: Creating and deploying APIs or JSON files to the Web can require to use hosting providers. The use of Internet hosting may incur costs.
To register a connector in your Website, click the Site > Website Connectors button in the ribbon.
In the Connectors dialog, click the Add button to add a new connector to your Website.
In the Edit connector dialog, fill the fields to configure the connection correctly:
Click the Refresh fields button to retrieve the JSON properties from the endpoint.
Click Save and close to save your connector settings.
To bind parts to a connector, follow these steps:
1. Drop a Cards Container on your page
2. Drop a Card in the Cards Container
3. Select the Cards Container and open the element properties panel (or press Alt+I)
4. Open the Data binding options section, go to the Use connector to fetch data property and select a connector by clicking the Select connector button
5. Then select the card you dropped in step 2
6. Open the element properties panel (or press Alt+I)
7. Open the Data binding options section, activate the Use as template option
8. Then select text parts in the card
9. Open the element properties panel (or press Alt+I)
10. Open the Data binding options section, select the connector field you want to display using the Bind to field drop down list
This Cards Container is bound to the https://api.getpagefabric.com/test1 JSON feed.