# Data Sources
Dynamic Widgets in your interface become truly powerful when paired with data sources that allow you to display live or structured content in a flexible and reusable way. Whether you're showcasing a list of products, pulling data from an API, or working with static sample data, the **Data Sources** feature provides the foundation for creating content-rich, personalized components.
This guide walks you through the three supported data source types:
* **Collection** – product groups created in Omnitron,
* **API** – external or internal endpoints serving JSON data,
* **Static** – manually entered values for simple use cases.
For each type, you’ll learn how to add the data source, connect it to widgets using the **Iterator** component, and bind specific data fields to UI elements like headings, images, or text blocks.
Let’s start with the **Collection** type, ideal for pulling product data directly from your Omnitron catalog.
## Data Source Collection
The **Collection** data source allows you to fetch product data dynamically based on collections created in **Omnitron**. These collections are defined under:
* **Omnitron > Products and Catalogs > Collections**
### Add a Collection as a Data Source
To integrate a collection into your widget, follow these steps:
1\. Navigate to the **left-hand sidebar** and click on the **Data Sources** button.
2\. In the opened pop-up, click the **Add New** button.
3\. Select the **Collection** tab from the available data source types.
4\. In the **Select Collection** dropdown, choose the desired product collection from the list.
5\. In the **Product Limit** field, specify how many products should be fetched and displayed (e.g., 4, 8, 12). The system retrieves the first items in the collection in order—so if you enter "4", it will display the first four products from the collection.
6\. Click **Add** to save the data source.
Your collection is now ready to be used in any widget that supports data iteration.
### How to Use a Collection in a Widget?
To display products from the collection in a widget:
1\. From the **Advanced** tab of the component library, drag and drop an **Iterator** component into your layout.
2\. Click the Iterator component and go to the **Properties** area.
3\. In the **Selected Data Source** dropdown, choose the collection data source you previously created.
4\. Now, drag a component such as H1, Image, or Text into the Iterator to display individual product information.
5\. Select the inner component (e.g., H1), go to its **Properties** panel, and bind a product field (e.g., name, price, image, etc.) to dynamically display product-specific content.
## Data Source API
The API data source enables your widget to retrieve structured data from external endpoints. This is especially useful when you want to connect widgets with external systems, microservices, or third-party data providers.
### Add an API as a Data Source
1\. In the **Add Data Source** pop-up, select the **API** tab.
2\. Enter the endpoint URL in the **API URL** field (e.g., ).
3\. Click **Add** to register the API data source.
You can now use the retrieved data across widgets, assuming the API returns JSON-formatted content.
### How to Use an API Data Source in a Widget?
1\. Drag and drop the **Iterator** component from the **Advanced** tab into your widget.
2\. Click on the Iterator and open the **Properties** panel.
3\. From the **Selected Data Source** dropdown, choose your API-based data source.
4\. In the **Data Key** field, enter the JSON key that contains the array of items you want to loop through.
For example, if the API response looks like:
```json
{ "products": [ {...}, {...} ] }
```
then type products as the Data Key.
5\. Click **Add** to finalize the data binding.
6\. Inside the Iterator, drag components such as **H1** or **Image**.
7\. Select the component and from its **Properties**, choose the corresponding field you want to display (e.g., `title`, `image_url`, etc.).
## Data Source STATIC
**STATIC** is used for manually defined, fixed data. It is written in **JSON format** and ideal for scenarios where no API connection is needed.
### Add a STATIC Data Source
1\. In the **Add Data Source** pop-up, select the **Static** tab.
2\. Assign a descriptive name to your data source (e.g., staticProducts).
3\. Click **Add New Item** to start defining data entries.
4\. Under each “Item”, add properties one by one by clicking the **+ Add New Item** button. For example:
* Property Name: `id`\
Property Value: `1`
* Property Name: `name`\
Property Value: `Static Product 1`
* Property Name: `price`\
Property Value: `100`
* Property Name: `image`\
Property Value: `https://example.com/image1.jpg`
{% hint style="danger" %}
Don’t forget to click **Add Property** button after entering each field.
{% endhint %}
5\. Once all properties are defined, click **Save** to finalize the data entry.
### How to Use Static Data in a Widget?
1\. Drag and drop the **Iterator** component from the **Advanced** tab into your layout.
2\. Click the Iterator and open its **Properties** panel.
3\. From the **Selected Data Source** dropdown, choose the static data source you just created.
4\. Drag elements such as **H1**, **Text**, or **Image** into the Iterator.
5\. For each element, go to the **Properties** panel and bind it to one of the property keys you’ve defined (e.g., name, price, id).
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.akinon.com/tutorials/project-zero/dynamic-widget/data-sources.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
