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., https://api.example.com/products).

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:

{ "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

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).