Using Data Sources to Show External Data in Qödiak Apps

Imagine building a multi‑page app in minutes, then instantly pulling live data from a third‑party service to power your dashboard. With Qödiak’s External API Data Sources, you can do exactly that—no code, no servers, just pure visual configuration. In this guide we’ll walk through every step of using data sources to display external data in a Qödiak app, from preparing the API to rendering the results in a DataGrid or DataCardGrid.

Understanding Qödiak’s External Data Source Feature

What is a Data Source?

A Data Source in Qödiak is a reusable connection to a RESTful endpoint. Once defined, the source can be queried by any component that supports dynamic data binding, such as tables, charts, maps, or even custom JavaScript scripts. This abstraction lets you treat external JSON payloads the same way you would treat native form submissions.

Supported API Types and Authentication

Qödiak currently supports standard HTTP methods (GET, POST, PUT, DELETE) and common authentication schemes:

API Key – passed as a header or query parameter.
Bearer Token – ideal for OAuth‑2 protected services.
Basic Auth – username and password encoded in the request header.

If your API uses a more complex flow (e.g., OAuth 2.0 Authorization Code), you can still integrate it by first obtaining a token via a webhook or a server‑side script, then storing the token in a Qödiak session variable for reuse.

Preparing Your External API

Choosing the Right Endpoint

Before you add a data source, identify the endpoint that returns the exact shape of data you need. For example, a public https://api.example.com/products endpoint might return an array of product objects, each with id, name, price, and imageUrl. If the API returns nested objects, consider using Qödiak’s JavaScript scripting layer to flatten the structure.

Testing with Postman or cURL

Validate the response outside of Qödiak to avoid surprises:

Open Postman and create a new GET request.
Paste the endpoint URL and add any required headers (e.g., Authorization: Bearer YOUR_TOKEN).
Send the request and inspect the JSON payload. Ensure it’s an array or an object that can be iterated.

If the API returns pagination metadata, note the query parameters you’ll need to adjust (e.g., page and limit).

Connecting the API in Qödiak

Creating a New Data Source

1. Open your Qödiak app and navigate to Forms → Data Sources. 2. Click + Add Data Source and choose REST API. 3. Fill in the required fields:

Name: Descriptive, e.g., ProductCatalog.
Method: GET (most common for read‑only displays).
URL: The full endpoint, such as https://api.example.com/products.
Headers: Add {"Authorization":"Bearer {{session.apiToken}}"} if you store the token in the session.

4. Click Test Connection. A preview of the JSON response will appear. If the preview shows an array, you’re ready to bind it.

Mapping Fields to Components

After the test succeeds, Qödiak automatically extracts field names. You can rename them for readability (e.g., imageUrl → Image URL). These mapped fields become variables you can reference in any component using the {{DataSourceName.fieldName}} syntax.

Tip: Keep field names short and snake_case to avoid confusion when referencing them in scripts.

Using Data Sources to Display External Data

Using DataGrid for Tabular Views

The DataGrid component is perfect for large datasets. Follow these steps:

Drag a DataGrid onto a page.
In the DataGrid settings, set Data Source to ProductCatalog.
Choose the columns you want to display. Qödiak will list all mapped fields; toggle the ones you need.
Optionally enable Sorting and Pagination for better performance.

When the page loads, Qödiak sends a GET request to the API, receives the JSON array, and automatically populates the grid. Users can sort by price or search by name without any additional code.

Using DataCardGrid for Card Layouts

For a more visual presentation, the DataCardGrid component renders each record as a card. It’s ideal for product catalogs, real‑estate listings, or employee directories.

Drag a DataCardGrid onto the canvas.
Select ProductCatalog as the data source.
Map fields to card elements: Image URL → Card Image, Name → Title, Price → Badge.
Enable HoverScale animation for a modern feel.

The component automatically creates a responsive grid that adapts to mobile, tablet, and desktop screens.

Adding Filters and Search

Qödiak’s DataSourceSearch component lets you add a live search box that filters the bound DataGrid or DataCardGrid. Configure it as follows:

Add a DataSourceSearch component above your grid.
Set the Target Data Source to ProductCatalog.
Choose the fields to search (e.g., Name, Description).
Optionally enable debounce to reduce API calls.

The search component updates the grid in real time, sending a new request with a q query parameter if your API supports server‑side filtering.

Advanced Tips and Best Practices

Caching and Rate Limits

External APIs often enforce rate limits. To stay within those limits, enable Qödiak’s built‑in caching (available on Starter+ plans). Set a cache duration of 5 minutes for read‑only data; this reduces the number of calls while keeping information reasonably fresh.

Error Handling with JavaScript Scripting

If an API returns an error, you can capture it using the sandboxed JavaScript environment. Example:

try {
  const response = await fetchDataSource('ProductCatalog');
  if (!response.ok) throw new Error('API error: ' + response.status);
  // Process data
} catch (e) {
  showMessage('Unable to load products. Please try again later.', {type:'error'});
  console.error(e);
}

Using showMessage() provides instant feedback to the user without breaking the page.

Combining Multiple Data Sources

Complex apps often need to merge data from two APIs—for instance, a product list and a pricing service. Create two data sources (ProductCatalog and PricingAPI), then use a JavaScript script to join them:

const products = await fetchDataSource('ProductCatalog');
const prices = await fetchDataSource('PricingAPI');
const merged = products.map(p => {
  const priceInfo = prices.find(pr => pr.productId === p.id) || {};
  return {...p, price: priceInfo.currentPrice || p.price};
});
setField('mergedProducts', merged);

Bind the resulting mergedProducts field to a DataGrid for a seamless, unified view.

Conclusion

By leveraging Qödiak’s External API Data Sources, you can turn any REST endpoint into a live, interactive component without writing a single line of backend code. From testing the endpoint to displaying data in tables, cards, and searchable lists, the platform provides a clear, visual workflow that scales from simple dashboards to enterprise‑grade applications.

Key takeaways:

Define a Data Source with proper authentication and test it inside Qödiak.
Map fields to components like DataGrid, DataCardGrid, or DataSourceSearch.
Use caching, error handling, and scripting to improve performance and reliability.
Combine multiple sources with JavaScript for advanced data mash‑ups.

Ready to supercharge your app with live external data? Start building your first Qödiak app today and experience the power of no‑code data integration.