Discuss

Using API Data Source

On this page

In this tutorial we will show you the basics of API Data Source. We are going to connect to the popular Unsplash API to retrieve the latest photos in a nice masonry layout. This API requires an api key, which we already retrieved. Please make sure to check the Unsplash docs: https://unsplash.com/documentation to learn how to get your own API key.

Note, that every API has its own documentation and its better to check it before start using it.

We added a simple layout, which will be converted to a masonry grid later. It contains a bootstrap 4 container, with a row and column inside it. We added an image inside the column. Click the add new component button:

Screenshot_101|690x429

Then open the Data category (1) and add API Data Source (2):

Screenshot_102|690x429

You will find the API Data Source component properties in the properties panel. Here you Add API URL (1) and Query Parameters (2) and/or API Headers (3) if your requires so:

Screenshot_103|690x429

Firs we paste the API URL:

Screenshot_104|690x429

Then, as we want to limit the number of photos retrieved, as per API documentation we need to add a query parameter:

Screenshot_105|690x429

We add it, and assign a name to it. Also we add a value to it - it can be static or dynamic value. For static values, which are not numbers make sure to wrap your value with single quotes like: 'staic value'. For dynamic values and numbers that's not required:

Screenshot_106|690x429

If your API requires, you can add header as well, just click the add new header button:

Screenshot_107|690x429

Add a name and value for it, again it can be static or dynamic value. For static values, which are not numbers make sure to wrap your value with single quotes like: 'staic value'. For dynamic values and numbers that's not required: Screenshot_108|690x429

When you are done adding your parameters and headers, click the Defin API Schema button:

Screenshot_109|690x429

You will see your parameters and headers here, you can change them to test the data if you want. Click the Fetch Schema button, to retrieve API Schema. It will be used as a data source on your page:

Screenshot_111|690x429

You will see the data, returned by your API under data:

Screenshot_112|690x429

Also you will see any response headers returned. You can use the information from response headers on your pages later, if you need:

Screenshot_113|690x429

Click the save button:

Screenshot_114|690x429

Now, let's convert the row to a masonry grid and add the dynamic API data to it. Select the row element (1) and click the Make Masonry button (2):

Screenshot_115|690x429

Then select a dynamic expression for the masonry:

Screenshot_116|690x429

We select the repeating data element, returned by our API Schema:

Screenshot_117|690x429

And you can see our images repeated 24 times. Let's bind dynamic URL to the image. Select image (1) and add new dynamic attribute (2):

Screenshot_118|690x429 )

Open the images category and click image source:

Screenshot_119|690x429

Then select an expression for the dynamic image source:

Screenshot_120|690x429

Our API returns different URLs fr different image sizes. We select the regular image size URL:

Screenshot_121|690x429

And we are done! Our masonry grid, showing images from a data API is rendered on the page:

Screenshot_122|690x429

That's how easy it is to connect to a data API, get data from it and use this data on your pages.


WapplerPrevious|101x31   WapplerNext|77x31