Customize data fetching for your UI components
All UI components in the C3 AI Platform fetch data through the dataSpec configuration. This field defines the data source, how to call it, and how the response flows into the component.
Use dataSpec to:
- Connect a component to an entity or a data Type
- Call a specific backend method using
actionName - Pass in query arguments using
actionArgs - Customize when and how data loads
This approach gives you complete control over the data pipeline for your UI, without needing custom frontend logic.
Understand how dataSpec works
The dataSpec field appears inside every UI component configuration. It tells the platform:
- What Type to invoke on the backend to load data (
dataType) - What method to call (
actionName) - What arguments to pass (
actionArgs)
The C3 AI Platform handles the data fetching automatically so you don't have to write or manage the call to the backend.
Set up a basic dataSpec
In the simplest case, you only need to specify the Type you want to invoke in the backend by setting the dataType field.
{
"type": "UiSdlConnected<UiSdlDataGrid>",
"component": {
"dataSpec": {
"dataType": "WindTurbine"
}
}
}In this example, the component uses UiSdlDataGrid and connects to the WindTurbine Type. By default, UiSdlDataGrid calls the fetch method, but each component has a different default depending on its purpose.
Use actionName to call a custom backend method
If you want to fetch data using a custom method instead of the default method, set actionName in your dataSpec. The method must exist on the entity.
{
"type": "UiSdlConnected<UiSdlDataGrid>",
"component": {
"dataSpec": {
"dataType": "WindTurbine",
"actionName": "fetchByRegion"
}
}
}This example tells the component to call WindTurbine.fetchByRegion() instead of the default fetch method. If the method doesn't exist on the WindTurbine Type, the backend throws an error and the component shows no data.
Use actionArgs to pass input to the backend
If your backend method accepts arguments, pass them using actionArgs.
{
"type": "UiSdlConnected<UiSdlDataGrid>",
"component": {
"dataSpec": {
"dataType": "WindTurbine",
"actionName": "fetchByRegion",
"actionArgs": {
"region": "Northeast"
}
}
}
}The C3 AI Platform calls WindTurbine.fetchByRegion({ region: "Northeast" }).
You can hardcode static values like "Northeast" or use dynamic values from component state or Redux in more advanced use cases.
When to use dataSpec
Use dataSpec to load any data into your UI components. You can:
- Call built-in actions like
fetch - Call custom backend methods
- Pass arguments to filter the response
- Trigger data loads based on UI events
The dataSpec field supports all advanced behaviors, including custom actions and dynamic queries.