Connectors

There are many scenarios where you may need to show dynamic data on your static pages.

How does it work?

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.

Building your first connector

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.

Register the connector in PageFabric

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:

  • Connector Name : the internal name of your connector
  • API URL : the JSON API endpoint address

Click the Refresh fields button to retrieve the JSON properties from the endpoint.

Click Save and close to save your connector settings.

Build your page

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

Live example

This Cards Container is bound to the https://api.getpagefabric.com/test1 JSON feed.

{Name}

{Description}
Improve your PageFabric skills

Explore user guide

Have a question?

Join us on twitter