Data integration

Here is how to link our API data to the widgets in a few steps.

1. Adding API call

Firstly, Go to the API call tab shown in the image below.

Then, By clicking on "Add" button you will get two options ("Import from CURL" and "Add New API"). Select any of the two options and you will be asked for the API name, URL and Request method, you can also add headers, body and variables. Clicking on "Save" button will add the API call successfully in your project.

2. Linking data to the page

Now, on the page of our project that requires API data, enable the checkbox as shown in the image below. This action will enable dynamic data for our page, allowing us to select any of the DataSources we have configured in our project.

3. Linking data to the widgets

As the page has been linked with data, it has exact same data as the response coming from API and to extract that data we have a keyword "dataSource". This keyword refers to the response of API and we can navigate down in the object hierarchy by using dot notation (.) followed by the desired key as shown in above example.

To access lower-level items in the hierarchy, we use a dot ( . ) followed by the key name in our JSON object.

In the first scenario, accessing "dataSource.title" from the JSON would indeed give the result "Example Task 1".

In the second scenario, accessing "dataSource.tabItems[0]" would give the value at the first index of the "tabItems" array in the JSON. So the result will be "1".

4. Rebuilding widgets with dynamic data

Widgets that accept children within them iterate through the provided list and construct their child widgets according to the list's data. Therefore, if we need the same widget multiple times but with different data, we only need to create one child and link it to the data using the keyword "currentItem". This child widget will rebuild according to the length of the list, as shown in the example below.